Angular 9：NgModule.imports 中位置 X 的值不是引用

Question

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:

1. 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';

2. 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.

Answer 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,
      ],
    };
  }
}

Answer 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 on my project side.

Answer 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",

Answer 4

you might have used npm i and the editor might fail to generate the build correctly. Try restarting your editor. Restarting worked for me. I was using VSCode

Answer 5

#2 在我不小心在项目文件夹而不是 dist 文件夹中使用npm link后发生在我身上。

Answer 6

I have this error because i deleted everything from one of my components ts file inorder to copy paste the code my instructor

then i deleted that component declaration from my app.module.ts file then it worked

Answer 7

I got the same error, but the solution that worked for me may be different from yours

I had different modules apart from app.module for example hom-page.mdule

I forgot to add Home-page.component to Home-page.module in the declarations section

Answer 8

Had the same issue. I had just switched to a git branch and I ran "npm install". The error was everywhere. All I did was restart my server.

If issues persist for anyone reading this, try deleting your node_modules folder and running npm install again.

Regards