Using Webpack with Angular and ASP.NET Core is an awesome combination and a great way to get one of the best server-side web frameworks with one of the best (even if it's also one of the more complex) client-side experiences as well.

Plus, Webpack makes all your compile-, build- and publish-time experience much simpler taking care of all your bundling needs.

If, however, you get your build config wrong it can break everything very quickly!

Recently, while working on a project using the aspnet/JavascriptServices templates, I hit a problem where my development builds were working fine, but the moment I published a prod-ready build, I started getting millions of template parse errors.

In my case, it was one simple line in my webpack.config.js:

{ loader: 'html-loader', query: { minimize: !isDevBuild } }

Now, using that isDevBuild condition seemed like a great idea at the time, but turns out when publishing with Webpack using --env.prod (using dotnet publish if you're using the ASP.NET Core templates), the html-loader will helpfully lower-case all of your HTML. As we know, Angular 2 templates are actually case-sensitive and you will get unhelpful errors like this:

Can't bind to `ngclass` since it isn't a known property of 'div'

All it took was to change the line to:

{ loader: 'html-loader', query: { minimize: false } }

and now HTML minification is skipped, case is preserved and the templates all came back perfectly fine!

This is especially import if you are using Pug templates and pug-plugin-ng as you'll have a chained call to html-loader that can be difficult to debug!