23.09 Creating your own website

Angular

You should look into the following before creating your angular application:

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",

Link to original