Credits Google Developers

Adding Material To Our Angular App (System JS)

Angular Material is one the best libraries out there on the market. As it is well written and tested, it provides great help for Developers to rapidly create Applications with ready-made aesthetic design and UI Components.

It drastically improves the development time for folks. As of now, it provides 30 Components which anyone can use is under MIT License.

So, being curious about it, I decided to integrate it into my Angular 2 Application which is basically using SystemJS with JIT and AOT Compilers under the hood.

Issue

I sat last weekend to give it a shot and hence went ahead with the “Getting Started” Guide on their website. I followed the process one by one with commands like the below one to install it.

npm install --save @angular/material @angular/cdk 
npm install --save @angular/animations
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
npm install --save hammerjs

I added the Google Fonts via CDN, added BrowserAnimations, PlatforBrowserDynamic, FormsModule as well as ReactiveFormsModule, etc.

Then I imported a Material module into my Module.ts file along with CDK.

import { MatTableModule } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
import { HttpModule } from '@angular/http';
@NgModule({ BrowserModule, CommonModule, BrowserAnimationsModule, HttpModule, FormsModule, ReactiveFormsModule, MatTableModule})

In my Component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { HttpModule } from '@angular/http';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NgModel } from '@angular/forms';

With some HTML tag provided by Angular Material, I thought that I am up and working but then I realized that since I am using SystemJS build I need to map the Material Library with my System Config file.

So I went ahead and quickly found the bindings again in the Material’s webpage as following

System.config({
  // Existing configuration options
  map: {
    // ...
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

    // CDK individual packages
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
    // ...
  }
});

After this, I assumed that I am done with Configuration and Setup. I went ahead and entered my holy command to start the application

npm start

Beginning With Pain

The browser immediately threw “Unknown Syntax Error Token >” something in my console. I tried finding an answer over the web but my efforts went in vain.

After wasting 2–3 days, I realised that there is something wrong with the Mapping part of Angular Material with my SystemJS. After exploring a bit, I found out that the way Angular tell us to map its library (in 4.x versions) is wrong.

As you can see, in the recent versions Angular has segregated the module/library files for every component. Hence, there is no single UMD.JS for linking the whole library in one go.

Big Relief

So I went ahead and manually mapped all the files required for setting up Material with SystemJS.

SYSTEM_CONFIG_DEV: any = {
paths: {
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js'},
map: {
//material
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js',
'@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'node_modules/@angular/material/bundles/material.umd.js',
'@angular/cdk': 'node_modules/angular/cdk/bundles/cdk.umd.js'
}

And after a couple of days and hours, my Angular Application is up and running with Material UI.

Adding 3rd Party libraries especially in the Modular Applications can sometimes be a daunting task for developers as the Library providers keep on changing the structures of it with the growing functionality.

I strongly feel that these companies should keep their Documentation updated.