系统配置js角度2问题与安装模块。解释

Question

我最近已经开始用“角2”来开发了，有很多教程。但我仍然无法理解的一件事是systemjs.config.js。

我明白为什么要使用它，以及它的主要目的是什么。但是，如何使用它来添加其他依赖项还不够清楚。

我正在使用初学者存储库中的默认包。但是，正如我前面提到的，我在添加新模块时遇到了麻烦。

我已经尝试过几次包括不同的模块，但经过几次重试，我放弃了。

我试图找到一个很好的教程或文档来解释如何在角2的上下文中处理这个工具，但是没有结果。

目前，我无法安装材料设计Lite模块。

这是我的systemjs.config.js文件

(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);

我的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">

但我仍然得到以下错误。

模板解析错误：‘mdl-图标’不是已知的元素: 1.如果‘mdl-图标’是一个角组件，那么验证它是这个模块的一部分。2.如果‘mdl-图标’

请解释如何处理此文件。或至少如何包括材料设计Lite模块。

Answer 1

“供应商”是一个通用的术语，用来描述提供软件包的地方，所以它可以是某种形式的CDN，或者在您的例子中是npm。

要做的第一件事是用vendor/替换npm:，这样它就可以在项目的node_modules文件夹中查找，而不是很可能不存在的称为folder的文件夹

Answer 2

还是不知道这些东西是怎么工作的。但要让它发挥作用，请执行以下操作。

(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);

并且不要忘记在您的MdlModule中导入app.module.js

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