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 开始），然后我们重新开始构建。

不知道为什么它突然停止工作，但以上解决了问题。