Angular 9: Value at position X in the NgModule.imports is not a reference

问题

I upgraded an Angular App from v8 to v9. The project imports a custom UI library using Angular 8 and moment.js.

When I build it:

It generates a warning:

WARNING in Entry point '@myLib/catalogue' contains deep imports into
 '/Users/xyz/Projects/forms-frontend/node_modules/moment/locale/de'.
This is probably not a problem, but may cause the compilation of entry points to be out of order.

In the @myLib/catalogue.js file of the library (inside node_modules folder), the moment.js DE locale is imported as following:

import 'moment/locale/de';

Compilation errors are also triggered:

ERROR in Failed to compile entry-point @myLib/catalogue (es2015 as esm2015) due to compilation errors:
node_modules/@myLib/catalogue/fesm2015/catalogue.js:213:26 - error NG1010: Value at position 2 in the NgModule.imports of FormInputModule is not a reference: [object Object]

213                 imports: [
                             ~
214                     CommonModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
219                     TranslateModule
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
220                 ],
    ~~~~~~~~~~~~~~~~~

The text of the warning seems explaining exactly the compilation error, where the position (2 in this case) is out of range of the imports array.

I have seen different articles/github issues about deep-links, but no working solution.

回答1:

you need to change your custom build of modules, so you need to make analog changes to the ones below, in my case i needed to change:

export class ThemeModule {
  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: 'default',
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
      ],
    };
  }
}

to:

export class ThemeModule {
  static forRoot(): ModuleWithProviders<ThemeModule> {
    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
          {
            name: 'default',
          },
          [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
      ],
    };
  }
}

回答2:

In my case the issue was related to an imported library, that was not Angular v9 compatible (among other things it was not using deep links to Angular Material and moment.js).

I was lucky as the library is an intern one and I could fix these points and republish it. After that it built without any problems or changes in my project.

回答3:

In my case, I think there were some incompatibilities between some of the angular libraries that were imported. I think I previously manually bumped @angular/material to 9.2.3 without bumping the other angular libraries.

When I created a new repository using: ng new test-ng9 and then added angular material ng add @angular/material, there were no compilation issues.

So I took the dependencies that the angular cli included in the temp repo and replaced the ones in my existing repository. Then it worked fine.

Before:

    "@angular/animations": "~9.1.6",
    "@angular/cdk": "9.1.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",  
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "9.2.3",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",

After:

    "@angular/animations": "~9.1.6",
    "@angular/cdk": "9.1.1",    
    "@angular/common": "~9.1.6",
    "@angular/compiler": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",

来源：https://stackoverflow.com/questions/60726180/angular-9-value-at-position-x-in-the-ngmodule-imports-is-not-a-reference

标签

angular

deeplink

angular-cli-v9