logo标签列表

错误：数据路径“.builders ['app-shell']”应具有所需属性“class”

angular6angular7
196
我运行应用程序时遇到了这个错误。以下是我的应用程序的详细信息。

I am getting this error while running my application. Here are the details of my application. 

Angular CLI: 7.3.3 
Node: 10.15.1 
Angular: 7.2.7 
@angular-devkit/architect -0.13.3 
@angular-devkit/build-angular- 0.800.1 
@angular-devkit/build-optimizer - 0.800.1 
@angular-devkit/build-webpack - 0.800.1 
@angular-devkit/core -7.3.3 
@angular-devkit/schematics -7.3.3 
@angular/cli -7.3.3 
@ngtools/webpack -8.0.1 
@schematics/angular -7.3.3 
@schematics/update 0.13.3 
rxjs 6.3.3 
typescript 3.2.4 
webpack 4.30.0

我已经尝试过清除缓存。

这是我的应用程序的详细信息。 Angular CLI: 7.3.3 Node: 10.15.1 Angular: 7.2.7 @angular-devkit/architect -0.13.3 @angular-devkit/build-angular- 0.800.1 @angular-devkit/build-optimizer - 0.800.1 @angular-devkit/build-webpack - 0.800.1 @angular-devkit/core -7.3.3 @angular-devkit/schematics -7.3.3 @angular/cli -7.3.3 @ngtools/webpack -8.0.1 @schematics/angular -7.3.3 @schematics/update 0.13.3 rxjs 6.3.3 typescript 3.2.4 webpack 4.30.0 - Ekta Gandhi
1
这个问题通常是由于不兼容的软件包引起的。您最近更新了 package.json 吗？ - Deepika
我还没有更新 package.json 文件。 - Ekta Gandhi
7
最终我找到了解决方案。 1）首先使用简单的命令 git checkout package.json 消除 package.json 文件中的所有更改。 2）然后在 @angular-devkit/build-angular-~0.800.1 中进行更改（将 cap 改为 tail）。 3）接着运行命令 rm -rf node_modules/。 4）然后通过命令 npm clean cache -f 清除缓存。 5）最后运行命令 npm install。 这对我有效。 - Ekta Gandhi
2
以上，npm clean cache -f 是错误的，应该是 npm cache clean --force。 - Fabien Haddadi
3
我发现我已经将 nvm 设置为使用错误的 node 版本，需要正确地使用 nvm use 12.14.01（在我的情况下）。请注意不同版本的 node 可能需要不同的设置。 - QuietSeditionist
18个回答
193

在您的package.json中更改devkit构建器。

"@angular-devkit/build-angular": "^0.800.1",

"@angular-devkit/build-angular": "^0.10.0",

它对我有效。

35
已升级到 "@angular-devkit/build-angular": "0.13.4" 并且运行正常。 - Dimuthu
4
完美。在"0.13.4"版本下运行良好，然后运行npm build命令。 - SouravOrii
1
因为我收到了有关 js-yaml < 3.13.1 中检测到的安全漏洞的通知，所以来到这里。在更新后，我收到了这个错误消息。不管怎样，"^0.10.0" 解决了它。 - Alesh Houdek
11
0.13.4 版本对我来说可用，但请确保首先删除 node_modules 文件夹，删除 package-lock.json 文件，然后运行 npm install。这似乎可以解决一切问题。 - Indy-Jones
5
这个解决方案可以运作，但不正确，你应该升级 Angular 和 Angular CLI 版本。请查看下面 @ovangle 的答案。 - Francesco Borzi
显示剩余6条评论
121

以下方法对我有效

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular@0.13.0
7
尽管这个回答很直接，但它缺乏资源或参考文献。盲目地指导人们安装特定的软件包版本可能会破坏他们整个项目。请明确说明并提供一些参考资料。 - Zakky
npm install @angular-devkit/build-angular@0.13.4 已经生效。 - webjockey
86

