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?

Raphaël Balet · Answer 1 · 2021-11-25T10:40:47.573

10

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.

edited Nov 25 '21 at 10:40

answered May 11 '21 at 07:49

Raphaël Balet

6,334
6
41
78

unfortunately my project isn't a library – netdjw May 12 '21 at 18:53
@netdjw I face multiple time the same problem, maybe one of those may help you – Raphaël Balet Jul 07 '21 at 08:42
1 was my problem. But this applies to all modules, even ones you've created inside the library. – caden311 Jul 08 '21 at 20:50
For me it was angular-split library v5.0.0. I downgraded to v4.0.0 and it works now. – Sergiu Aug 09 '21 at 13:37
You should never apply 3rd solution in an Angular 11 (library) project, as libraries published MUST be compiled using Angular ViewEngine, not Ivy. It is in version 12 that they will remove ViewEngine in favor of Ivy. https://sdtimes.com/softwaredev/angular-12-will-deprecate-view-engine-and-replace-it-with-ivy/ – BalB Aug 24 '21 at 07:18
@netdjw Did you find the solution to your problem ? – Raphaël Balet Oct 14 '21 at 07:42
no, and we droped SSR because of this issue – netdjw Oct 14 '21 at 07:49
@netdjw What a shame.. I would bet though on `@nguniversal/express-engine` that do not use ivy (solution 3), which mean you shall not use enabled ivy component while using SSR. I head that Angular v13 will move forward to the ivy direction, and a lot of library are waiting this version to push everything as `enableIvy: true`. I would try it again in a few month. – Raphaël Balet Oct 14 '21 at 08:56
@RaphaëlBalet Yes, it's a shame :D in our case dropping SSR was a painless decision. But thanks the infos. – netdjw Oct 14 '21 at 09:03
Great answer! In my case, it was an external library, angular-split. – Sergiu Oct 17 '21 at 14:44

score 7 · Answer 2 · answered May 09 '21 at 01:41

7

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
  },

answered May 09 '21 at 01:41

Lhoussin Ghanem

179
1
8

1

@Michael.F please avoid these kind of comments, as you should find a way to fix the problem that didn't depend on wether you build before without Ivy. CI would directly be broken by your solution – BalB Aug 24 '21 at 07:42

score 2 · Answer 3 · edited Jun 21 '21 at 15:26

2

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.

edited Jun 21 '21 at 15:26

Dharman

30,962
25
85
135

answered Jun 21 '21 at 15:21

Tomáš Košik

21
1

The cause for me was this one. I created a new component, which was added automatically to module. I deleted the component, but forgot to remove it from the module definition. How I wish Angular should have given a more appropriate message. – Mubin Jan 02 '23 at 10:07

score 2 · Answer 4 · answered Nov 29 '21 at 17:18

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

score 0 · Answer 5 · answered May 31 '21 at 05:24

0

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.

answered May 31 '21 at 05:24

Андрей Керничный

161
1
4

What does *"I deleted next angularCompileOptions"* mean ? – Zze Jan 16 '22 at 19:51

Adrianna · Answer 6 · 2021-07-05T13:54:36.837

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.

score 0 · Answer 7 · answered Aug 16 '21 at 13:37

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 {}

Grzegorz Jaworski · Answer 8 · 2021-08-27T12:47:00.927

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);
}

score 0 · Answer 9 · edited Mar 23 '22 at 15:36

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 · 2022-09-02T14:53:54.413

0

Maybe it will be useful for someone. I use NgRx in my application and faced with same error. I spent 1 day to find that I incorrectly provided reducers for my feature. I provided refreshReducer as ActionReducer instead function that return state

StoreModule.forFeature(REFRESH_FEATURE_KEY, refreshReducer)

edited Sep 02 '22 at 14:53

answered Sep 02 '22 at 14:51

Александр Купченя

1
1

score -1 · Answer 11 · answered Apr 25 '21 at 09:14

-1

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

answered Apr 25 '21 at 09:14

Santosh Mahto

9
1
5

you can check this [repo](https://github.com/ooug/web) – Santosh Mahto Apr 26 '21 at 15:28

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

11 Answers11

1 : library wrong import

2 : missing dependencies

3 : `enableIvy: true`

Linked

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

11 Answers11

1 : library wrong import

2 : missing dependencies

3 : enableIvy: true

Linked

3 : `enableIvy: true`