角度8:运行“ ng build --prod”时core.ts中出现错误

时间:2019-09-03 12:46:27

标签: javascript angular typescript single-page-application angular8

我不知道错误的原因是因为它们在Angular的core.ts文件中。
这是输出:

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. 

我的app.module.ts文件:

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

我的angular.json文件:

{
  "$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"
}

该如何解决?

2 个答案:

答案 0 :(得分:1)

只需将其张贴在这里,以帮助遇到相同问题的每个人

使用任一选项更新您的tsconfig.json文件

"skipTemplateCodegen": false,
"strictMetadataEmit": false

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

另一个建议链接以查看

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

更新与您的配置一起仔细检查我的配置,看是否可行

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

答案 1 :(得分:-1)

您应该向我们展示您的app.module文件和ɵmakeDecorator的用法,以进行更详细的调查,但是看来您应该检查是否正确使用了导入。可以找到更多信息here

编辑: 只是提高了似乎对作者有用的解决方案,这在这篇评论中提供了:

  

这里github.com/ng-packagr/ng-packagr/issues/的此评论很有帮助