大家都在关注将@angular-devkit/build-angular降级到@angular 7.x版本以实现兼容性，但他们应该升级@angular/cli到8.x版本。

问题在于系统CLI仍然停留在旧版本，并且不会被ng update自动更新（因为它位于Angular受控项目之外），因此在尝试访问Angular库时它保持在不兼容的版本。

将@angular-devkit/build-angular降级只会造成更多的不兼容性问题。

npm i --global @angular/cli@latest

将解决问题而不会在其他地方造成损坏。

6
这应该是答案。我遇到这个错误是因为我从一个已更新到Angular 8的分支中拉取，但我的电脑上的Angular仍然是Angular 7。 - terahertz
23
在使用npm audit fix修复项目时，如果项目仍在angular@7上，则可能会出现此问题，因此有时降级@angular-devkit/build-angular是正确的解决方法。 - Xesenix
4
有时运行 npm audit fix 会引入破坏性的更改。我们应该运行 npm audit 来了解结果，并使用类似 npm i --save-dev <package@version> 的命令逐个升级软件包。 - Naren
1
@zhuhang 这完全是错误的。您可以期望将全局CLI升级为向后兼容最近几个版本，但不一定可以期望其向前兼容。 - ovangle
1
@ovangle，我没有提到向前兼容。我的意思是人们不应该盲目升级或降级，特别是angular-cli版本。一个人应该确定他们当前的CLI版本，并使用与该CLI相匹配的devkit。如果您想升级devkit包，则完全升级CLI是正确的做法。 - zhuhang.jasper
显示剩余4条评论
82

每个人都在关注将@angular-devkit/build-angular版本降级到X，或将@angular/cli版本升级到Y或最新版本。

然而，请不要盲目地建议将X或Y或最新版本作为答案。（尽管通常情况下，降级devkit应该更好，因为升级CLI是一个破坏性的变化）

始终选择正确的版本取决于您的Angular（angular-cli）版本。

Angular CLI v8.3.19 -> 0.803.19
Angular CLI v8.3.17 -> 0.803.17
Angular CLI v7.3.8 -> 0.13.8
Angular CLI v6-lts -> 0.8.9

其他具体版本请访问：https://github.com/angular/angular-cli/tags。找到您的CLI版本，在某些标签中，它们会提到@angular-devkit/**包的相应版本。

注意：如果您想升级CLI版本，首先应考虑升级到主要版本的最新版本，不要直接跳到下一个主要版本。

3
不确定为什么这个答案会被点踩，它提供了很好的建议。事实上，它解决了我的问题（我将 devkit/build-angular 包升级到了 0.803.x 版本，但是 Angular CLI 仍停留在 7.3.x 版本。由于我并不打算升级 Angular CLI，因此我回到使用 0.13.x 版本的 devkit）。 - Gregg L
2
@GreggL 实际上，我的答案比得到最多赞的那个更好。其他答案只是盲目建议升级/降级。正如我的答案所建议的那样，正确的CLI/devkit版本是相关的，但没有人在意，因为这就是开发社区的现状。 - zhuhang.jasper
你真是个救星，谢谢！但是你有关于cli 7.0.6的任何想法吗？它在这里没有写明。 - Erhan Yaşar
2
为了补充这个很好的答案：在我的项目中，我把@angular/cli包含在开发依赖项中，并确保它与@angular-devkit/build-angular匹配。这样，我就可以维护多个使用不同CLI版本的项目。如果你运行ng s，它将使用你电脑上的CLI，如果你运行npm start（这是在package.json中运行ng serve的脚本），它将实际上使用本地CLI启动这个应用程序来确保使用正确的CLI。希望这有所帮助。 - m-a.D
截至今日（来源NPM），已更新为Angular 9：0.901.1 -> 最新版本，0.1000.0-next.0 -> 下一个版本，0.8.9 -> v6-lts，0.803.26 -> v8-lts，0.13.10 -> v7-lts。 - massic80
31

你的 @angular-devkit 与 @angular/cli 版本不兼容，因此只需像这样安装更旧的版本：

