javascript - ng build 成功，但 "cannot find module ' @angular/core'"一旦在浏览器中打开

Question

在 StackOverflow 和 Google 上进行搜索只会产生无数的结果，这些结果要么看起来与 JS 的现代步伐完全过时，要么在构建部分失败，或者 VSCode 或 IntelliJ lint 出现问题；这不是我的问题:

因此我做了这个线程。

背景

该应用程序是我在一段时间前作为内部开发人员接手进行维护的应用程序，原始开发人员不再可用。

我现在的任务是进一步更新它；但要做到这一点，我需要修复一个正在发生的依赖问题，这会导致以前工作的相同提交的任何新构建都不起作用。

因此，我将转到第一个升级节点、npm 和所有涉及的包；这样我就可以创建一个良好的基线，以尝试保持一致以备将来快速更新并以此为基础。

但是，我越来越觉得从头开始会是一个更好的选择，但是由于我觉得这非常接近解决，所以重做将是一个非常低效的使用我的时间，因为我还有一堆东西要做其他事情。

根据应用程序的提交历史，这最初是一个 Angular2 应用程序，在我接手之前已升级到 Angular 5。这个版本过去运行良好，目前在 docker 容器中运行；除非重建会导致某些非常重要的功能(特别是交互)在目标设备上失败。意思是，我无法更新，直到我确切地挖掘出那里的依赖关系树，或者继续前进并通过前进来解决问题。

最近，我一直在使用 https://update.angular.io/ 中指定的指南从 Angular 5.0 升级到 Angular 6.1。并且至少在开发机器和目标设备模拟器上运行良好。

作为序言，它有一些 ionic 元素，但感觉只是用于样式和图标，并且没有充分使用，因为 DockerFile 和自述文件中使用的所有命令都使用 angular-cli 代替。

所以一些应用程序细节

包.json

{
  "name": "",
  "author": "",
  "private": true,
  "description": "",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "node_modules/.bin/ng build --prod --aot=true",
    "start:dev": "ng serve --port 8100 --host=0.0.0.0 --disable-host-check", "server:prod": "node_modules/.bin/http-server dist --cors --silent "
  },
  "dependencies": {
    "@angular/core": "~6.1.5",
    "@angular/compiler": "~6.1.5",
    "@angular/common": "~6.1.5",
    "@angular/http": "~6.1.5",
    "@angular/forms": "~6.1.5",
    "@angular/platform-browser": "~6.1.5",
    "@angular/platform-browser-dynamic": "~6.1.5",
    "@angular/router": "~6.1.5",
    "@ng-idle/core": "~6.0.0-beta.3",
    "@ngx-translate/core": "~9.1.1",
    "@ngx-translate/http-loader": "~2.0.1",
    "@reactivex/rxjs": "~6.3.2",
    "http-server": "~0.11.1",
    "angular2-uuid": "~1.1.1",
    "ajv": "~6.5.3",
    "caniuse-db": "~1.0.30000884",
    "core-js": "~2.5.7",
    "ionic-angular": "~3.9.2",
    "ionicons": "4.4.3",
    "lodash": "~4.17.5",
    "moment": "~2.22.2",
    "node-sass": "~4.9.3",
    "rxjs": "~6.3.2",
    "rxjs-compat": "^6.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@types/node": "8.0.53",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "~6.1.5",
    "@angular-devkit/build-angular": "~0.7.5",
    "@angular-devkit/core": "~0.7.5",
    "@types/lodash": "~4.14.112",
    "codelyzer": "~4.4.4",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "2.9.2"
  }
}

tsconfig.app.json

{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "outDir": "../out-tsc/app",
        "module": "es2015",
        "baseUrl": "",
        "types": [],
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

ES5 的目标是必须的，因为目标设备不能运行任何更新的版本，并且 JIT 方法在机器上会很慢。

什么有效？

ng serve 

工作正常，页面完全可用并且按预期工作。测试也成功了。

构建并运行构建

ng build --prod --aot=true
http-server dist --cors --silent 

还可以无错误地完成构建。

简单的 http-server 启动，并成功托管文件。

问题

然而当我打开浏览器并导航到该页面时，出现以下错误。

Uncaught Error: Cannot find module '@angular/core'
    at n (VM736 main.84a8ed63029b59b371ad.js:1)
    at VM736 main.84a8ed63029b59b371ad.js:1
    at VM736 main.84a8ed63029b59b371ad.js:1
    at Object.eD2c (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.zUnb (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.4 (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at n (VM734 runtime.a66f828dca56eeb90e02.js:1)

这是唯一的错误，并且 angular-app 拒绝在浏览器中呈现。

这发生在开发机器和应用程序最终构建到的 docker 容器上，所以 构建环境应作为变量消除。

我确信这一定是 tsconfig 问题或类似的问题，或者我对 ts 或 angular 的缺乏经验只是丢失了。

Answer 1

问题是 Angular 6 和 Ionic 3 的组合。这种组合不受官方支持:https://forum.ionicframework.com/t/upgrading-to-angular-6/131121/5

使用 webpack 的 Angular 6 提前编译器不能正确地缩小 javascript。这就是脚本尝试加载模块的原因 - 请参阅您的错误消息。如果缩小工作正常，则不必加载模块，因为它们都是一起编译的。

问题在于 ionic-angular，它与 typescript 或 webpack 都不兼容。虽然 webpack 正在缩小代码，但有许多警告，如 Critical dependency: the request of a dependency is an expression
要解决您的问题，请禁用提前编译或更新到 Angular 6 和 Ionic 4。