Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 8 ng build --prod gives Error during template compile of 'Injectable'

I upgraded from angular 6 to 8 and updated all the libraries used in the project. Everything seems to be running fine but when I use ng build --prod, I get these errors

ERROR in Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Directive'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'NgModule'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'NgModule'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called.

I already searched for solutions and got things like changing absolute path to relative. I did that still I get these issues

Here is package.json

{
  "name": "centilytics-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts3-angular": "^2.1.1",
    "@amcharts/amcharts4": "^4.5.6",
    "@amcharts/amcharts4-geodata": "^4.1.6",
    "@angular/animations": "^8.1.1",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/material": "^8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "~8.1.1",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
    "@sedeh/wizard-storage": "^1.2.5",
    "@types/jquery": "^3.3.30",
    "ag-grid": "^18.1.2",
    "ag-grid-angular": "^21.0.1",
    "ag-grid-community": "^21.0.1",
    "aws-mqtt": "^0.2.2",
    "aws-sdk": "^2.289.0",
    "classlist.js": "^1.1.20150312",
    "jquery": "^3.4.1",
    "ng5-slider": "^1.2.4",
    "ngx-bootstrap": "^5.1.0",
    "ngx-editor": "^4.1.0",
    "ngx-gauge": "^1.0.0-beta.10",
    "ngx-mat-select-search": "^1.7.6",
    "ngx-summernote": "^0.6.5",
    "paho-mqtt": "^1.0.4",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "values.js": "^1.0.3",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}
like image 640
Dhananjay Kaushik Avatar asked Jul 20 '19 21:07

Dhananjay Kaushik


2 Answers

Adding this to tsconfig.json worked for me

"compilerOptions": {
    "paths": {
        "@angular/*": [ "node_modules/@angular/*"]
    }
  }
like image 135
Shlok Nangia Avatar answered Nov 10 '22 19:11

Shlok Nangia


There is a regression (a behavior that used to work and stopped working in a new release) open ticket for this issue. And under that issue there is the solution: https://github.com/angular/angular/issues/23609#issuecomment-386876693

like image 23
Pa Ri Avatar answered Nov 10 '22 20:11

Pa Ri