Bootstrap 4 + Sass setup fails on fresh install

[louisscruz]

I just ran through the steps to install bootstrap in the wiki. It fails with three errors:

It states that vendor.ts does not exist

It gives the following message:

ERROR in ./~/css-loader!./~/postcss/lib/postcss.js!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error: /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

Also, it seems to be spitting out the whole bootstrap.css file and stating is not a PostCSS plugin.

It looks like the wiki file just needs to be updated for the current setup. I'll get the ball rolling with a fix for the vendor entry to a vendor entry.

[0x1e240]

The setup is incompatible with the current version of bootstrap-loader (v1.0.9). Since it was updated it doesn't work. A workaround is to use the previous version of bootstrap-loader (v1.0.8). It works in dev-mode. But in prod-mode it gives this message:

ReferenceError: jQuery is not defined

I've updated the wiki.

[louisscruz]

Wow, thanks for figuring that one out!

There's another issue. There are some breaking changes with the changes made to index.html in this. I'm going to update the webpack.config to what's currently working for me – removing inject: false and adding an exclude to the html loader.

[louisscruz]

Any idea if there's a workaround for the jQuery is not defined error?

[DocBradfordSoftware]

Are you sure the jQuery is not defined, is not because you didn't copy the changes from webpack.config.js to webpack.prod.config.js?

[louisscruz]

Yikes. I thought I'd already added that but apparently not. That's no longer an issue.

However, now I get an error when trying to add jQuery and Tether to the webpack.prod.config.js.

new ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
     jquery: 'jquery',
     "Tether": 'tether',
     "window.Tether": "tether"
 })

When this line is given, the production server hangs and gives off a Maximum call stack size exceeded warning.

When I comment this block out, I get the loading screen saying that bootstrap requires tether.

How should this be set up?

[0x1e240]

@DocBradfordSoftware Thanks. That was the problem. Now it's working for me in dev and prod mode. But I'am using the repository at an older revision.

[GRoguelon]

Hi,

I add fixed the same issue in adding ProviderPlugin of webpack.production.config but when I build for production. I get also: Maximum call stack size exceeded warning.

I use the last commit of the repo at this time.

I also found an issue which could be related but i'm not sure

How can we try the origin of the bug?

[DocBradfordSoftware]

Yes, I am having the same "Maximum call stack size exceeded warning" issue, I have a header component that works fine in dev mode, but in production mode it gets into an infinite loop. on startup.

Don't know if its related, but the header component is at the top of a component with sub routes.

[technoSpino]

Why does 1.0.9 fail? Third party error? What should I follow to know when I can upgrade?

[louisscruz]

Has anyone had any success getting an app with the latest structure and bootstrap to work in production?

[DocBradfordSoftware]

I fixed my issue with Bootstrap, by

1. You cannot have a navbar in a sub-component because mangling will interfere.
2. Since bootstrap uses jQuery but not for many things, I am using the bootstrap4.css but not importing jQuery.
   I have a repository at https://github.com/jkevlin/angular2-bootstrap4-no-jquery as an example.

[louisscruz]

I'm going to give this a shot later today. Thanks for posting this!

In the meantime, is there any kind of configuration that could allow for navbar sub-components? Never would have guessed this to be the issue.

[GRoguelon]

Personally, the latest commits fixed my issue.

[louisscruz]

Confirmed! The latest fixes the issue for me too.

[joshwiens]

Resolving as a resolution exists in this issue