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.

You can trigger bundling manually by running following commands in a dotnet core 2 spa template app.

webpack --config webpack.config.vendor.js
webpack --config webpack.config.js

Create a new Angular 4 applciation from dotnet core 2.0 cli

Following step-by-step instructions explains, how to integrate Angular Material 2 into dotnet core 2 Angular 4 SPA. I’m using Visual studio code as my IDE. If you dont have it you can get it from here link. In Visual studio code, pressing Ctrl + ~ will open CMD prompt.

Step 1. Create folders and dotnet core web application

Run following commands in a CMD prompt to create applciation folder and a dotnet core 2.0 web application using angular 4 spa template.

mkdir ng4-material-core
cd ng4-material-core
dotnet new angular

Step 2. Install all dependencies using npm

To install all dependencies from npm, run npm install in CMD prompt.

Step 3. Install Angular Material and Angular Material cdk

Angular cdk stands for Angular Component Development kit. Below quote from Angular developmemnt team expalins its really well.

The goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language. — Angular Team

Install Angular material and Angular material cdk by running npm install --save @angular/material @angular/cdk in CMD prompt

Step 4. Install webpack

As explained earlier, the SPA template uses Webpack by default to bundle modules. If webpack is not insatlled in the cmputer, install it by running npm install -g webpack in CMD prompt. The install -g will install package globally in the computer.

Step 5. Pack module using web pack

Add following code into treeShakableModules array of webpack.config.vendor.js file

'@angular/material',
'@angular/cdk',

Add angular core prebuilt theme into nonTreeShakableModules array of webpack.config.vendor.js file

'@angular/material/prebuilt-themes/indigo-pink.css',

Pack webpack.config.vendor.js

Run the command webpack --config webpack.config.vendor.js to pack webpack.config.vendor.js

Pack webpack.config.js

Run the command webpack --config webpack.config.js to pack <code.webpack.config.js

Step 6. Add Material Button module into app.module.shared.ts

Import MatButtonModule  import { MatButtonModule } from '@angular/material'; Add MatButtonModule into “imports” array in app.module.shared.ts

into app.module.shared.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

import { MatButtonModule } from '@angular/material';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        MatButtonModule
    ]
})
export class AppModuleShared {
}

Step 6. Modify counter.component.html to use material button

Modify the button element in counter.component.html to use angular material button module mat-raised-button as below.

Step 7. Build dotnet application

Build dot net core application by running dotnet build in CMD prompt.

Step 8. Set environemnt to developemnt

Setup your applciation development environment to Development by running following command.
If you are using powershell, run
$Env:ASPNETCORE_ENVIRONMENT = "Development"

If you are using CMD prompt, run
set ASPNETCORE_ENVIRONMENT=Development

Step 9. Run dotnet application

Run dot nect core application by runnign dotnet run in CMD prompt.

Step 10. Open dotnet application in browser

Step 11. verify Angular material button

Click on Counter enav bar element and observe increment button if the look and feel have been changed to Google Angular material look and feel.