Compiling angular project with "An unhandled exception occurred: NGCC failed"

Question

I tried to compile my project and I'm getting an error:

Error: Error on worker #3: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions, 
        // tslint:disable-next-line:max-line-length
        breakpoints = []) {
            return {
                ngModule: FlexLayoutModule,
                providers: configOptions.serverLoaded ?
                    [
                        { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                        { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                        { provide: SERVER_TOKEN, useValue: true },
                    ] : [
                    { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                    { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                ]
            };
        }.

I used ng add @angular/materialand npm install @angular/flex-layout@latest --save and I got this error.

Till now I tried:

• reinstall flexLayot many times.
• remove node_modules and install it once again.

My dependencies looks like:

"dependencies": {
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.11",
    "@angular/compiler": "~9.1.11",
    "@angular/core": "~9.1.11",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.11",
    "@angular/platform-browser-dynamic": "~9.1.11",
    "@angular/router": "~9.1.11",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Does someone know that could be wrong?

My app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

but I added Flex to shared module so I will paste also shared.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FlexLayoutModule
  ],
  exports: [
    FlexLayoutModule
  ]
})
export class SharedModule { }

Answer 1

Switch back to FlexLayout 9.0.0-beta.31. According to its changelog, the version you're using "(...) adds support for Angular v10 and Angular CDK v10."

@angular's ModuleWithProviders isn't a generics in @angular 9.x.x. but it is in @angular 10 rc.x. FlexLayout x.x.x-beta.32 started using the generic version (ModuleWithProviders<T>), so it doesn't work anymore with @angular versions < 10. You'll need to switch back to FlexLayout 9.0.0-beta.31.

In your package.json, replace the "@angular/flex-layout": "^10.0.0-beta.32" for "@angular/flex-layout": "~9.0.0-beta.31" and run npm install again (or simply npm install @angular/[email protected]")

Answer 2

Reinstall the flex-layout by the command

npm i @angular/[email protected]