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

MrHOY · 2017-12-06T07:53:20Z

When I run 'ng serve', my app work well.
But when I run 'ng build' and test by run 'http-server dist/ -o' my app not running with error:

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Environment


Angular version: 5.0.5


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.1  
- Platform: Linux 

Others: HTTP server

The text was updated successfully, but these errors were encountered:

pkozlowski-opensource · 2017-12-06T08:59:26Z

Hi! I'm afraid that we will need some sort of a minimal reproduce scenario to move forward on this one.

mauriziovitale · 2017-12-06T15:41:15Z

Hi @MrHOY
I'm having the same issue when I run the build with
ng build --prod --aot=false --build-optimizer=true
I guess is something related to the aot and build-optimizer options on angular cli

MrHOY · 2017-12-06T15:50:01Z

Opps... Hope angular cli team can fix it.
Tks @pkozlowski-opensource @mauriziovitale

rpeddu · 2018-01-24T18:41:36Z

This ticket appears to be closed. Can someone post a fix? I am still getting the error.

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 ()
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)

MrHOY · 2018-01-25T02:46:27Z

@rpeddu I'm not sure but when I update my package, I not see this error, you can try it

"dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/router": "^5.1.1",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "angular-star-rating": "^3.0.8",
    "bootstrap": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "clipboard": "^1.7.1",
    "core-js": "^2.5.3",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "file-saver": "^1.3.3",
    "flag-icon-css": "^2.9.0",
    "font-awesome": "^4.7.0",
    "font-awesome-animation": "^0.1.0",
    "ion-rangeslider": "^2.2.0",
    "jquery": "^1.12.4",
    "jquery-touch-events": "git+https://github.com/benmajor/jQuery-Touch-Events.git",
    "moment": "^2.20.1",
    "ng-select": "^1.0.0-rc.3",
    "ng2-charts": "^1.6.0",
    "ngx-cookie": "^2.0.1",
    "ngx-cookie-service": "^1.0.10",
    "ngx-pagination": "^3.0.3",
    "ngx-popover": "0.0.16",
    "ngx-ui-switch": "^1.4.9",
    "rxjs": "^5.5.6",
    "sweetalert": "^2.1.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.2.1",
    "@angular/language-service": "^5.2.1",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.96",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

lucabenedettini · 2018-01-27T15:24:23Z

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

ChagnonSebastien · 2018-01-28T12:55:41Z

Same Here, I am building with ng build --prod --aot=false

graemehyde · 2018-01-29T22:16:05Z

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.

graemehyde · 2018-01-29T23:49:05Z

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:

angular/angular-cli#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.

graemehyde · 2018-01-30T20:10:26Z

Update: Found out that there is already a pull request for the angular starter repo (https://github.com/gdi2290/angular-starter) with exactly the same changes as I came up with above here: https://github.com/gdi2290/angular-starter/pull/1950/files

TiDox · 2018-02-05T08:58:51Z

@graemehyde works for me. thank you

mpeguero · 2018-04-16T17:43:56Z

I had the same issue and I change ng build --prod aot=false to ng build --prod --build-optimizer=false"

sohanyugasa · 2018-04-28T07:30:08Z

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

mpeguero · 2018-04-29T16:10:09Z

This was my solution. ng build --prod --build-optimizer=false Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

…

________________________________ From: sohanyugasa <[email protected]> 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 @NgModule<https://github.com/NgModule> annotation. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#20815 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABvDp9VumXxuUQo8OCiHqUFnVmsHmE2Hks5ttBqzgaJpZM4Q3gTU>.

vishwanathsunkari · 2018-06-03T04:46:28Z

compiler.js:486 Uncaught Error: Unexpected value 'AngularFireStorage' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.js:486)
at eval (compiler.js:15240)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
at eval (main.ts:11)

