2016-09-08 2 views
0

Я схватил нг-книгу 2, как это казалось качественным способом разобраться в Angular2. Как хэдз-ап, я никогда не использовал ни одного из этих загрузчиков модулей или чего-либо еще раньше, и у меня было очень ограниченное использование npm и узла, поэтому вся терминология и предполагаемые знания могут быть довольно запутанными.
ng-book 2 использует узел, но я решил, что могу начать с моего обычного сервера .NET MVC, так как это то, что я буду спарить с угловым 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

Невероятный. Конечно, это была опечатка, которую я не видел. Спасибо за ваш острый глаз. –

Смежные вопросы