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 中，我有以下代码：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        },
  // ...
}

知道我应该在哪里检查、更新内容吗？

Answer 1

启用 Ivy 为我解决了问题，将此角度编译器选项添加到您的 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

强制安装

Answer 3

在将 Angular 9.1 更新到 11 后，我的项目在编译库时遇到了同样的问题。在 tsconfig.json 文件的库文件夹中，我删除了下一个 angularCompileOptions

"angularCompilerOptions": {
  "fullTemplateTypeCheck": true,
  "strictInjectionParameters": true,
  "enableIvy": "false"
}

它开始工作了。

我不知道我是否可以帮助某人提供此信息，但是此问题的信息非常少。因此，我将其发布。

Answer 4

我在 Angular 项目（不是库）中遇到了同样的错误，问题是我从 pproject 中删除了一些共享组件，但我忘记从适当的模块中删除它。

Answer 5

如果我错了，请纠正我，但这里的答案 https://stackoverflow.com/a/67768272/16383608 我会说它被视为启用常春藤，因为 "enableIvy":"false" 而不是 "enableIvy":false。如果您遇到此问题，我将重点关注您的依赖项、开发依赖项和库的导入。就我而言，每次都因为导入错误或 package.json 不完整而缺少一些依赖项。

Answer 6

我在 SSR 中没有遇到同样的问题。我在使用 ng serve 时遇到了同样的错误

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

npm i @angular/cdk

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

6 个答案:

1 : 库错误导入

2 : 缺少依赖