[英]Angular environment files do not get swapped in time
I am using Angular 9, View Engine compiler.我正在使用 Angular 9,查看引擎编译器。
I have 2 files where I store environment values:我有 2 个文件用于存储环境值:
environment.ts :环境.ts :
export const environment: any = {
production: false,
};
environment.prod.ts : environment.prod.ts :
export const environment: any = {
production: true
}
Here is a part of my angular.json configuration that swaps environment.ts with environment.prod.ts when building the app for production environment:这是我的angular.json配置的一部分,它在为生产环境构建应用程序时将 environment.ts 与 environment.prod.ts 交换:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "app/src/environments/environment.ts",
"with": "app/src/environments/environment.prod.ts"
}
]
}
}
I am using environment variables to configure the third-party service if it should or should not run on developer mode.如果第三方服务应该或不应该在开发人员模式下运行,我正在使用环境变量来配置它。 However, in production (when building with --prod flag), it was not working properly.
但是,在生产中(使用 --prod 标志构建时),它无法正常工作。 After some investigation we have found out that the third party service is getting the value from environment.ts and not from the environment.prod.ts .
经过一番调查,我们发现第三方服务是从environment.ts而不是从environment.prod.ts获取价值。
Here is the trimmed down version of app.module.ts where the configuration is made:这是进行配置的app.module.ts的精简版本:
import { environment } from './../environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [
// Google Analytics (via Angulartics2)
Angulartics2Module.forRoot({
developerMode: !environment.production // <-- Gets incorrect value: 'true' on production mode
}), // but should be 'false'
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
console.log(!environment.production); // <-- Logs correct value: 'false' on production mode
}
}
Later testing at runtime that Angulartics2 third-party service indeed received the wrong value:后来在运行时测试 Angulartics2 第三方服务确实收到了错误的值:
@Injectable({ providedIn: 'root' })
export class GoogleAnalyticsService {
constructor(
private angulartics2: Angulartics2
) {
console.log(this.angulartics2.settings.developerMode); // Logs 'true'
}
}
Why is the wrong environment value being received in AppModule
's @NgModule
decorator function, but then - the correct one in AppModule
's constructor
and the service that executes later at runtime?为什么在
AppModule
的@NgModule
装饰器 function 中接收到错误的环境值,但是 - AppModule
的constructor
中的正确环境值和稍后在运行时执行的服务? Does the @NgModule()
decorator function for AppModule
gets executed before the environment files get swapped by the compiler?用于 AppModule 的
@NgModule()
装饰器AppModule
是否在编译器交换环境文件之前执行?
It seems Angular uses Webpack for file replacements specified in Angular.json .似乎 Angular使用 Webpack进行Angular.Z466DEEC76ECDF5FCA6D38571F63中指定的文件替换So the file replacement happens at some point in the build phase, which is probably after the code in decorators such as
@NgModule
gets resolved by the Angular compiler.所以文件替换发生在构建阶段的某个时刻,这可能是在诸如
@NgModule
之类的装饰器中的代码被 Angular 编译器解析之后。 Thus, it seems one should not use environment variables when configuring @NgModule
imports.因此,在配置
@NgModule
导入时似乎不应该使用环境变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.