未知的 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"

來源