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

我正在尝试让我的 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>

主要.ts

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

bootstrap(AppComponent);

应用程序组件.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

编辑:

包.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"
  }
}

最佳答案

您需要以这种方式在您的 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>

关于typescript - 在 Visual Studio 2015 中使用 Angular 2 配置 SystemJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36314254/

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

上一篇：生产中的 Angular2

下一篇：angular - System.register-Issue 设置 Angular Quickstart