Unexpected value xxx imported by the module xxx Please add a NgModule annotation

(230 Views)


Many programmers have come up with this error while converting an existing angular app from 5.2.5 to 6.0.8. Here, I am explaining a solution you can try if you are facing the same issue.

I have an Angular application which imports a module from another repository. So, code of my app.module.ts:

@NgModule({ imports: [ ... MyCommonModule, ], declarations: [...], providers: [...], bootstrap: [AppComponent] }) export class AppModule { }
and code of my commonmodule.d.ts:
@NgModule({ imports: [...], declarations: [...], providers: [...], exports: [...] }) export class MyCommonModule {}

Now, you should specify dependencies on MyCommonModule. If you are having something like "@angular/core": "5.2.5" in your library and "@angular/core": "6.0.8" in your application, it will throw this error. NPM creates two version of angular in your node_modules and if NgModules is defined in 2 files they are not same.

You should check subdirectory of your library in node_modules if there is a directory named node_modules and if there is @angular/core.You have to set version in your "library" to "@angular/core": ">=5.2.5" or to "@angular/core": "^6.0.8". Any component written for 5.x should work for 6.x.It is important that you do not generate the factories in your library code. Your library code should only generate the metadata.json files.Each application should then import NgModules from the shared library code, and each application is compiled as a unit. This works because the metadata.json is backward- compatible, and NgFactory code can be generated for each version when the app is compiled.

Solution Worked 0 UpvotesUpvote

        

Solution Didn't Worked 0 DownvotesDownvote



Comments



Search