[英]angular2-mdl components applied to Angular 2 Quickstart
I'm trying to use the angular2-mdl component with the Quickstart Angular 2 example ( https://angular.io/guide/quickstart ). 我正在尝试将angular2-mdl组件与Quickstart Angular 2示例( https://angular.io/guide/quickstart )一起使用。 I added these dependencies to the default package.json file:
我将这些依赖项添加到默认的package.json文件中:
"angular2-mdl": "2.1.0",
"@angular2-mdl-ext/popover": "*",
"@angular2-mdl-ext/select": "0.4.0",
Then I ran "npm install" to download the required modules. 然后我运行“npm install”下载所需的模块。 I can see the modules just installed in my node_modules dir.
我可以看到我的node_modules目录中安装的模块。 Eventually I added:
最后我补充说:
'angular2-mdl': 'npm:angular2-mdl'
to the default systemjs.config.js file: 到默认的systemjs.config.js文件:
map: {
// our app is within the app folder
app: 'app', // 'app',
// 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',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'angular2-mdl': 'npm:angular2-mdl'
},
and: 和:
'angular2-mdl': {
main: 'components/index.js'
}
to the packages parameter: 到packages参数:
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angular2-mdl': {
main: 'components/index.js'
}
}
Then I imported the module in my app.module.ts: 然后我在app.module.ts中导入了模块:
import { MdlModule } from 'angular2-mdl';
and as soon I add the MdlModule to the NgModule imports statement the app stops working: 一旦我将MdlModule添加到NgModule进口语句,应用程序就会停止工作:
@NgModule({
imports: [
BrowserModule,
FormsModule,
MdlModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
The browser console says: 浏览器控制台说:
http://localhost:3000/traceur Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:19 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur (…) (anonymous function) @ localhost/:19
http:// localhost:3000 / traceur无法加载资源:服务器响应状态为404(未找到)localhost /:19错误:(SystemJS)XHR错误(404 Not Found)loading http:// localhost:3000 / traceur (...)(匿名函数)@ localhost /:19
Which is the right way to add angular2-mdl modules to my app? 将angular2-mdl模块添加到我的应用程序的正确方法是什么?
unfortunately systemjs is not able to read the main entry in the package.json file. 不幸的是,systemjs无法读取package.json文件中的主条目。 There you'll find for angular2-mdl :
你会找到angular2-mdl :
"main": "./bundle/angular2-mdl.js"
There is no difference to the modules that you import from @angular. 从@angular导入的模块没有区别。 The following should work:
以下应该有效:
'angular2-mdl': 'npm:angular2-mdl/bundle/angular2-mdl.js'
Remove all other angular2-mdl
configuration from your systemjs.config.js
file. 从
systemjs.config.js
文件中删除所有其他angular2-mdl
配置。 If it's not working: please post your complete systemjs.config.js
file. 如果它不起作用:请发布完整的
systemjs.config.js
文件。
For popover and select you need to do the same (there it is "main": "./index.umd.js"
so the mapping is 'npm:@angular2-mdl-ext/popover/index.umd.js'
) 对于popover和select你需要做同样的事情(那里是
"main": "./index.umd.js"
所以映射是'npm:@angular2-mdl-ext/popover/index.umd.js'
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.