未知的 Angular CLI 构建错误

Question

我最近将一个Angular 4.3升级到5.0.0，并且已经能够在本地计算机上构建。然而，当我部署到远程计算机时，在尝试构建时出现了以下错误。

这是简单的构建脚本：

#!/bin/bash
# Deployment script

git pull

yarn install

./node_modules/.bin/ng build --prod --env=prod

yarn start

构建失败并输出以下错误： ERROR in Error during template compile of 'ɵe' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable' 'Injectable' calls 'ɵmakeDecorator'. 我以前从未见过这种错误。我已经尝试使用相对路径进行导入的重构，但是没有成功。目前我已经完全无计可施了。

- MrFoh

---

我记得这个错误是与某个版本的 cli 相关的。你确定已经更新到了最新版本的 cli 和 angular 吗？ - Poul Kruijt

我使用的是 cli 版本 1.5.2 和 angular 版本 5.0.0。 - MrFoh

最好升级到最新版本。如果您不想这样做，我强烈建议您删除整个 node_modules 文件夹并重新安装。 - Poul Kruijt

@PierreDuc 删除 node_modules 并升级所有内容解决了问题。 - MrFoh

我也遇到了完全相同的问题，但是删除和升级node_modules并没有帮助我解决这个问题，不知道还有没有其他人有解决方法？ - padigan

Answer 1

不确定这是否有帮助，但我通过谷歌搜索到了这里。

Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable'              
'Injectable' calls 'ɵmakeDecorator'.

在看到此线程中提到的路径问题后，我搜索了任何在项目空间之外被引用的内容，并找到了这个导入...

src/app/tour/tour.actions.ts:import {SomeEntity} from "../../../../fe/src/app/model";

这个导入（我的代码中的错误）已经修复，以便引用它所属项目中的模型。

import {SomeEntity} from '../model';

一旦导入问题得到解决，我就成功地编译了。错误输出没有帮助，但这个线程很有用，所以我想分享我的经验。

- englishPete

Answer 2

我通过将导入组件、模块的相对路径更改为绝对路径来解决这个问题。

- sombatsombat

Answer 3

我曾经遇到过同样的问题。我的库是一个独立的项目，我的应用程序也是一个独立的项目，作为我的库的消费者。

库项目中的文件

lib.module

import { NgModule, ModuleWithProviders } from '';
import { ViclibTestComponent } from './viclib-test.component';
import { Config } from './config';
import { ViclibTestService } from './viclib-test.service';

@NgModule({
imports: [
],
declarations: [ViclibTestComponent],
providers: [ViclibTestService ],
exports: [ViclibTestComponent]
})
export class ViclibTestModule {
static forRoot(config: Config) : ModuleWithProviders {
return {
ngModule: ViclibTestModule,
providers: [{provide: 'config', useValue: config}] ,
};
}
}

Config接口config.ts

export interface Config {

    key?: string;
}

ViclibTestService使用Config接口，viclib-test.service.ts文件

import { Injectable, Inject } from '';
import { Config} from './config';

@Injectable({
providedIn: 'root'
})
export class ViclibTestService {

constructor(@Inject('config') private config: Config) {
console.log("The config in service constructor: ", config);
console.log("config.key: ", config.key);
}
}

以上文件只是涉及到此事的相关文件。

这些文件现在在应用程序项目中，即消费者。

AppModule 中的 "error" 在 app.module.ts 文件中。

import { BrowserModule } from '';
import { NgModule } from '';

import { AppComponent } from './app.component';
import { ViclibTestModule } from 'viclib-test';

const config = {key: 'My beutiful key'};

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ViclibTestModule.forRoot(config)

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

解决方法 由于某些原因，我不得不在 app.module.ts 文件中的 AppModule 中像这样提供程序。

import { BrowserModule } from '';
import { NgModule } from '';

import { AppComponent } from './app.component';
import { ViclibTestModule } from 'viclib-test';

const config = {key: 'My beutiful key'};

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ViclibTestModule.forRoot(config)

],
providers: [{provide: 'config', useValue: config}],
bootstrap: [AppComponent]
})
export class AppModule {
}

现在我可以使用 ng build --prod、ng serve --prod 和 ng serve，没有任何问题。

我正在使用 angular 6，其中包括现在的 ng-packagr 模块来生成库。我想这个库并没有完全分离，因为消费者必须提供我的库所需的提供程序。如果我错了，请纠正我或给我您的想法。

- vicmac

Answer 4

在我的情况下，当使用类似这样的自定义管道时

@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform
{
     transform(mainArr: any[], searchText: string, property: string): any
    {
        return someFilterArrayByString(mainArr, searchText);
    }
}

在模板中

<div *ngFor='let e in entities | filter : searchText'>
      {{ e | json}}
</div>

导致构建--prod时出现未知问题。 修复方法-从管道中删除附加参数，或添加空参数

<div *ngFor='let e in entities | filter : searchText : ""'>
      {{ e | json}}
</div>

另一种情况是ngFor

  <div *ngFor='let e in entities' [ngClass]='e.id==currentEntity.id'>
          {{ e | json}}
    </div>

将“e.id == currentEntity.id”的移动到组件的单独方法中 - 同时修复。

- InPickSys

Answer 5

尝试在服务器上构建时出现问题：

"build:prod": "ng build –prod"

遇到了静态解析符号值的错误。调用函数 'ɵmakeDecorator'，不支持函数调用。考虑将函数或 lambda 替换为对导出函数的引用，在 @angular/core/core.d.ts 中解决符号注入问题，解决 @angular/core/core.d.ts 中的符号 ɵf，解决 @angular/core/core.d.ts 中的符号 ɵf。

要解决此问题，只需执行以下操作：

"build:prod": "ng build –prod –aot=false"

来源

- snowy

---

这通过防止AOT来解决了“问题”，这对于生产构建非常重要，但并不是一种修复。 - DougS