Illegal state: Could not load the summary for directive NgClass

Question

When running ngc on my module, it used to work fine using angular 4.4.3 (and compiler 4.4.3). Now I upgraded to 5.0.0 (both angular and the compiler) and I have the following error:

Error: Illegal state: Could not load the summary for directive NgClass in [...]/node_modules/@angular/common/common.d.ts.

My tsconfig.json file looks like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "[...]/",
    "paths": {...},
    "rootDir": "[...]/plugins/",
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "sourceMap": true,
    "inlineSources": true,
    "noImplicitAny": true
  },
  "files": [
    "[...]/plugins/users/index.ts"
  ]
}

I don't know what could be causing the issue from the file that I am trying to compile. I've seen similar errors here and there but not related to the common module directly. It's difficult to post a sample to reproduce the error as it doesn't happen on other modules

Edit 1:

My setup is as following: one module MyModuleA that builds successfully, MyModuleB that uses MyModuleA that does not build.

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    TranslateModule.forChild()
  ]
})
export class MyModuleA {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyModuleA,
      providers: [
        ModuleAService
      ]
    };
  }
}

@NgModule({
  imports: [
    HttpClientModule,
    MyModuleA
  ]
})
export class MyModuleB {
  /**
   * Instantiate module (for main module only).
   */
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyModuleB,
      providers: [
        ModuleBService
      ]
    }
  }
}

If I include CommonModule in MyModuleB, I have another error:

Error: Illegal state: Could not load the summary for directive ActionSheetCmp in [...]/node_modules/ionic-angular/components/action-sheet/action-sheet-component.d.ts

Now I can include IonicModule in MyModuleB to have the next illegal state error (this time linked to the translate module), but I am not using those modules at all in MyModuleB so why do I need to import them all?

Answer 1

So I'm not sure what is the reason behind this, it's quite annoying, but it appears every imported module needs to be either imported by a sub-module or exported from the parent module. So in my example the solution would be to do:

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    TranslateModule.forChild()
  ],
  exports: [
    CommonModule,
    IonicModule,
    TranslateModule
  ]
})
export class MyModuleA {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyModuleA,
      providers: [
        ModuleAService
      ]
    };
  }
}

@NgModule({
  imports: [
    HttpClientModule,
    MyModuleA
  ]
})
export class MyModuleB {
  /**
   * Instantiate module (for main module only).
   */
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyModuleB,
      providers: [
        ModuleBService
      ]
    }
  }
}

If anyone knows why, feel free to enlighten me :)