Unexpected value 'TickTockModule' imported by the module 'Feature1RoutingModule'. Please add a @NgModule annotation

[unsafecode]

Description

I'm facing this error when trying to import TickTockModule in a Angular CLI project, via a lazy-loaded module:

Unexpected value 'TickTockModule' imported by the module 'Feature1RoutingModule'. Please add a @NgModule annotation (happens when I navigate the lazy route)

Feature1RoutingModule was created via CLI and is defined as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TickTockComponent, TickTockModule } from "@unsafecode/feature1";

const routes: Routes = [
  {
    path: '',
    component: TickTockComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes), TickTockModule],
  exports: [RouterModule]
})
export class Feature1RoutingModule { }

Where @unsafecode/feature1 is the library package, cloned from this repo and linked with npm link (no changes).

I also checked the Angular CLI project tsconfig.json has the paths: {...} options configured as described.

Configuration

[email protected] [email protected] @angular/[email protected]

[leomendoza123]

I temporally fixed this deleting the node-modules/angular-library-seed/node-modules

Of course, you need to do this every time you build your library.

So if you are in your angular-cli generated project you can run:

rm -r node_modules/angular-library-seed/node_modules/

And this will allow you to test your library with your angular-cli generated project

But if you do this, and you want to re-build your library you will have to install and build again with

yarn install
yarn build

[trekhleb]

@leomendoza123 have you tried to specify path to @angular in Angular CLI's tsconfig.json as this comment suggests? Hope it might help to avoid deleting node_modules/angular-library-seed/node_modules/ folder after each library build.

[unsafecode]

@trekhleb I did that (as pointed out in the issue description), and the error generates afterwards.

[leomendoza123]

@trekhleb I did and that allows me to compile, but as @unsafecode describes, I am now getting this error when I load the angular-cli app on the browser:

Unexpected value .... Please add a @NgModule annotation

[bobrosoft]

@leomendoza123 does it happen only when lazy-loading used? I'm using

   "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }

and all looks fine, but not yet using my lib in lazy-loaded module.

[dannyTorres]

There's any update about this error?

I added the "path" described in the previous comment, but I still having the same error about the '@NgModule annotation'

[qasimraza1979]

@trekhleb any upcoming fix of this error ?

[trekhleb]

@unsafecode , @qasimraza1979 , @dannyTorres This is annoying issue that happens when using yarn link and Angular CLI project, agree. Unfortunately I don't have solution for that so far. I would be really appreciate for any help in this matter.

Currently I may speak only about workarounds:

• First option is to run ng serve --aot instead of just ng serve in your Angular CLI project. For some unknown to me reason this helped me to get rid of "Please add a NgModule annotation" error. By the way I'm using yarn link instead of npm link and I've specified "paths" parameter in Angular CLI tsconfig.json as it was mentioned in readme for this project.
• Another option is to delete node_modules folder from linked library folder. This also helped me to avoid the error but of course it made it impossible to use yarn build:watch inside the library folder.

Other than that I may suggest you to use custom Angular starter (like the one in demo folder of the project) instead of Angular CLI but this of course may not be the case because of Angular CLI popularity.

But again, I understand that all of the above are just workarounds and not solutions. Once I come up with one I'll post it here.

[dannyTorres]

@trekhleb

Thanks for the workaround. In my case adding the "node modules path" and doing the first step was enough to make the lib works.

[lpalli]

On Angular-CLI I "solved" this problem using ng serve --preserve-symlinks to run the application in development mode and ng build --prod --preserve-symlinks to build it in production mode.

Not sure if it's the good solution, what do you think?

[trekhleb]

@lpalli thank you for your suggestion but unfortunately running ng serve --preserve-symlinks didn't fix Please add a @NgModule annotation error for me.

But running ng serve --aot (as it was described in my previous comment) helps to avoid the error.