npm install @angular-devkit/build-angular@0.13.8 @angular-devkit/build-ng-packagr@0.13.8
想发布相同的内容。看到0.12.4在流传，但对我来说这不起作用。 - Maartenw
@M.Doe 正确的版本取决于您的1angular-cli`版本。请参见此链接：https://dev59.com/9lMI5IYBdhLWcg3wXqRz#59043569 - zhuhang.jasper
27

尝试升级到Ng8后遇到了依赖问题，同样的问题。

npm uninstall @angular-devkit/build-angular

然后我使用以下命令:

npm install @angular-devkit/build-angular@0.12.4

问题得以解决...

有时候这个解决方案并不可行，因为它的版本可能不符合某人的要求。删除 package-lock.json 文件。npm i @angular-devkit/build-angular - Tejashree
16

我曾经遇到同样的问题，但多亏了Ekta Gandhi的评论，我解决了这个问题:

 

最终我找到了解决方案。

     

1) 首先通过简单的命令git checkout package.json来消除package.json文件中的所有更改。

     

2) 然后在@ angular-devkit / build-angular-〜0.800.1（添加tail而不是cap）中更改package.json。

     

3) 然后运行命令rm -rf node_modules /。

     

4) 然后通过npm clean cache -f命令清理缓存。

     

5) 最后运行命令npm install。 这对我有用。

....再加上Dimuthu提出的修改

 

将其修改为@angular-devkit/build-angular": "0.13.4"，然后它就起作用了。

需要注意的是，@angular-devkit/build-angular 的版本 "0.13.4" 在使用惰性加载组件时存在问题。为避免此问题，用户需要更新他们的 @angular-devkit/build-angular 包...这里有一种权衡。 - Ares
9
这种情况在我安装 Angular 8 时发生了，有些不兼容的问题我无法解决。我不得不降级，因为我在不同版本之间反复尝试，直到找到一个可以工作的版本。
首先，TypeScript 版本过旧，安装默认添加了对 3.1.6 版的引用，但需要 3.4 或更高版本。
npm install typescript@">=3.4 <3.5"
其次，使用 devkit 0.800.1 或 0.800.1 总是导致不兼容性。我尝试了很多组合，但我不确定是否完全兼容，特别是因为我正在使用较旧的 bootstrap，而我还不能升级。
最后，我尝试降级（转到 package.json 并找到 devDependencies），直到其中一个起作用。
@angular-devkit/build-angular": "0.13.4"
我确定你的问题是依赖项版本不匹配，但我无法告诉您哪个版本。尝试一下降级吧。
虽然它能工作，但我建议使用@angular-devkit/build-angular": "0.13.8"，因为它似乎是最新的可用版本。 - Maartenw
非常感谢。看起来由于Bootstrap版本或依赖关系，我无法使用高于0.13.4的版本，但这对许多人来说是可行的。 - Maximiliano Rios
使用0.13.8版本（实际上低于0.800.*），我得到以下错误：发生未处理的异常：无法找到@angular-devkit/build-angular:browser构建器的实现。请参见“/tmp/ng-5iKcHN/angular-errors.log”获取更多详细信息。 使用最新版本，我从标题中得到错误。 现在该怎么办？ - Dominik Szymański
7

我也遇到了这个问题，当我进行更多更新时，出现了更多的问题。

最终对我有用的方法是删除 Angular CLI，并按照以下步骤重新安装：

npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli

这个对我很有帮助

来源：如何卸载 angular/cli
2
我也遇到了这个问题，花费了几个小时才解决它。我尝试了上述所有选项，但都没有解决我的问题。这个问题是由于angular/cli和angular-devkit版本不匹配引起的，所以我做了以下操作：

  1. 手动更改文件版本：

    @angular-devkit/build-angular": "^0.13.9",

    @angular/cli": "~7.0.3", //这是针对Angular7的，对于Angular8：0.803.23

  2. 删除package-lock.json文件

  3. 执行：npm install

这解决了我的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接