Package.json
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.11",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.1",
"core-js": "^2.4.1",
"firebase": "^5.0.4",
"ngx-bootstrap": "^3.0.0",
"ngx-loading": "^1.0.14",
"rxjs": "^5.5.11",
"zone.js": "^0.8.19"
},

app.module.ts
import { AngularFireModule} from 'angularfire2';
import { AngularFireStorage, AngularFireStorageModule} from 'angularfire2/storage';
import { AngularFireAuthModule} from 'angularfire2/auth';

@NgModule({
declarations: [
],
imports: [
BrowserModule,
AppRoutingModule,
AlertModule.forRoot(),
ReactiveFormsModule,
FormsModule,
LoadingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFireStorage,
AngularFireStorageModule
],

i am getting this error , can anyone please suggest a solution.

DnyaneshwarShivbhakta · 2018-08-11T10:45:34Z

@mpeguero I am facing same issue but we are not using angular-cli in our project so i am not able to use given command Could you please tell me how to resolve this issue without angular-CLI. Is there any way to change buildOptimizer property.I am new to angular.Your help is highly appericiated

mpeguero · 2018-08-11T16:22:04Z

My problem was I had reference in my provider that was not a provider. Check yours references on the ngModule.

…

Sent from my iPhone On Aug 11, 2018, at 6:46 AM, DnyaneshwarShivbhakta <[email protected]<mailto:[email protected]>> wrote: @mpeguero<https://github.com/mpeguero> I am facing same issue but we are not using angular-cli in our project so i am not able to use given command Could you please tell me how to resolve this issue without angular-CLI. Is there any way to change buildOptimizer property.I am new to angular.Your help is highly appericiated — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#20815 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABvDp_FMZ6wleMuWA4GmKS_gGu9gj8seks5uPrYLgaJpZM4Q3gTU>.

DnyaneshwarShivbhakta · 2018-08-11T16:36:00Z

@mpeguero I am migrating existing angular 2 application to angular 4.In angular 2 its working fine but after migration, I'm getting this error. I don't know what to do from last week I am clueless about this error.

mpeguero · 2018-08-11T20:34:53Z

I was doing the same. Upgrading v2 to 4

…

Sent from my iPhone On Aug 11, 2018, at 12:37 PM, DnyaneshwarShivbhakta <[email protected]<mailto:[email protected]>> wrote: @mpeguero<https://github.com/mpeguero> I am migrating existing angular 2 application to angular 4 at that time I'm getting this error.I don't know what to do from last week I am clueless on this error. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#20815 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABvDp88nmf940v1XK6mbTIDyoUWnmY18ks5uPwgvgaJpZM4Q3gTU>.

DnyaneshwarShivbhakta · 2018-08-14T08:27:24Z

@mpeguero I tried removing every provider by commenting one by one but no luck. I don't know what is this issue. This issue frustrates me a lot.

tigersharma · 2018-10-08T09:29:11Z

@DnyaneshwarShivbhakta

If you are using a child library, kindly update the import there to .

Eg :
app.module.ts

import { TranslateService } from '@ngx-translate/core';

@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],

child.module.ts

import { TranslateService } from '@ngx-translate/core';

@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule
],

DnyaneshwarShivbhakta · 2018-10-08T09:44:35Z

@tigersharma Thanks for your valuable support but my Issue was different. I was facing an issue in ng2-color-picker package.I replaced that package with ngx-color-picker and my issue gets resolved :)

andurthimahesh · 2018-11-04T04:08:50Z

compiler.js:486 Uncaught Error: Unexpected value 'AngularFireStorage' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.js:486)
at eval (compiler.js:15240)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
at eval (main.ts:11)

Package.json
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.11",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.1",
"core-js": "^2.4.1",
"firebase": "^5.0.4",
"ngx-bootstrap": "^3.0.0",
"ngx-loading": "^1.0.14",
"rxjs": "^5.5.11",
"zone.js": "^0.8.19"
},

