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

我試圖讓我的Angular2應用程序使用ng2-material組件，但在正確獲取SystemJS配置時遇到了問題。當我運行應用程序，Chrome的控制檯給我：在Visual Studio 2015中使用Angular 2配置SystemJS

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材料模塊中引用什麼的那一刻，我開始越來越這些錯誤。下面的代碼：

的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" 
    } 
}

來源

2016-03-30 user1684458

您需要配置SystemJS配置中NG2材料是這樣的：

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

來源

2016-03-30 16:20:48

謝謝，似乎擺脫了這個問題。現在我在'angular2-polyfills.js：332'錯誤中得到'require is not defined'。我認爲'需要'包含在SystemJS中，所以我對這意味着什麼感到困惑。 – user1684458

您使用的是哪個版本的Angular2？ –

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

回答

相關問題