ng build --prod ignores js files in bower_component folder

[misoucouma]

Hi
I added some bower components to my app and when I build in dev mode every thing works fine.
However, when I build in prod mode, every js file is ignored.

[Splaktar]

What's the output of ng --version?

[misoucouma]

v1.0.0-beta.8

[Splaktar]

Assuming you added them to public/ then this issue was just fixed in master, it's not in beta.8 or beta.9 builds.

[BenevidesLecontes]

@Splaktar there's a way to install this master?

[Splaktar]

@BenevidesLecontes sure, there are multiple ways. Here is one that should work:

npm i angular-cli@https://github.com/angular/angular-cli.git

I haven't tested it though since I'm still using my forked version here: npm i angular-cli@https://github.com/DevIntent/angular-cli.git

[BenevidesLecontes]

@Splaktar this master only copy js files when I do ng serve or ng build, but when I do ng serve with
--prod it doesn't work. And if do ng serve and after that ng serve --prod it throw this error

[Splaktar]

@BenevidesLecontes Yes, I see those directory not empty errors as well. I usually have to run ng build --prod or ng serve --prod about 3-4 times for it to succeed. I believe that's a separate issue though.

After running the command multiple times and getting it to succeed, the files .js are indeed copied.

[BenevidesLecontes]

@Splaktar can you paste here how you setup jquery or boostrap in your angular-cli-build and system-config?

[Splaktar]

I'm not using either of those fortunately, but I can point you to how to setup angular2-polymer w/ the angular-cli which is putting the files in public/bower_components.

Take note of the .bowerrc file containing:

{
  "directory" : "public/bower_components"
}

[filipesilva]

Closed as issue was made obsolete by #1455.

There was an issue with how we copied our vendor files before, but it should be fixed now and the approach that @Splaktar shows should work well.

[osolano]

I'm on angular cli 1.0.0.-beta.9
I am also running into a similar issue but have setup my files like @Splaktar but still run into issues. When I try
ng build --prod ng serve --prod

As soon as the application loads I have this issue:

I've setup an elements.html file with all my bower_component imports and added webcomponentsjs to the index.html file. Also placed all bower_components in public/bower_components.

This isn't an issue at all with dev, just with prod.

The issue with webcomponentsjs is probably due to the bundling of the js files, but I'm not sure what the best way to handle that is for bower_components.

I also narrowed down the missing web-animations-next-lite.min.js to these to import in my elements.html file. Commenting them out will avoid the error message
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="bower_components/neon-animation/neon-animation.html">

[Splaktar]

Confirmed that this is working in beta.10 unless, like me, you are using some custom build steps to support SCSS.

I had to do the following to get that working properly:

Change:

new Funnel('public', {
      include: ['**/*.html', '**/*.css', '**/*.js', '**/*.svg', '**/*.png'],
      destDir: 'src'
    })

To:

new Funnel('public', {
      include: ['**/*.html', '**/*.css', '**/*.js', '**/*.svg', '**/*.png'],
      destDir: 'public'
    })

Hopefully I'll have time to make a blog post next month on my full angular-cli SCSS config. Of course I imagine that by then, it'll all be irrelevant due to the webpack breaking changes.

[osolano]

@Splaktar Thanks for the reply. The issue seemed to go away after updating to beta10 and starting from scratch on my app, reinstalling node modules and bower componets and then doing a production build. thanks!

[Splaktar]

Yes, if you have a mix of beta.9 and beta.10 installed, sometimes it won't work. Following the angular-cli upgrade procedure tries to help avoid this kind of thing.

[vabhik]

I am using beta 10 and this issue is still there. I am using jquery and bootstrap and while running ng build --prod or ng serve --prod it ignores .js files. Please tell me what else needs to be done to make it work ?

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