app.module.ts
import { AngularFireModule} from 'angularfire2';
import { AngularFireStorage, AngularFireStorageModule} from 'angularfire2/storage';
import { AngularFireAuthModule} from 'angularfire2/auth';

@NgModule({
declarations: [
],
imports: [
BrowserModule,
AppRoutingModule,
AlertModule.forRoot(),
ReactiveFormsModule,
FormsModule,
LoadingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFireStorage,
AngularFireStorageModule
],

i am getting this error , can anyone please suggest a solution.

Import HttpClientModule not HttpClient in appmodule

angular-automatic-lock-bot · 2019-09-14T06:52:49Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

MrHOY closed this as completed Dec 6, 2017

janakact mentioned this issue Jan 31, 2018

Angular CLI production build failure karclouds/angular5-toaster#4

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MrHOY commented Dec 6, 2017

pkozlowski-opensource commented Dec 6, 2017

mauriziovitale commented Dec 6, 2017

MrHOY commented Dec 6, 2017

rpeddu commented Jan 24, 2018

MrHOY commented Jan 25, 2018

lucabenedettini commented Jan 27, 2018

ChagnonSebastien commented Jan 28, 2018 •

edited

Loading

graemehyde commented Jan 29, 2018 •

edited

Loading

graemehyde commented Jan 29, 2018 •

edited

Loading

graemehyde commented Jan 30, 2018

TiDox commented Feb 5, 2018

mpeguero commented Apr 16, 2018

sohanyugasa commented Apr 28, 2018

mpeguero commented Apr 29, 2018 via email

vishwanathsunkari commented Jun 3, 2018 •

edited

Loading

DnyaneshwarShivbhakta commented Aug 11, 2018

mpeguero commented Aug 11, 2018 via email

DnyaneshwarShivbhakta commented Aug 11, 2018 •

edited

Loading

mpeguero commented Aug 11, 2018 via email

DnyaneshwarShivbhakta commented Aug 14, 2018

tigersharma commented Oct 8, 2018

DnyaneshwarShivbhakta commented Oct 8, 2018

andurthimahesh commented Nov 4, 2018

angular-automatic-lock-bot bot commented Sep 14, 2019

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

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

Comments

MrHOY commented Dec 6, 2017

I'm submitting a...

Environment

pkozlowski-opensource commented Dec 6, 2017

mauriziovitale commented Dec 6, 2017

MrHOY commented Dec 6, 2017

rpeddu commented Jan 24, 2018

MrHOY commented Jan 25, 2018

lucabenedettini commented Jan 27, 2018

ChagnonSebastien commented Jan 28, 2018 • edited Loading

graemehyde commented Jan 29, 2018 • edited Loading

graemehyde commented Jan 29, 2018 • edited Loading

graemehyde commented Jan 30, 2018

TiDox commented Feb 5, 2018

mpeguero commented Apr 16, 2018

sohanyugasa commented Apr 28, 2018

mpeguero commented Apr 29, 2018 via email

vishwanathsunkari commented Jun 3, 2018 • edited Loading

DnyaneshwarShivbhakta commented Aug 11, 2018

mpeguero commented Aug 11, 2018 via email

DnyaneshwarShivbhakta commented Aug 11, 2018 • edited Loading

mpeguero commented Aug 11, 2018 via email

DnyaneshwarShivbhakta commented Aug 14, 2018

tigersharma commented Oct 8, 2018

DnyaneshwarShivbhakta commented Oct 8, 2018

andurthimahesh commented Nov 4, 2018

angular-automatic-lock-bot bot commented Sep 14, 2019

ChagnonSebastien commented Jan 28, 2018 •

edited

Loading

graemehyde commented Jan 29, 2018 •

edited

Loading

graemehyde commented Jan 29, 2018 •

edited

Loading

vishwanathsunkari commented Jun 3, 2018 •

edited

Loading

DnyaneshwarShivbhakta commented Aug 11, 2018 •

edited

Loading