角环境文件未通过ng serve / build复制

Question

I am stuck with this apparently simple issue. I have different env files in angular-cli.json as shown:

  "environmentSource": "environments/environment.ts",
  "environments": {
    "local": "environments/environment.local.ts",
    "dev": "environments/environment.dev.ts",
    "test": "environments/environment.test.ts",
    "uat": "environments/environment.uat.ts",
    "staging": "environments/environment.staging.ts",
    "prod": "environments/environment.prod.ts"
  }

I expect that ng serve --environment=local will copy the contents of environment.local.ts to environment.ts , however it is apparently not working. The app does not work if I have an intentional typo in environment.ts . For example, if I have in environment.local.ts export const baseWebApiUrl = 'http://localhost:63037/api/' and in environment.ts export const baseWebApiUrl = 'http://xxx/api/' - the app fails. It only works if I also have export const baseWebApiUrl = 'http://localhost:63037/api/' in environment.ts which defeats the purpose of all these different settings files.

What am I doing wrong?

Thanks Anand

Answer 1

In the component where you want to use that environment variable add below import statement:

import { environment } from '../environments/environment';

Then you do a build for your environment:

ng build -env=local

If you try ng serve after this, the application will take the values from corresponding environment file. Please try this and share results.

Answer 2

我以为ng serve将采用ng build --env = NAME的输出，但似乎需要同时使用ng build和ng serve --env = NAME