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

Answer 5

I has the same problem in my project after update Angular 9.1 to 11, when compiling a library. In my library folder in tsconfig.json file I deleted next angularCompileOptions

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

and it started to work.

I don't know can I help this information somebody, but information by this issue very small. Therefore, I will publish it.

Answer 6

Correct me if I'm wrong but the answer here https://stackoverflow.com/a/67768272/16383608 I would say it is treated like enabling Ivy because of "enableIvy":"false" instead of "enableIvy":false. If you're facing this issue I would focus on your dependencies, dev dependencies and import of libraries. In my case, every time, it was lack of some dependencies because of wrong imports or incomplete package.json.

Answer 7

We have angularCompilerOptions.enableIvy = false.

Cause: export keyword is required for factory functions to fix this error.

Example:

import { NgModule } from '@angular/core';
import { JDbApiClient, LinksJDbContext } from '../shared';
import { JDbApiClientModule } from './jdb.api-client.module';


/* Error is HERE... -> */ export /*<- ...if keyword is missing */ function newLinksJDbContext(api: JDbApiClient) {
  return new LinksJDbContext(api);
}

@NgModule({
  imports: [JDbApiClientModule], 
  providers: [
    {
      provide: LinksJDbContext,
      useFactory: newLinksJDbContext,
      deps: [JDbApiClient],
    },
  ],  
})
export class LinksJDbContextModule {}

Answer 8

If someone encounters this error while using @ngrx/store, check if reducer is being used correctly. As said in docs constant made with createReducer has to be wrapped in exported function and used in StoreModule. For example:

const ngrxReducer = createReducer(
    INITIAL_STATE,
    on(someAction, (state, { someProperty }) => ({
        someProperty
    })
);

export function reducer(state: State | undefined, action: Action) {
    return ngrxReducer(state, action);
}

Answer 9

I followed external library docs and one of my imported Module used option object which property name was created with array [] syntax:

@NgModule({
  ...
  imports: [MyLibrary.forFeature(MODALS)]
  ...
}) 


export enum MODAL_NAMES {
 ADVANCED_MODAL = 'ADVANCED_MODAL'
}

export const MODALS = {
 //error was here
 [MODAL_NAMES.ADVANCED_MODAL]: {
  ...
 }
};

So I changed it to string and it's did the trick

export const MODALS = {
     //no error: Angular structure loaded both synchronously and asynchronously
     'ADVANCED_MODAL': {
      ...
     }
    };

Answer 10

I faced same issue nut not in SSR. I was getting same error with ng serve

to fixed this i just add @angular/cdk into dev dependency and issue got resolved.

npm i @angular/cdk