Angular 5：装饰器不支持函数调用

Question

我正在使用我的Angular应用程序构建一个PWA，当我运行ng build --prod时出现以下错误：

ERROR in app\app.module.ts(108,64): Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'Environment' was called in 'environment'
'environment' calls 'Environment'.

然而，这没有任何意义，因为我在课堂上添加了export，如您所见：

environment.prod.ts

import { BaseEnvironment } from './base-environment';
import { ProspectBuilderModel } from '../app/models/prospect';

export class Environment extends BaseEnvironment {
  production: boolean = true;
  prospectBuilderModel: ProspectBuilderModel = {
    buildQuote: false,
    buildAcknowledge: false,
    buildOrganizationInfo: false,
    buildFinancialInfo: false,
    buildTradeInfo: false,
    buildPermissiblePurpose: false,
    buildUserSetup: false,
    buildPackageSelection: false,
    buildPaymentOptions: false,
    buildOrderOptions: false,
    buildVerifyOrganizationInfo: false,
    buildDocusignAuthorization: false,
    buildDocusignContract: false
  };
}

export const environment = new Environment();

基environment.ts

import { ProspectBuilderModel } from '../app/models/prospect';

export abstract class BaseEnvironment {
  abstract production: boolean;
  abstract prospectBuilderModel: ProspectBuilderModel;
}

app.module.ts

...
 ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MultiselectDropdownModule,
    ReactiveFormsModule,
    HttpModule,
    ToastrModule.forRoot(),
    BrowserAnimationsModule,
    NgxMyDatePickerModule.forRoot(),
    PopoverModule.forRoot(),
    ModalModule.forRoot(),
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
...

有谁知道如何解决此错误？

Answer 1

我假设您的代码在添加行之前正在运行      ServiceWorkerModule.register（＆＃39; /ngsw-worker.js'，{enabled：environment.production}）

通常，当我们访问app模块中的环境变量时，它通常是指由angular cli自动生成的环境文件（基本上是常量并导出）。我从未尝试过创建类的对象并在app模块中传递它。这可能会导致问题。

尝试直接在此行中传递一个true，而不是从对象中获取它，看看是否有效。

Answer 2

以下是我最终提出的解决方案的代码。希望这能帮助遇到此类问题的人。本质上，我刚修改了我的环境文件，因此它没有创建Environment类的实例。我猜Angular不喜欢实例化：

export const environment = {
  production: true,
  prospectBuilderModel: {
    buildQuote: false,
    buildAcknowledge: false,
    buildOrganizationInfo: false,
    buildFinancialInfo: false,
    buildTradeInfo: false,
    buildPermissiblePurpose: false,
    buildUserSetup: false,
    buildPackageSelection: false,
    buildPaymentOptions: false,
    buildOrderOptions: false,
    buildVerifyOrganizationInfo: false,
    buildDocusignAuthorization: false,
    buildDocusignContract: false
  }
}

Answer 3

有同样的问题，这是可能的解决方法（如果您没有动态加载的属性）：

1。作为您的答案，只是反对。

但是您会丢失默认属性和有关“实施”属性的信息。

2。使用静态类：

在这里，您失去了“实现”属性，因为抽象静态变量是not possible，但是具有类型和默认值。

// default.env.ts
export class BaseEnvironment {
  public production: boolean = true;
  public specialPropToImpl: boolean = true;
}

// your.env.ts
export class Environment extends BaseEnvironment {
  public specialPropToImpl = true;
}

export const environment = Environment;

3。使用默认属性对象，接口和对象分配：

在这里，您具有“要实现”的属性，类型和默认值，但是要实现却有点难看。

// default.env.ts
export interface EnvProperties {
  production: boolean;
  specialPropToImpl: boolean;
}

export const defaultEnv = {
  production: true
};

// your.env.ts
export const environment: EnvProperties = {
  ...defaultEnv,
  specialPropToImpl: true
};

4。来自环境的仅一个静态变量

简单的解决方案，您可以保留子类，但是每个env文件都必须包含它。但是由于新环境文件是通过旧文件的复制粘贴创建的，因此可以使用。
根据生产值，应手动更改变量值。
不是非常灵活且可维护的解决方案。但是简单。

// your.env.ts
export const enablePwa = true

// app.module.ts
import {environment, enablePwa} from 'env.ts'
//...
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: enablePwa })