With Dotnet core 2, Microsoft included new Single-Page-Application¬†(SPA) templates for client-side¬†javascript frameworks like Angular, React etc.. In this blog post, I’m going over the steps that require integrating Angular Material 2 into the Angular 4 web application created using dot net core 2.0 angular spa template.

TypeScript

The web applications that created from Dotnet core spa templates (anglar, react etc..) contain a folder called “ClientApp”. This folder holds all the javascript framework components. These applications use TypeScript by default.

Webpack

Webpack is a module bundler, it takes modules with dependencies and generates static assets representing those modules. Read more about Webpack in this link

The SPAs now support webpack module bundler right out of the box. Web pack runs as part of the build and it does minifications of Javascript and css files as well.
In dotnet core spa template, webpack.config.vendor.js defines all the modules that are relevant to the application. You can add your own css/javascript files to this configuration file. We will use this file to include material javascript components and material theme files. The webpack.config.js file defines all the rules for bundling file, you can add your own rule here as well.
Read More