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

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:

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.

i have the same problem, do you have any idea what went wrong? — Viszman, Apr 16 '20 at 05:19

score 92 · Answer 1 · answered Jul 09 '21 at 14:32

92

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

answered Jul 09 '21 at 14:32

Muhammad Umar

1,291
7
13

4

Also worked for me, but be careful, you'll have to close **every opened VSCode instance** to make it work. – Raphaël Balet Sep 24 '21 at 10:08
1

I often forget this fact and as I had just upgrade several components and couldn't remember why this was throwing this error even though the build was working. Thank you! – Tim Nov 08 '22 at 22:59
Fixed the error in VSCode for me too – venimus Dec 09 '22 at 13:25

score 13 · Answer 2 · answered Apr 16 '20 at 08:32

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

Thank you! One of my modules didn't do it right. Docs: https://angular.io/guide/migration-module-with-providers — Przemek Pobuta, Jun 14 '20 at 19:44

Francesco · Accepted Answer · 2021-08-23T08:11:30.940

9

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.

edited Aug 23 '21 at 08:11

answered Apr 16 '20 at 09:04

Francesco

9,947
7
67
110

score 2 · Answer 4 · answered Jul 07 '20 at 13:58

2

#2 happened to me after I accidentally used npm link in a project's folder instead of it's dist folder.

answered Jul 07 '20 at 13:58

Jony Adamit

3,178
35
44

score 1 · Answer 5 · answered May 19 '20 at 12:09

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

score 1 · Answer 6 · edited Jun 28 '21 at 09:15

1

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

edited Jun 28 '21 at 09:15

Slava Rozhnev

9,510
6
23
39

answered Jun 28 '21 at 05:03

Mohammed

838
6
14

score 1 · Answer 7 · answered Sep 11 '22 at 08:22

1

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

answered Sep 11 '22 at 08:22

Mehrshad Farzaneh

465
5
20

score 0 · Answer 8 · answered Dec 15 '22 at 14:33

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

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

8 Answers8

Linked