loadChildred 的角度生产构建问题

Question

我在这个项目上工作了大约 5 个月，看起来还不错。但是在尝试使用 CI/CD 之后，我遇到了一个新问题。 构建过程在我的笔记本电脑和台式机系统中运行良好，但是当我尝试像 CI/CD 运行器一样模拟该过程时，我遇到了同样的错误：

ERROR in ./src/app/app-routing.module.ts 7:30
Module parse failed: Unexpected token (7:30)
You may need an appropriate loader to handle this file type.
| import { PinPrintComponent } from 'src/app/modules/user-actions/pin-print/pin-print.component';
| import { InvoicePrintComponent } from 'src/app/modules/user-actions/invoice-print/invoice-print.component';
> var ɵ0 = function () { return import("./modules/user-actions/user-actions.module.ngfactory").then(function (mod) { return mod.UserActionsModuleNgFactory; }); }, ɵ1 = function () { return import("./modules/user-panel/user-panel.module").then(function (mod) { return mod.UserPanelModule; }); };
| var routes = [
|     {

我通常做的是使用以下命令进行构建： ng build --prod 但是为了模拟 CI/CD 运行器的情况，我使用了： ./node_modules/@angular/cli/bin/ng build --progress false --prod

这是我的app-routing.module：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './services/auth.guard';
import { AuthenticatedAppResolver } from './services/resolver.service';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/user-actions/user-actions.module').then(mod => mod.UserActionsModule)
  },
  {
    path: 'panel',
    loadChildren: () => import('./modules/user-panel/user-panel.module').then(mod => mod.UserPanelModule),
    canActivate: [AuthGuard],
    resolve: [AuthenticatedAppResolver]
  },
  {
    path: '**',
    redirectTo: '/panel/dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

还有我的package.json，如果它会响起任何铃声：

{
  "name": "some-project",
  "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": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "angular-google-charts": "^0.1.6",
    "angular-highcharts": "^8.0.3",
    "angular2-counto": "^1.2.5",
    "bootstrap": "^4.4.1",
    "file-saver": "^2.0.2",
    "highcharts": "^7.2.1",
    "html2canvas": "^1.0.0-rc.5",
    "jspdf": "^1.5.3",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "ng-http-loader": "^5.1.0",
    "ngx-smart-modal": "^7.3.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "xlsx": "^0.15.3",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.6",
    "@angular/cli": "^8.3.20",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.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.1.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"
  }
}

Answer 1

在 Angular 8 中，您可以将 target 更改为 es6。 Angular CLI 构建项目的 2 版本。 （适用于现代浏览器和旧浏览器）。

要使用这个加载器import('./modules/user-actions/user-actions.module').then(mod => mod.UserActionsModule)，我们也必须更新tsconfig。

tsconfig

"compilerOptions": {
    ...
    "module": "esnext",
    "target": "es6",
    "lib": [
      "es2018",
      "dom", // Maybe you don't need it
      "dom.iterable" // Maybe you don't need it
    ],
    ...
}