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

11

58

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


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

Thacker answered 17/3, 2020 at 16:13 Comment(1)
i have the same problem, do you have any idea what went wrong?Berserk
T
10

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.

Thacker answered 16/4, 2020 at 9:4 Comment(0)
P
118

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

Prismatic answered 9/7, 2021 at 14:32 Comment(3)
Also worked for me, but be careful, you'll have to close every opened VSCode instance to make it work.Emblem
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!Mighell
Fixed the error in VSCode for me tooCommentator
B
13

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,
      ],
    };
  }
}
Berserk answered 16/4, 2020 at 8:32 Comment(2)
Thank you! One of my modules didn't do it right. Docs: angular.io/guide/migration-module-with-providersSaltillo
restarting the vs code then it will work fineSympetalous
T
10

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.

Thacker answered 16/4, 2020 at 9:4 Comment(0)
J
7

In case if you are using vscode:

Everything I did to get it fixed is to reload vscode.

  • Contrl + Shift + P (make the command palette appear)
  • Type "Reload Window" (in the command palette)
  • Hit Enter
  • I see the problem fixed when vscode is relaoded.
Janinajanine answered 13/9, 2023 at 2:30 Comment(4)
For me this is resolved my problems! Thanks!Supplement
This one worked for my after upgrading from angular 11 to 18. I'd like to know why it worked though....Westcott
@RamiroG.M. After you restart vscode, the typescript server inside of vscode will also get restarted, this can be one of the many reasons. The typescript server reads the tsconfig.json file (typescript configuration file) and it will enable type checking inside of vsode. You can also manually restart the ts server (use ctrl+shift+P to show the command palette and then type "restart TS server", it may take some time depending on the performance of your machine)Janinajanine
ty for the answerWestcott
R
2

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

Registration answered 7/7, 2020 at 13:58 Comment(0)
C
1

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",
Chrysanthemum answered 19/5, 2020 at 12:9 Comment(0)
F
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

Fluctuant answered 28/6, 2021 at 5:3 Comment(0)
T
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

Twelvemonth answered 11/9, 2022 at 8:22 Comment(0)
K
0

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

Kimber answered 15/12, 2022 at 14:33 Comment(0)
B
0

Here are some steps which can solve your problem:-

  1. Optimize your imports by adding the following-
import moment from 'moment';
import 'moment/locale/en';
  1. If problem arises, then you can add the following in app.module.ts file-

A. Check NgModule Imports-

imports: [ CommonModule, FormsModule, ReactiveFormsModule, // Other modules... ]

B. Check Module References-

import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
Brahmin answered 30/9, 2023 at 6:34 Comment(1)
did you use any generative AI at all in the writing of this answer?Obstinacy
M
0

I got the same issue in my case one of my NPM package is using peer dependencies which is not updated so it checks for the reference module which is not in the older version once update the peer dependency issue sorted.

steps to fix the issue.

  1. Look for the error throwing NPM package.
  2. Check for the reference module (In this case TranslateModule).
  3. Check reference module related peer NPM package.
  4. Updated peer module to latest.
Mccartan answered 6/11, 2023 at 11:54 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.