angular: Angular 5 Error: Unexpected value 't' imported by the module 't'. Please add a @NgModule annotation

Just in case anyone else is having this same issue I managed to work around this issue with the help of this Angular bug fix:

https://github.com/angular/angular-cli/issues/8594

Also see:

https://github.com/angular/angular-cli/pull/8346/files/f0f81be1acb871b7eb623b45354b09728839c3ee

The fix is to not use the buildOptimizer for JIT in production builds.

For my project specifically because it is based on the angular starter repo here: https://github.com/gdi2290/angular-starter (@gdi2290 please note) the fix was changing config\build-utils.js @ line 78

From:

const buildOptimizer = prod;

To:

const buildOptimizer = prod && metadata.AOT;

And just to be tidy I removed the now redundant AOT check @ line 109

From:

use: metadata.AOT && buildOptimizer ? [ buildOptimizerLoader, '@ngtools/webpack' ] : [ '@ngtools/webpack' ]

To:

use: buildOptimizer ? [ buildOptimizerLoader, '@ngtools/webpack' ] : [ '@ngtools/webpack' ]

Anyway hope this helps because I have wasted a lot of time on this.

I have the same issue. Can anyone post a fix pls?

This was my solution.

ng build --prod --build-optimizer=false

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

---

From: sohanyugasa notifications@github.com Sent: Saturday, April 28, 2018 3:30:59 AM To: angular/angular Cc: Miguel Peguero; Comment Subject: Re: [angular/angular] Angular 5 Error: Unexpected value ‘t’ imported by the module ‘t’. Please add a @NgModule annotation (#20815)

Hi folks… Same issue I am facing. Anyone let me know what is the best solution for this one. Uncaught Error: Unexpected value ‘HttpClient’ imported by the module ‘AppModule’. Please add a @NgModulehttps://github.com/NgModule annotation.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/angular/angular/issues/20815#issuecomment-385148942, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABvDp9VumXxuUQo8OCiHqUFnVmsHmE2Hks5ttBqzgaJpZM4Q3gTU.

@graemehyde works for me. thank you

I am having the same issue. Disabling the mangle option in my production webpack configuration for the UglifyJs plugin reveals this error:

Uncaught Error: Unexpected value 'BrowserModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Can someone from the Angular CLI team please help. This is very frustrating!! I know that this particular issue did not occur for me with previous app projects using Angular CLI version 4.4.3.

@pkozlowski-opensource To reproduce clone the angular-starter repo here: https://github.com/gdi2290/angular-starter

Install npm modules then run the production webpack configuration. At the moment I am achieving this with:

npm run build:prod

I have setup a local web site through IIS pointing to the dist subfolder. This is the console error I see when I browse that site (I have also attached a screen grab):

Uncaught Error: Unexpected value 't' imported by the module 'function (){}'. Please add a @NgModule annotation.
    at U (compiler.js:485)
    at compiler.js:15225
    at Array.forEach (<anonymous>)
    at t.getNgModuleMetadata (compiler.js:15200)
    at t._loadModules (compiler.js:34255)
    at t._compileModuleAndComponents (compiler.js:34216)
    at t.compileModuleAsync (compiler.js:34110)
    at t.compileModuleAsync (platform-browser-dynamic.js:230)
    at t.bootstrapModule (core.js:5568)
    at il (main.browser.ts:18)

You can achieve the same with:

npm run server:prod

FYI I have tried updating all my Angular packages to the latest version (5.2.2) but this error still persists.