I have been working with the Angular 2/ASP.NET core SPA template mentioned in this blog post. When using dotnet new angular, a Visual studio 2017 project is generated with these technologies and Bootstrap 3.3.7. I updated package.json to use Bootstrap 4.0.0-alpha.6, installed the new packages, and reran webpack --config webpack.config.vendor.js to generate a new bundle of CSS and JS.
However, when switching routes in the app, I noticed in Chrome Developer Tools Networking tab that routes now do a complete page refresh instead of outputting new content in the router outlet.
Bootstrap comes with JS files to allow for Bootstrap plugins to work, and in the case of default template output, is used for the collapsing navigation bar/hamburger menu on small screens. I thought perhaps the newer Bootstrap JS may be interfering so I removed the bootstrap entry in webpack.config.vendor.js and left in the entry for bootstrap/dist/css/bootstrap.css, meaning only CSS is getting bundled now and not its associated JS. I reran webpack and confirmed that it is no longer bundled with the rest of the vendor JS. However, when running the app, routes still operate in the same incorrect manner.
If we take a look at the generated HTML when running the app before upgrading Bootstrap, routes look like this:
<a _ngcontent-ec6b-1="" ng-reflect-router-link="/home" ng-reflect-href="/home" href="/home">Home</a>
But upgrading the CSS results in this:
<a _ngcontent-1="" href="/home">Home</a>
Note the missing attributes in the latter code; I confirmed this in the latest Chrome and Edge browsers, and I ran from IIS Express in VS2017 as well as dotnet run. Any ideas why simply updating the bundled Bootstrap CSS would change Angular 2 routes' HTML output?
