角度编译器错误（似乎是错误的实例）

Question

当我尝试运行“ng serve”时，我遇到了以下问题：

./src/main.ts 中的错误 模块构建失败：错误：检测到 Angular 编译器，但它是错误类的实例。 这可能意味着您安装了多个 @ngtools/webpack 包。您可以通过npm ls @ngtools/webpack 进行检查，然后删除多余的副本。

遵循这个建议：

$ npm ls @ngtools/webpack 测试@0.0.0 C:\Datan\Projects\test -- @angular/cli@1.7.2 -- @ngtools/webpack@1.10.1

所以没有安装多个 webpack 版本。在使用npm cache clean -f 和npm cache verify 之后，我尝试多次重新安装@angular/cli....全局、本地。我对webpack 做了同样的事情。可悲的是，遇到这个问题的人并不多，这使得它难以解决。我的谷歌研究没有成功，因为我只能找到一个将错误翻译成中文的中文页面和这两个 SO 链接（它们没有为我提供解决方案）：

https://stackoverflow.com/search?q=Angular+Compiler+was+detected

Error: several @ngtools/webpack packages installed

Share `node_modules` between Meteor 1.6 server & Angular CLI client Angular-Meteor subprojects?

我的 package.json：

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "2.6.2"
  }
}

注意：

该项目可以在另一台 PC 上编译 - 唯一的区别是操作系统（他使用 win7，而我使用 win10）。

问候，周末愉快，

梅瑟比尔

Answer 1

我也遇到了同样的问题。不确定它是否与升级到 Angular CLI 1.7.2 相关（我是从 1.6.1 升级的）。

这是我为解决它所做的：

1. 核对项目node_modules 文件夹（仅运行npm install 并没有修复它）。
2. 以管理员身份在 Windows 10 中打开命令提示符（可能有点矫枉过正）。
3. 在项目文件夹中运行npm install。
4. 然后我在 vscode 终端中成功运行了ng build。
5. 然后我成功运行ng serve。

我从 cmets 看到您已经尝试了其中的一些，但这些步骤对我有用 :-)

"devDependencies": {
    "@angular/cli": "1.7.2",
    "@angular/compiler-cli": "5.2.7",
    "@types/node": "9.4.6",
    "codelyzer": "4.2.1",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "2.4.2"
}

Answer 2

最后。更新我的 global 打字稿版本修复了它。现在在全球范围内使用 tsc 2.6.2 并且可以正常工作。

现在使用以下内容：

• typescript 2.6.2（全局和本地）
• @angular/cli 1.7.2（全局和本地）
  • webpack 3.11.0
• 节点-v8.9.1
• npm -v 5.5.1

Answer 3

尝试删除您的 node_modules，并使用 yarn install 而不是 npm install。它对我有用:)

Answer 4

要从package.json 中删除多余的副本和依赖项，您需要使用保存标志：

npm uninstall --save webpack

如果您已将包安装为“devDependency”（即使用--save-dev），则--save 不会将其从package.json 中删除。您需要使用--save-dev 来卸载它。 这是上述命令运行良好的结果。

$ npm ls @ngtools/webpack
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
+-- @angular-devkit/build-angular@0.7.5
| `-- @ngtools/webpack@6.1.5
`-- @ngtools/webpack@6.2.1

---

$ npm uninstall --save webpack
> node-sass@4.9.3 install C:\Apache24\htdocs\angularapp\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\user\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-59_binding.node

> node-sass@4.9.3 postinstall C:\Apache24\htdocs\angularapp\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Apache24\htdocs\angularapp\node_modules\node-sass\vendor\win32-x64-59\binding.node
Testing binary
Binary is fine
added 1106 packages in 677.641s

---

$ npm ls @ngtools/webpack
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
`-- @angular-devkit/build-angular@0.7.5
  `-- @ngtools/webpack@6.1.5