Unknown Angular CLI build error

Question

I recently upgraded an angular 4.3 to 5.0.0, and I've being to able build locally on my machine. However, when I deploy to the remote machine I get this error when trying to build.

This is the simple build script

#!/bin/bash
# Deployment script

git pull

yarn install

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

yarn start

The build fails and outputs this ERROR in Error during template compile of 'ɵe' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable' 'Injectable' calls 'ɵmakeDecorator'.

I've never seen this error before. I've refactored the app to use relative paths for imports with no luck. I'm completely out of ideas at this point.

Answer 1

not sure if this helps but I got here searching google for.

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

After seeing path issues mentioned in this thread I searched for anything being referenced outsite of the project space and found this import...

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

This import (a mistake in my code) was fixed to reference the model in the project it belonged to.

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

Once the import was fixed I had a successful compile. The error output was no help, this thread was, so here is my pennies worth.

Answer 2

I had the same issue. I had a lib as a separate project and an app also separate project as a consumer of my lib.

The files in the lib project

The 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}] ,
};
}
}

The Config interface config.ts

export interface Config {

    key?: string;
}

The ViclibTestService consuming the Config interface, 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);
}
}

The above files are just the relevant files involved in this.

The files now in the app project, the consumer

The AppModule with "error" in file 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 {
}

The fix For some reason I had to give the provider like this in the AppModule in file 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: [{provide: 'config', useValue: config}],
bootstrap: [AppComponent]
})
export class AppModule {
}

Now I can use ng build --prod, ng serve --prod and ng serve, without any issues.

I'm using angular 6 which includes now ng-packagr module to generate libraries. I guess the library is not fully separated because in somehow the consumer of my library must provide the provider that my library needs. Please correct me if I'm wrong or give me your thoughts.

Answer 3

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

Answer 4

In my case during using custom pipe like this

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

And in template

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

causes this unknown issues with build --prod. Fixing - remove additional parameter from pipe, or adding empty argument

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

other case is ngFor

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

moving 'e.id==currentEntity.id' into separate method of component - also fixes.

Answer 5

Problem when try to build on server with :

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

Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in@angular/core/core.d.ts, resolving symbol ɵf in @angular/core/core.d.ts, resolving symbol ɵf in @angular/core/core.d.ts

To resolve this problem, just do this:

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

source