How to fix: Error: Angular structure loaded both synchronously and asynchronously

Question

I just upgraded my Angular 6 project to Angular 11. This project has SSR implemented and here is the issue.

When I run ng run myapp:server I get this error:

✔ 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

In my angular.json I have this code:

{
  "$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"
          }
        },
  // ...
}

Any idea where I should check, update something?

Answer 1

I had three time the same error,

1 : library wrong import

First, it was because I was creating a library, and one component of this library wasn't importing other module from the same library with the relative path.

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

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

2 : missing dependencies

One of my library did force to import some dependencies. one of them was @videogular/ngx-videogular which as of today only accept till the angular v11 but I'm using the angular v12.

I know it do works with angular v12 and to fix this, I had to force the install with the following npm i @videogular/ngx-videogular --force

3 : enableIvy: true

If you are using dependencies that do use enableIvy: true in their tsconfig.lib.prod.json then you also have to enable ivy on your own project. not doing so will create this error.

Also, if you do add a dependency that does, and other that don't, you'll also have the same error. So if you did had this error after having updated some external libraries, do control if they do or not had enabled ivy and go to a former version that didn't.

Answer 2

Enabling Ivy solves the problem for me, add this angular Compiler Options to your tsconfig.app.json :

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

Answer 3

I faced the same error in Angular project (not library) and issue was that I deleted some shared component from pproject but I forgot to remove it from appropriate module.

Answer 4

I was running into this issue with a library being updated to Angular 12. I fixed the issue by adding "enableIvy": true to my tsconfig.json

"angularCompilerOptions": {
    "enableIvy": true,
}

AND I had to change my ngPackagr script to include the -c tsconfig.json argument:

ng-packagr -p lib/.../package.json -c tsconfig.json