System config js Angular 2 problems with installing modules. Explanation

Question

I have recently started to develop with Angular 2. There are a lot of tutorial out there. But one thing I cannot still understand is systemjs.config.js.

I understand why is it used, and what is the main purpose of it. But how to use it to add other dependencies is not clear enough.

I am using default package from the Starter repository. But as I've mentioned I have troubles with adding new modules.

I have tried several times to include different modules, but after several retries I gave up.

I tried to find a good tutorial or documentation that explains how to deal with this tool in the context of Angular 2, but no results.

For now I cannot install Material Design Lite module.

Here is my systemjs.config.js file

(function (global) {
    System.config({

        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            '@angular-mdl/core': 'vendor/@angular-mdl/core',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // other libraries
            'hammerjs': 'npm:hammerjs/hammer.js',
            'rxjs': 'npm:rxjs',
            'angular2-mdl': 'vendor/angular2-mdl',
            'primeng': 'npm:primeng'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js'
            },
            'angular2-mdl': {main: 'bundle/angular2-mdl.js'},
            rxjs: {
                defaultExtension: 'js'
            },
            primeng: {
                defaultExtension: 'js'
            }
        }

    });
})(this);

My index.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="/node_modules/material-design-icons/iconfont/material-icons.css">    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">

But I am still getting the following error.

Template parse errors: 'mdl-icon' is not a known element: 1. If 'mdl-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdl-icon'

Please explain how to work with this file. Or at least how to include Material Design Lite module.

Answer 1

'vendor' is a general term to describe the place providing your packages, so it could be some form of CDN, or in your case the npm.

The first thing to do would be to replace vendor/ with npm:, that way it will be looking in your project's node_modules folder as opposed to a folder called vendor which most probably doesn't exist