Angular5 build-optimizer generates bundles with "Please add a @NgModule annotation." errors

[Orodan]

Versions

Angular CLI: 1.5.0
Node: 8.1.3
OS: linux x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• ng build --prod --aot false
  Or :
• ng serve --prod --aot false

Observed behavior

The app served with "ng serve --prod --aot false" gives the following error in the browser console :

"Unexpected value 'e' imported by the module 'e'. Please add a @NgModule annotation."

Desired behavior

I expected no error as a simple ng serve serves the app with no error.

Mention any other details that might be useful (optional)

At first I encounter this problem after migrating from angular 4 to 5 and building my app with

ng build --prod --aot false

After deploying on a web server, I ended up with the error previously mentionned.
I've done some digging, and I found out that it was the fault of the build-optimizer added with angular 5 (it is activated by default with the --prod flag) because if I deactivate it with the following command line, it works fine :

ng build --prod --aot false --build-optimizer false

I've run some more tests, and I also found out that serving the app this way gives me the same error on my browser console :

ng serve --prod --aot false

My best guess for now is that the build-optimizer only works with aot, because if when I tried the following command :

ng serve --build-optimizer true

It tells me that I need the aot flag

The `--build-optimizer` option cannot be used without `--aot`.

Hope you can help,
Thanks

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[mauriziovitale]

I'm having the same problem.
This is the repository @filipesilva
angualar-build-optimizer-true
you can run:
npm install && npm run build:fail && npm run start:fail

package.json
{ 
"start:fail": "ng serve --prod --aot=false --build-optimizer=true ",
"build:fail": "ng build --prod --aot=false --build-optimizer=true "
}

It works fine when you run (in this case the --aot is enabled)
npm install && npm run build && npm run start

package.json
{ 
"start": "ng serve --prod --build-optimizer=true ",
"build": "ng build --prod --build-optimizer=true "
}

[filipesilva]

Fixed by #8346. Build Optimizer is not compatible with JIT builds and we shouldn't allow it to be set, but there was a bug where that could happen.

[musicEnfanthen]

Sorry for jumping in, I just ran into this before I found this issue. But apparently, it is still possible to build and serve (JIT) with --build-optimizer flag and there are no errors or warnings except the "unexpected value" console message in the web browser mentioned above.

Versions

Angular CLI: 1.7.3
Node: 8.9.1
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

ng build --prod -aot=false --build-optimizer
Or :
ng serve --prod -aot=false --build-optimizer

[reginaldocmrg]

Thanks guys, it helped me. I had the same problem with the build-optmizer option.

[guransh7]

thanks @musicEnfanthen for the fix.

[musicEnfanthen]

Actually, this wasn't meant as a fix, rather as feedback that it is still possible to set build-optimizer flag with JIT builds without any error or warn message despite the fix in #8346.

[filipesilva]

@musicEnfanthen that regression was reported in #11157 and fixed via #11657

[DnyaneshwarShivbhakta]

@filipesilva I am facing same issue but we are not using angular-cli in our project 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

[angular-automatic-lock-bot]

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