NG 構建失敗模塊解析失敗：意外令牌 - 沒有任何變化

Question

2 天前，我們在使用 gitlab ci 部署時突然開始出現構建錯誤。 構建腳本中沒有任何變化，NPM、NG 或 Angular 的版本沒有變化。 相同的編譯命令在我們的開發機器上運行良好。

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.2.1
Node: 10.16.2
OS: linux x64
Angular: 8.1.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.801.3
@angular-devkit/build-angular      0.801.3
@angular-devkit/build-optimizer    0.801.3
@angular-devkit/build-webpack      0.801.3
@angular-devkit/core               8.1.3
@angular-devkit/schematics         8.1.3
@angular/cdk                       8.1.2
@angular/cli                       8.2.1
@angular/fire                      5.2.1
@angular/http                      2.4.10
@angular/material                  8.1.2
@angular/material-moment-adapter   8.1.2
@angular/pwa                       0.801.3
@ngtools/webpack                   8.1.3
@schematics/angular                8.1.3
@schematics/update                 0.802.1
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.35.2

ng-build:
  stage: build
  image: node:10
  script: 
  - node --version
  - npm --version
  - rm -f package-lock.json
  - npm install
  - npm run-script version
  - npm run-script build-ci
  - cd dist && npm pack
  artifacts:
    paths:
    - dist/*.tgz

即使我們嘗試重新運行以前成功的構建，它現在也會失敗並出現相同的錯誤

ERROR in ./src/app/app-routing.module.ts 3:17
Module parse failed: Unexpected token (3:17)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
| import { Routes } from '@angular/router';
| import { AuthGuard } from './core/guards/auth.guard';
> const ɵ0 = () => import("./modules/auth/auth.module.ngfactory").then(mod => mod.AuthModuleNgFactory), ɵ1 = () => import("./modules/property/property.module.ngfactory").then(mod => mod.PropertyModuleNgFactory), ɵ2 = () => import("./modules/privacy/privacy.module.ngfactory").then(mod => mod.PrivacyModuleNgFactory), ɵ3 = () => import("./modules/homepage/homepage.module.ngfactory").then(mod => mod.HomepageModuleNgFactory), ɵ4 = () => import("./modules/calendar/calendar.module.ngfactory").then(mod => mod.CalendarModuleNgFactory), ɵ5 = () => import("./modules/statistics/statistics.module.ngfactory").then(mod => mod.StatisticsModuleNgFactory);
| const routes = [
|     {
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gurubnb-frontend-app@0.0.0 build-ci: `ng build --configuration=ci`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gurubnb-frontend-app@0.0.0 build-ci script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我不明白為什么以前工作的東西會在沒有版本或代碼更改的情況下失敗。 期望構建仍然有效。

Answer 1

這也發生在我身上。 較新版本的 webpack (4.39.0) 與 acorn 版本有一些對等依賴。 問題是我使用的另一個包也有這個依賴項（舊版本），所以它首先被安裝（並且由於某種原因（可能與npm相關）沒有安裝 webpack 依賴項）。

所以我們有兩個選擇：

1）安裝和降級webpack版本。

2）或者為了這個工作，首先卸載安裝 acorn 的依賴項（在我的例子中是jspdf ），然后進行全新安裝（ npm install ），然后安裝刪除的依賴項（ npm install jspdf ）。

要檢查此依賴問題是否也發生在您身上，您可以使用npm ls acorn檢查包的生命故事。

這張圖片代表了橡子的一個問題：

這是一個正確的依賴：

降級可能是一個不錯的選擇，但首先了解問題發生的原因也很好。

希望能幫助到你，

干杯!

Answer 2

你能和我一起仔細檢查我的tsconfig.json嗎？ 確保您具有"module": "esnext"

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

Answer 3

此問題是由 webpack 和/或 acorn 中的問題引起的。 我發現其他類似的問題（但不是相同的問題）並決定重新安裝 acorn 並將 webpack 更新到 4.39.2（從 4.35.2 開始），然后我們重新開始構建。

不知道為什么它突然停止工作，但以上解決了問題。