Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
unsafecode opened this issue Aug 25, 2017 · 11 comments · May be fixed by #18

Comments

@unsafecode
Copy link

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
Copy link

leomendoza123 commented Aug 28, 2017

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
Copy link
Owner

@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
Copy link
Author

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

@leomendoza123
Copy link

@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
Copy link
Contributor

@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
Copy link

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
Copy link

@trekhleb any upcoming fix of this error ?

@trekhleb
Copy link
Owner

trekhleb commented Oct 4, 2017

@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
Copy link

@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
Copy link

lpalli commented Oct 6, 2017

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
Copy link
Owner

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

AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
AndreySyagrovskiy added a commit to AndreySyagrovskiy/angular-library-seed that referenced this issue Dec 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
7 participants