AOT compilation error using Angular4

[kadosh1000]

I am using version 3.0.1 of the package with Angular 4. I am getting the following error when trying to build my app using aot:

The problem seems to be with the import of angular2-modal/plugins/bootstrap

Have anyone encoutered it before? Any solutions?

[stevie6410]

+1 I was just about to submit an issue on this same subject. I have had to fall back to v2 for now. An example of v3 or docs would be great. I could only find docs examples related to v2.

[shlomiassaf]

Lib and angular versions?

Sent from my iPhone

On Jun 26, 2017, at 2:32 PM, Steve Kent notifications@github.com wrote:

+1 I was just about to submit an issue on this same subject

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kadosh1000]

@shlomiassaf As I've written in the top of my issue. I am using version 3.0.1 of the lib and angular 4.0.2

[stevie6410]

Sorry, I am also on Angular 4 and modal v3.0.1

[shlomiassaf]

This looks like a configuration thing...

I guess path transformation of the angular plugin, can you post something to GitHub so I can reproduce ?

Sent from my iPhone

On Jun 26, 2017, at 7:04 PM, Steve Kent notifications@github.com wrote:

Sorry, I am also on Angular 4 and modal v3.0.1

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[stevie6410]

I'll try and extract into an example.

[fatters]

@stevie6410 How's the example coming along? Shall I set one up?

[stevie6410]

Thanks, that would be great. I have been tied up all day.

[fatters]

Well for ease of use for a quick setup I used angular cli (the project I'm getting the error on isn't cli). A bare bones button to open a bootstrap modal appears to build fine. Are you guys having issues with a cli project or are you using ngtools/webpack like me. Might be an issue with that?

Repo here. I don't have time now but tomorrow I'll decouple it from the cli and change the AoT loader to the version my actual project is running.

[stevie6410]

Hi, I also just quickly threw together an angular CLI project and it works okay. However my main project is also CLI.

I just tried turning off AOT on the angular cli for the prod build. And it did then build succesfully

ng build --prod --aot=false

This dosent answer the question for AOT compilation failures, but it is now working in my main project with this flag. Although I am not trying to do any AOT in my project, so its not a concern for me.

[kadosh1000]

@fatters I am indeed using webpack. @stevie6410 it also works in my project when I don't use AOT, is your build succesfull without that flag?

[stevie6410]

@kadosh1000 No. When I set the --aot=false it builds fine, but without this it has the same errors as you.

[fatters]

After ejecting and using the exact same version of ngtools/webpack (1.4.2). I'm getting the same thing so I don't think it's a version issue.

ERROR in .../web/aot/node_modules/angular2-modal/plugins/bootstrap/src/angular2-modal-bootstrap.ng-flat.ngfactory.ts (10,26): Cannot find module '../../../../../../angular2-modal/plugins/bootstrap'.

It's still trying to find it in /web/angular2-modal instead of web/node_modules/angular2-modal. I'll carry on investigating.

[shlomiassaf]

@fatters I cloned the repository

Everything works great, compiles and also runs in the browser....

[shlomiassaf]

Maybe it's a FS mapping thing... windows/osx/linux

Can you go to the node_modules folder: node_modules/angular2-modal/plugins/bootstrap

There you will find a package.json file

At the bottom you will find the file definition section:

  "main": "bundle/angular2-modal-bootstrap.rollup.umd.js",
  "module": "bundle/angular2-modal-bootstrap.es5.js",
  "es2015": "bundle/angular2-modal-bootstrap.js",
  "typings": "src/angular2-modal-bootstrap.ng-flat.d.ts"

Add ./ as a prefix to each item

  "main": "./bundle/angular2-modal-bootstrap.rollup.umd.js",
  "module": "./bundle/angular2-modal-bootstrap.es5.js",
  "es2015": "./bundle/angular2-modal-bootstrap.js",
  "typings": "./src/angular2-modal-bootstrap.ng-flat.d.ts"

long shot but it might surprise.

[DavidMaza]

I'm also getting this error and tried editing the paths in node_modules/angular2-modal/plugins/bootstrap/package.json

Though I still get the same error message when compiling with AngularCLI using AOT.

Using:

• angular2-modal: 3.0.0
• angular: 4.0.0
• angular/cli: 1.1.1

[shlomiassaf]

Guys, I cant help without being able to reproduce...

Please state your OS, maybe we can find common ground here...

[kadosh1000]

@shlomiassaf it happens to me on both my build server (linux) and on my pc (windows)

I think the ng-cli command you've run is not correct for the situtation. the --prod flag is not enabling AOT compilation. use ng build --prod --aot instead and give it a try.

[DavidMaza]

I managed to track down what was causing this issue for me.

It was because I was using an older version of Angular (v4.0.0). The error does not appear when using the latest version of Angular.

More specifically, I believe it was fixed in Angular 4.2.0-beta.1.

I can reproduce the error in Angular 4.2.0-beta.0 and below, but not in 4.2.0-beta.1 and above.

The only change in Angular 4.2.0-beta.1 was to "add .ngsummary.ts files to support AOT unit tests". I believe this is what may have fixed the issue.

https://github.com/angular/angular/commit/547c363 https://github.com/angular/angular/blob/master/CHANGELOG.md

[kadosh1000]

Thanks @DavidMaza I can confirm that after updating all my angular dependencies to version 4.2.6 (latest) the problem disappeared.

@shlomiassaf I am closing this issue

[prateeksharmamay]

@kadosh1000 : It worked for me as well. Update Angular and its components and RxJS if you are using it. RxJS version 5.4.2 worked for me.