Angular 8：运行“ng build --prod”时core.ts中的错误

Question

I don't know what's the cause of the errors since they are in the core.ts file of Angular.
This is the output:

ERROR in @angular/core/core.ts(194,31): Error during template compile of 'NgModule
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
@angular/core/core.ts(756,18): Error during template compile of 'Component'       
  Function calls are not supported in decorators.                                 
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. 
@angular/core/core.ts(194,31): Error during template compile of 'NgModule'        
  Function calls are not supported in decorators. 

my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './views/login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialComponentsModule } from './material-components.module';
import { RoutingPipe } from './pipes/routing.pipe';
import { ContainerComponent } from './views/container/container.component';
import { UsersComponent } from './views/users/users.component';
import { TrackingSheetsComponent } from './views/tracking-sheets/tracking-sheets.component';
import { AgGridModule } from 'ag-grid-angular';
import { GridTableComponent } from './components/grid-table/grid-table.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorHandler } from './services/app-errors/error-handler';
import { ATTPInterceptor } from './services/http.interceptor';
import { ErrorStateMatcher } from '@angular/material';
import { CustomErrorStateMatcher } from './utils/custom-error-state-matcher';
import {LocationStrategy, HashLocationStrategy, DatePipe} from '@angular/common';
import { LoaderComponent } from './components/loader/loader.component';
import { ModalComponent } from './components/modal/modal.component';
import { UserFormComponent } from './views/users/user-form/user-form.component';
import { UserSaveComponent } from './views/users/user-save/user-save.component';
import { TrackingSheetSaveComponent } from './views/tracking-sheets/tracking-sheet-save/tracking-sheet-save.component';
import { TrackingSheetFormComponent } from './views/tracking-sheets/tracking-sheet-form/tracking-sheet-form.component';
import {AttachmentSelectorComponent} from "./components/attachment-selector/attachment-selector.component";
import {SlarnAutocompleteModule} from "./components/slarn-autocomplete/slarn-autocomplete.module";
import {ImageSelectorComponent} from "./components/image-selector/image-selector.component";
import {SbcDatePickerComponent} from "./components/sbc-date-picker/sbc-date-picker.component";
import {DatepickerOverviewExample} from "./components/sbc-date-adapter/datepicker-overview-example";
import { CustomerContainerComponent } from './views/customer-area/customer-container/customer-container.component';
import { CustomerDashboardComponent } from './views/customer-area/customer-dashboard/customer-dashboard.component';
import { CustomerTrackingSheetComponent } from './views/customer-area/customer-tracking-sheet/customer-tracking-sheet.component';
import {SlickCarouselModule} from "ngx-slick-carousel";
import { LightBoxComponent } from './components/light-box/light-box.component';
import { ContactsComponent } from './views/customer-area/contacts/contacts.component';
import {NgxContentLoadingModule} from "ngx-content-loading";
import {ImplodePipe} from "./pipes/implode.pipe";
import {TruncatePipe} from "./pipes/truncate.pipe";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ContainerComponent,
    RoutingPipe,
    UsersComponent,
    TrackingSheetsComponent,
    GridTableComponent,
    LoaderComponent,
    ModalComponent,
    UserFormComponent,
    UserSaveComponent,
    TrackingSheetSaveComponent,
    TrackingSheetFormComponent,
    ImageSelectorComponent,
    AttachmentSelectorComponent,
    SbcDatePickerComponent,
    DatepickerOverviewExample,
    CustomerContainerComponent,
    CustomerDashboardComponent,
    CustomerTrackingSheetComponent,
    LightBoxComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialComponentsModule,
    AgGridModule.withComponents([]),
    HttpClientModule,
    SlarnAutocompleteModule,
    SlickCarouselModule,
    // NgxContentLoadingModule
  ],
  providers: [
    ErrorHandler,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ATTPInterceptor,
      multi: true,
    },
    { provide: ErrorStateMatcher,
      useClass: CustomErrorStateMatcher
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    RoutingPipe,
    DatePipe,
    ImplodePipe,
    TruncatePipe
  ],
  entryComponents: [
    LoaderComponent,
    DatepickerOverviewExample
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "second-frontend": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/second-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/slick-carousel/slick/slick.scss",
              "node_modules/slick-carousel/slick/slick-theme.scss"
            ],
            "scripts": [
              "node_modules/slick-carousel/slick/slick.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "second-frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "second-frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "second-frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "second-frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "second-frontend:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "second-frontend"
}

What can I do to fix it ?

Answer 1

Just post it here to help everyone that have same problem

Update your tsconfig.json file with either options

"skipTemplateCodegen": false,
"strictMetadataEmit": false

or

"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true

Another suggest link to take a look at

https://github.com/gevgeny/angular2-highcharts/issues/156#issue-207301509

Update double check my config with your to see if it work

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular8": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular8",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular8:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular8:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular8:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular8:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular8:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "angular8"
}

Answer 2

You should show us your app.module files and the usage of ɵmakeDecorator for a more detailed investigation, but it seems that you should check if you are using imports correctly. More info can be found here

EDIT: Just moving up the solution that seems to work for the author which was provided in this post comments:

This comment right here github.com/ng-packagr/ng-packagr/issues/ … was helpful