2016-09-08 52 views
0

我抓住了ng-book 2,因为它看起来像是一个找出Angular2的好方法。作为一个头脑,我从未使用过任何这些模块加载器或之前的任何东西,并且我对npm和node的使用非常有限,所以所有的术语和假定的知识都可能相当混乱。
ng-book 2使用节点,但我想我可能会开始使用我通常的.NET MVC服务器,因为这是我将在工作中与Angular 2配对。如何让systemjs模块加载使用.net mvc?

我目前的问题显然是在模块加载,因为我只是不断收到404错误,当systemjs试图加载角包。

app.ts

/** 
* A basic hello-world Angular 2 app 
*/ 
import { 
    NgModule, 
    Component 
} from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

@Component({ 
    selector: 'hello-world', 
    template: ` 
     <div> 
      Hello World 
     </div> 
    ` 
}) 
class HelloWorld { 
} 

@NgModule({ 
    declarations: [HelloWorld], 
    imports: [BrowserModule], 
    bootstrap: [HelloWorld] 
}) 
class HelloWorldAppModule { } 

platformBrowserDynamic().bootstrapModule(HelloWorldAppModule); 

systemjs.config.js

// See also: https://angular.io/docs/ts/latest/quickstart.html 
(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app/app', 
    'rxjs':      'app/node_modules/rxjs', 
    '@angular':     'app/node_modules/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'rxjs': { defaultExtension: 'js' } 
    }; 

    var angularPackages = [ 
    'core', 
    'common', 
    'compiler', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'http', 
    'router', 
    'forms', 
    'upgrade' 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    angularPackages.forEach(function(pkgName) { 
    packages['@angular/' + pkgName] = { 
     main: 'bundles/' + pkgName + '.umd.js', 
     defaultExtension: 'js' 
    }; 
    }); 

    var config = { 
    map: map, 
    packages: packages 
    } 

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this); 

index.cshtml

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular 2 - Simple Reddit</title> 

     <script src="~/app/node_modules/core-js/client/shim.min.js"></script> 
     <script src="~/app/node_modules/zone.js/dist/zone.js"></script> 
     <script src="~/app/node_modules/reflect-metadata/Reflect.js"></script> 
     <script src="~/app/node_modules/systemjs/dist/system.src.js"></script> 

     <link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" /> 
     <link rel="stylesheet" type="text/css" href="~/app/styles.css" /> 
    </head> 
    <body> 
     <script resource="~/app/resources/systemjs.config.js"></script> 
     <script> 
      System.import('/app/app.js') 
       .then(null, console.error.bind(console)); 
     </script> 

     <hello-world></hello-world> 

    </body> 
</html> 

该项目的布局是这样的
enter image description here

什么我结束了这越来越像

zone.js:101 GET http://localhost:18481/@angular/core 404 (Not Found) 

回答

1

请求我看到的第一件事是,可能不适用你的systemjs配置,因为你有

<script resource="~/app/resources/systemjs.config.js"></script> 

你为什么有resource这里? systemjs.config.js包含应该像任何其他脚本一样执行的纯JavaScript代码。

+0

令人难以置信。当然,这是一个我没有看到的错字问题。谢谢你敏锐的目光。 –