系统配置 js Angular 2 个模块安装问题。解释
System config js Angular 2 problems with installing modules. Explanation
我最近开始使用 Angular 2. 那里有很多教程。但是我仍然无法理解的一件事是 systemjs.config.js
。
我明白为什么要用它,它的主要用途是什么。但是如何使用它来添加其他依赖还不够清楚。
我正在使用 Starter 存储库中的默认包。
但正如我所提到的,我在添加新模块时遇到了麻烦。
我尝试了几次包含不同的模块,但在多次重试后我放弃了。
我试图找到一个很好的教程或文档来解释如何在 Angular 2 的上下文中处理此工具,但没有结果。
现在我无法安装 Material Design 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">
但我仍然收到以下错误。
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'
请说明如何使用此文件。或者至少如何包含 Material Design Lite 模块。
'vendor' 是描述提供您的包的地方的通用术语,因此它可能是某种形式的 CDN,或者在您的情况下是 npm。
首先要做的是将 vendor/
替换为 npm:
,这样它就会在项目的 node_modules
文件夹中查找,而不是名为 vendor 的文件夹可能不存在
仍然不知道所有这些东西是如何工作的。但要使其正常工作,请执行以下操作。
(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);
并且不要忘记在您的 app.module.js
中导入 MdlModule
@NgModule({
imports: [BrowserModule, MdlModule, HttpModule, MaterialModule, RoutingModule],
我最近开始使用 Angular 2. 那里有很多教程。但是我仍然无法理解的一件事是 systemjs.config.js
。
我明白为什么要用它,它的主要用途是什么。但是如何使用它来添加其他依赖还不够清楚。
我正在使用 Starter 存储库中的默认包。 但正如我所提到的,我在添加新模块时遇到了麻烦。
我尝试了几次包含不同的模块,但在多次重试后我放弃了。
我试图找到一个很好的教程或文档来解释如何在 Angular 2 的上下文中处理此工具,但没有结果。
现在我无法安装 Material Design 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">
但我仍然收到以下错误。
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'
请说明如何使用此文件。或者至少如何包含 Material Design Lite 模块。
'vendor' 是描述提供您的包的地方的通用术语,因此它可能是某种形式的 CDN,或者在您的情况下是 npm。
首先要做的是将 vendor/
替换为 npm:
,这样它就会在项目的 node_modules
文件夹中查找,而不是名为 vendor 的文件夹可能不存在
仍然不知道所有这些东西是如何工作的。但要使其正常工作,请执行以下操作。
(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);
并且不要忘记在您的 app.module.js
MdlModule
@NgModule({
imports: [BrowserModule, MdlModule, HttpModule, MaterialModule, RoutingModule],