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

【问题标题】：Angular 5: Function calls are not supported in decoratorsAngular 5：装饰器不支持函数调用
【发布时间】：2018-03-20 14:36:27
【问题描述】：

我正在从我的 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();

base-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: [
...

有谁知道我可以做些什么来解决这个错误？

【问题讨论】：

这个错误来自于你试图将一个函数调用到一个装饰器中。如果您需要帮助，请发布调用函数的装饰器，而不是随机代码。
很抱歉，但我没有看到我在哪里将函数调用到装饰器中。我上面发布的代码是错误所引用的。 app.module.ts 中的ServiceWorkerModule 代码行引用了environment.prod.ts，它正在导入BaseEvironment 类。这就是我发布所有代码的原因。如果您能告诉我缺少的任何内容，我将不胜感激。
好的，那么请尝试使用ng build --prod --sm=false 构建。这应该仍然会弹出一个错误，但可能不是同一个。
它返回了同样的错误芽
那么，您是否有任何我们可以浏览以查找您的问题的存储库？因为它不是来自您发布的代码，而且您似乎不愿意发布更多代码。

标签： angular typescript progressive-web-apps

【解决方案1】：

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

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 })

【讨论】：

【解决方案2】：

我假设您的代码在您添加该行之前正在运行 ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

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

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

【讨论】：

感谢 Arjun 的回复，但我只希望environment.production == true 是真的。如果我将布尔值硬编码为 true，那么即使 environment.production == false（当我在开发环境中运行时）它也会尝试注册服务工作者。我将此行添加到 app.module，因为 Angular 文档在：angular.io/guide/service-worker-getting-started
我的意思是尝试用硬编码值替换它来确定错误。如果 AoT 构建没有因此而失败，那么我们将确定这是罪魁祸首代码。如果这确实是问题所在，您可能必须考虑通过其他方式传递此变量。
另外，创建环境变量的方式与我们通常在 Angular-cli 项目中设置环境变量的方式不同。 env 文件在“src/environments”中创建，更多环境可以在 angular-cli.json 中添加。这是您在上面共享的示例中预期的路径。
谢谢阿琼。我刚到办公室，所以我要试一试。
嗯...它正在使用硬编码的true。没有错误。那么阿琼该怎么办呢？

【解决方案3】：

下面是我最终想出的解决方案的代码。希望这对遇到此类问题的人有所帮助。本质上，我只是修改了我的环境文件，因此它没有创建 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
  }
}

【讨论】：