Angular CLI 1.7.4 TypeError：无法读取 null 的属性“配置”

Question

刚刚将全局 CLI 从 Angular 6 降级到 Angular 5，所以运行 CLI 1.7.4

尝试在最初为 Ang 5 创建的项目上运行服务（但降级了 Ang 6 的依赖项）我收到错误：

TypeError: Cannot read property 'config' of null

at Class.run (/Users/me/git-projects/wra-starter-ng5/node_modules/@angular/cli/tasks/serve.js:51:63)
at check_port_1.checkPort.then.port (/Users/me/git-projects/wra-starter-ng5/node_modules/@angular/cli/commands/serve.js:123:26)
at process._tickCallback (internal/process/next_tick.js:68:7)

我的 ng --version 显示：

Angular CLI: 1.7.4
Node: 10.2.1
OS: darwin x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.5
@angular/upgrade: 5.2.1
@angular-devkit/architect: 0.6.8
@angular-devkit/build-angular: 0.6.8
@angular-devkit/build-optimizer: 0.6.8
@angular-devkit/core: 0.6.8
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.8
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 4.8.3

寻找可能的原因，我猜测项目的 package.json 中的某些内容与 CLI 1.7.4 不兼容（该项目最初是为 Angular 6 编写的）

这是 tasks/serve.js 中抱怨的行（配置为空）：

    const projectConfig = config_1.CliConfig.fromProject().config;

注意：我的项目有一个 angular.json，但没有一个 angular-cli.json。将 angular.json 重命名为 angular-cli.json 并从已知在 1.7.4 CLI 下工作的类似项目中借用内容会引发许多错误。

以下是我现在在项目中使用默认 angular-cli.json 在 ng serve 上看到的错误：

ERROR in ./src/main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/Users/me/git-projects/wra-starter-ng5/node_modules/@ngtools/webpack/src/loader.js:33:15)
ERROR in ./src/polyfills.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/Users/me/git-projects/wra-starter-ng5/node_modules/@ngtools/webpack/src/loader.js:33:15)
ERROR in multi ./src/styles.css
Module not found: Error: Can't resolve '/Users/me/git-projects/wra-starter-ng5/src/styles.css' in '/Users/me/git-projects/wra-starter-ng5'
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/@ruf/shell/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
src/app/app.module.ts(7,10): error TS2305: Module '"/Users/me/git-projects/wra-starter-ng5/node_modules/@ruf/shell/ruf-shell"' has no exported member 'RufShellModule'.

Answer 1

我们最近在 1.7.4 中遇到了同样的问题。

首先尝试./node_modules/.bin/ng init（修复了几次）

您需要做的是检查您的 node_modules/angular/cli/models/config.ts 文件。

在代码上搜索这一行

export const CLI_CONFIG_FILE_NAME = '.angular-cli.json';

确保有一个“。”在这个文件的 angular-cli.json 前面。有时在 cli 上会出现一些不添加相对文件名的问题。

参考 - (https://github.com/angular/angular-cli/issues/4736#issuecomment-280404750)

验证后，

您需要从项目中删除 node_modules 文件夹。

然后运行npm remove webpack

删除 package-lock.json 文件。

npm cache clean --force

npm install @angular/cli@1.7.4

运行npm install again

最后检查是否发现任何依赖不匹配npm ls --depth 0

运行 npm start 或 ng serve。

如果你想这样做，你可以创建新的 Angular cli 项目，将你的 package.json 文件、src 文件夹、angular-cli.json 和 env 配置复制到新项目中。

它也应该可以解决问题。