Question

我正在尝试让我的Angular2应用程序使用ng2-material组件，但在使SystemJS配置正确时遇到问题。当我运行应用程序时，Chrome的控制台会给我：

GET http://localhost:12630/ng2-material/all 404 (Not Found)

和

angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:12630/ng2-material/all
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:771:30)
    at ZoneDelegate.invokeTask (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:365:38)
    at Zone.runTask (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:431:34)
Error loading http://localhost:12630/ng2-material/all as "ng2-material/all" from http://localhost:12630/app/app.component.js

应用程序运行正常，但是当我尝试从ng2-material模块引用任何内容时，我开始收到这些错误。这是代码：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Testing</title>

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

</head>
<body>
    <hud>Loading...</hud>
</body>
</html>

main.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

app.component.ts

import {Component} from 'angular2/core';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';

@Component({
    selector: 'hud',
    template: `
      <button md-raised-button class="md-raised md-primary">Primary</button>
    `
    directives: [MATERIAL_DIRECTIVES]   //uncomment this line to get it to work
})

export class AppComponent {

}

该行

import {MATERIAL_DIRECTIVES} from 'ng2-material/all';

在'ng2-material / all'部分下没有红色波形，所以我知道TypeScript能够找到那个部分，但是当使用MATERIAL_DIRECTIVES时，我收到一个错误。我假设这是SystemJS配置的问题。这是我的文件结构：

Root:
|-app
|----app.component.ts
|----main.ts
|-Scripts
|----[some nuGet package stuff]
|-node_modules
|----[all npm packages: ng2-material is located in here]
|-index.html
|-package.json
|-tsconfig.json

编辑：

的package.json

   {
    "version": "1.0.0",
    "name": "ASP.NET",
    "private": true,
  "devDependencies": {
    "angular2": "2.0.0-beta.12",
    "systemjs": "0.19.24",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.6",
    "ng2-material": "0.3.4"
  }
}

Answer 1

您需要以这种方式在SystemJS配置中配置ng2-material：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-material': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material/source'
    }
  });
  (...)
</script>

在Visual Studio 2015中使用Angular 2配置SystemJS

1 个答案: