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.

Borquaye · Accepted Answer · 2017-03-20 14:55:57Z

2

'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

answered Mar 20, 2017 at 14:55

Borquaye

7764 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Borquaye Over a year ago

Hey, somewhere in your error it should be giving you the path it's trying to use to find your package. I've had a look at angular2-mdl in node_modules; try changing the path of your 'angular2-mdl' map to equal 'npm:angular2-mdl/bundle/angular2-mdl.js'

user4230508 · Accepted Answer · 2017-03-20 16:20:27Z

Still doesn't know how all that stuff work. But to get it working do the following.

(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',

            'angular2-mdl': 'npm:angular2-mdl/',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'angular2-mdl': {main: 'bundle/angular2-mdl.js'},

        }

    });
})(this);

And don't forget to import MdlModule in your app.module.js

@NgModule({
    imports: [BrowserModule, MdlModule, HttpModule, MaterialModule, RoutingModule],

Collectives™ on Stack Overflow

System config js Angular 2 problems with installing modules. Explanation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related