23.05 Default angular practices

build specific variables

To make variables you can only see when you run it local, or only in production. Follow these steps.

• go into your src/ folder and make a new folder. i always call this environment/
• inside this folder make 2 files: environment.ts and environment.prod.ts
• paste the following into these files:

  export const environment = {
      production: false
  }

  and set production to true in the environment.prod.ts
• go to the angular.json
• find "architect": { "build": {
• inside "build" go to "configurations" and then "production"
• paste the following json in this dict:

  "fileReplacements": [
      {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
      }
  ],

  If you chose a different path or name, then use your corresponding paths.

Now you should be able to import environment in every typescript file, and use the variables in there.

When you run it locally, it will use the variables from "src/environments/environment.ts". And when you build this script (using 1 of the 2 builders), it will use the variables from "src/environments/environment.prod.ts",

standalone component generation

On default ng generate component myComponent will make it a standalone component. This is good for when you plan on making it exportable, but otherwise not so much.

You can change it so that it doesn’t make it standalone when you use ng generate component myComponent

You can either use ng generate component --standalone false myComponent, this will generate this one with your preferred standalone settings.

But if you want to change it as default mode, go to Angular.json and define the default behaviour:

"projects": {
    "my-angular17-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        }
      },
    }
}

The reason why you would want it to be standalone is for creating a component you want to export to other applications. But if you don’t need that, I’d advise to mkae it not be standalone.

Prevent issues by setting it to default in the init generation command: ng new --no-standalone appName

a comment that explains this on stackoverflow