angular2-mdl组件应用于Angular 2快速入门 [英] angular2-mdl components applied to Angular 2 Quickstart

问题描述

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

I'm trying to use the angular2-mdl component with the Quickstart Angular 2 example (https://angular.io/guide/quickstart). I added these dependencies to the default package.json file:

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

然后我运行"npm install"以下载所需的模块.我可以在node_modules目录中看到刚刚安装的模块. 最终我添加了:

Then I ran "npm install" to download the required modules. I can see the modules just installed in my node_modules dir. Eventually I added:

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

到默认的systemjs.config.js文件:

to the default systemjs.config.js file:

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参数:

to the packages parameter:

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中:

Then I imported the module in my app.module.ts:

import { MdlModule } from 'angular2-mdl';

然后我将MdlModule添加到NgModule import语句中，应用程序便停止工作:

and as soon I add the MdlModule to the NgModule imports statement the app stops working:

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

浏览器控制台显示:

http://localhost:3000/traceur 无法加载资源:服务器响应状态为404(未找到) 本地主机/:19错误:(SystemJS)XHR错误(找不到404)正在加载 http://localhost:3000/traceur (…) (匿名函数)@ localhost/:19

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模块的正确方法?

Which is the right way to add angular2-mdl modules to my app?

推荐答案

不幸的是，systemjs无法读取package.json文件中的主条目.在这里您可以找到 angular2-mdl :

unfortunately systemjs is not able to read the main entry in the package.json file. There you'll find for angular2-mdl:

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

从@angular导入的模块没有任何区别.以下应该可以工作:

There is no difference to the modules that you import from @angular. The following should work:

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

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

Remove all other angular2-mdl configuration from your systemjs.config.js file. If it's not working: please post your complete systemjs.config.js file.

对于popover并选择，您需要执行相同操作(因为它是"main": "./index.umd.js"，所以映射是'npm:@angular2-mdl-ext/popover/index.umd.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')

这篇关于angular2-mdl组件应用于Angular 2快速入门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！