Angular 为什么构建的应用程序出现无法启用生产模式的错误？

Question

我使用 ng build --prod 构建了我的 angular 应用程序，当我尝试启动它时，出现一条错误消息：

Uncaught Error: Cannot enable prod mode after platform setup.

在我的 api.service.ts 服务顶部，我使用 isDevMode() 以防我在本地主机上进行测试：

if (isDevMode()) {
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      // 'Authorization': "Basic " + btoa(user + ":" + password),
      'Authorization': `Basic ${btoa(`${user}:${password}`)}`,
      'Access-Control-Allow-Origin': '*'
    })
  };
} else {
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Access-Control-Allow-Origin': '*'

    })
  };
}

在main.ts：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

在 environment.ts:

export const environment = {
  production: false
};

我试图检查这个 in stack overflow but no results from it and this post on github。

编辑

environment.prod.ts:

export const environment = {
  production: true
};

Answer 1

您不能在调用 enableProdMode 之前调用 isDevMode()（请参阅 here）。

在调用 enableProdMode 之前，您正在 main.ts 文件中导入 AppModule。该导入将依次导入您的服务文件，根据我的理解，该文件在 class 之外进行了 isDevMode 检查。

尝试在您的服务构造函数中移动 httpOptions 的初始化。

注意如果变量是静态变量并在声明时初始化，您将遇到同样的问题。

如果您想在 class 之外进行初始化，您可以检查您的环境

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

 if (environment.production) {
    httpOptions = {

顺便说一句，header Access-Control-Allow-Origin 是服务器响应 header，不应在客户端请求中设置。

Angular 为什么构建的应用程序出现无法启用生产模式的错误？

Angular why the built application is giving an error of cannot enable prod mode?

dev-mode

angular