gpt4 book ai didi

angular2-mdl 组件应用于 Angular 2 Quickstart

转载 作者:太空狗 更新时间:2023-10-29 18:33:15 25 4
gpt4 key购买 nike

我正在尝试将 angular2-mdl 组件与 Quickstart Angular 2 示例 ( https://angular.io/guide/quickstart ) 一起使用。我将这些依赖项添加到默认的 package.json 文件中:

"angular2-mdl": "2.1.0",
"@angular2-mdl-ext/popover": "*",
"@angular2-mdl-ext/select": "0.4.0",

然后我运行“npm install”来下载所需的模块。我可以看到刚刚安装在我的 node_modules 目录中的模块。最后我补充说:

'angular2-mdl': 'npm:angular2-mdl'

到默认的 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'
},

和:

'angular2-mdl': { 
main: 'components/index.js'
}

到包参数:

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'
}
}

然后我在我的 app.module.ts 中导入了模块:

import { MdlModule } from 'angular2-mdl';

一旦我将 MdlModule 添加到 NgModule 导入语句中,应用程序就会停止工作:

@NgModule({
imports: [
BrowserModule,
FormsModule,
MdlModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

浏览器控制台显示:

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

将 angular2-mdl 模块添加到我的应用程序的正确方法是什么?

最佳答案

不幸的是,systemjs 无法读取 package.json 文件中的主要条目。在那里你会找到 angular2-mdl :

"main": "./bundle/angular2-mdl.js"

从@angular 导入的模块没有区别。以下应该有效:

'angular2-mdl': 'npm:angular2-mdl/bundle/angular2-mdl.js'

systemjs.config.js 文件中删除所有其他 angular2-mdl 配置。如果它不起作用:请发布完整的 systemjs.config.js 文件。

对于 popover 和 select 你需要做同样的事情(它是 "main": "./index.umd.js" 所以映射是 'npm:@angular2- mdl-ext/popover/index.umd.js')

关于angular2-mdl 组件应用于 Angular 2 Quickstart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40047166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com