如何修复：错误：同步和异步加载 Angular 结构

Question

我刚刚将我的 Angular 6 项目升级到了 Angular 11。这个项目已经实现了 SSR，这是问题所在。

当我运行时，ng run myapp:server我收到此错误：

? Server application bundle generation complete.

Initial Chunk Files | Names         |    Size
main.js             | main          | 4.06 kB

                    | Initial Total | 4.06 kB

Build at: 2021-04-22T14:02:16.388Z - Hash: 2a6aaefe9d15b8a7dedc - Time: 4907ms

Error: Angular structure loaded both synchronously and asynchronously

在我的angular.json我有这个代码：

? Server application bundle generation complete.

Initial Chunk Files | Names         |    Size
main.js             | main          | 4.06 kB

                    | Initial Total | 4.06 kB

Build at: 2021-04-22T14:02:16.388Z - Hash: 2a6aaefe9d15b8a7dedc - Time: 4907ms

Error: Angular structure loaded both synchronously and asynchronously

知道我应该在哪里检查，更新一些东西吗？

Answer 1

启用 Ivy 为我解决了这个问题，将此 Angular 编译器选项添加到您的 tsconfig.app.json 中：

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true,
    "fullTemplateTypeCheck": true, 
    "enableIvy": true
  },

Answer 2

我有两次同样的错误，

1：库错误导入

首先，这是因为我正在创建一个库，而该库的一个组件没有从具有相对路径的同一个库中导入其他模块。

import { aModule } from '@my-lib/a.module.ts' // wrong

import { aModule } from '../../a.module.ts' // correct

2：缺少依赖

我的一个库确实强制导入了一些依赖项。其中之一是@videogular/ngx-videogular截至今天只接受 angular v11，但我使用的是 angular v12。

我知道它确实适用于 angular v12，为了解决这个问题，我不得不使用以下命令强制安装 npm i @videogular/ngx-videogular --force

3 : enableIvy: true

如果您正在使用enableIvy: true在它们中使用的依赖项，tsconfig.lib.prod.json那么您还必须在您自己的项目中启用 ivy。不这样做会产生这个错误。

此外，如果您确实添加了一个依赖项，而其他依赖项没有，您也会遇到相同的错误。因此，如果您在更新某些外部库后确实遇到了此错误，请控制它们是否启用了 ivy 并转到未启用的旧版本。

Answer 3

我在 SSR 中也遇到了同样的问题。我在 ngserve 中遇到了同样的错误

为了解决这个问题，我只需将 @angular/cdk 添加到开发依赖项中，问题就得到了解决。

npm i @angular/cdk