未知的 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'.输出此ERROR in Error during template compile of 'ɵe' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable' 'Injectable' calls 'ɵmakeDecorator'.

我以前从未见过这个错误。 我已经重构了应用程序以使用相对路径进行导入，但没有运气。 在这一点上，我完全没有想法。

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';

一旦导入修复，我就成功编译了。 错误输出没有帮助，这个线程是，所以这是我的便士。

Answer 2

我有同样的问题。 我有一个 lib 作为一个单独的项目，一个应用程序也有一个单独的项目作为我的 lib 的使用者。

lib项目中的文件

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

使用 Config 接口的 ViclibTestService，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);
}
}

以上文件只是本次涉及的相关文件。

现在在 app 项目中的文件，消费者

文件 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: [],
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 模块来生成库。 我猜图书馆没有完全分离，因为以某种方式我的图书馆的使用者必须提供我的图书馆需要的提供者。 如果我错了，请纠正我或给我你的想法。

Answer 3

我通过更改导入组件的源代码来解决此问题，模块的相对路径到绝对路径。

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>

使用 build --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' 移动到单独的组件方法中 - 也修复了。

Answer 5

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

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

静态解析符号值时遇到错误。 调用函数'ɵmakeDecorator'，不支持函数调用。 考虑用对导出函数的引用替换函数或 lambda，解析@angular/core/core.d.ts 中的符号 Injectable，解析 @angular/core/core.d.ts 中的符号 ɵf，解析 @angular 中的符号 ɵf /核心/核心.d.ts

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

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

来源