首页 文章

应用于Angular 2 Quickstart的angular2-mdl组件

提问于
浏览 次
3

我正在尝试将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参数：

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无法加载资源：服务器响应状态为404（未找到）localhost /：19错误：（SystemJS）XHR错误（404 Not Found）loading http：// localhost： 3000 / traceur（...）（匿名函数）@ localhost /：19

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

angular angular2-mdl

1 回答

  • 2

    不幸的是，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' ）

    回复于

相关问题