2016-09-08 3 views
0

Angular2를 파악할 때 품질이 좋은 것처럼 보였으므로, ng-book 2를 사용했습니다. 머리 위로, 나는이 모듈 적재기 또는 무엇이든을 결코 전에 사용하지 않으며 나는 npm와 마디의 아주 한정된 사용이 있었다 그래서 모든 용어 및 추측 된 지식은 확실히 복잡 할 수있다.
ng-book 2는 노드를 사용하지만 저는 평소 사용하는 .NET MVC 서버를 사용하기 시작할지도 모른다고 생각했습니다. 이것이 내가 앵귤러 2를 직장에서 페어링하는 것과 같습니다..net mvc로 systemjs 모듈을로드하는 방법?

systemjs가 각도 패키지를로드하려고 할 때 404 오류가 계속 발생하기 때문에 현재의 문제는 모듈로드 중일 것입니다.

가 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

<!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> 

index.cshtml

// 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); 

프로젝트의 레이아웃이
enter image description here

같다 당신이 할 왜

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

을 가지고 있기 때문에

는 그리고 이걸로 그만 둘 것, 내가 볼 수있는 첫번째 것은 아마 당신의 systemjs 설정이 적용되지 않는 것입니다

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

답변

1

같은 요청입니다 여기 resource? systemjs.config.js에는 다른 스크립트와 마찬가지로 실행해야하는 일반 자바 스크립트 코드가 들어 있습니다.

+0

믿을 수 없습니다. 물론 그것은 내가 보지 못했던 오자였다. 날카로운 눈으로 감사드립니다. –

관련 문제