このSystemJsの設定を説明してください

私はangular2を学ぼうとしていますが、私はSystemJSの設定に固執しています。このSystemJsの設定を説明してください

<!DOCTYPE html> 
<html> 
<head> 
    <title>Reloyalty Administration Dashboard</title> 

    <!-- Viewport mobile tag for sensible mobile support --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="icon" href="/favicon.ico"> 

    <!-- For Angular2 Routing --> 
    <base href="/"> 


    <!-- Common Scripts--> 
    <script src="/common/js/jquery-1.11.3.min.js"></script> 

    <!--SCRIPTS--> 
    <script src="/bootstrap/js/bootstrap.min.js"></script> 
    <script src="/dashboard/js/bootstrap-switch.js"></script> 
    <script src="/dashboard/js/calendar-conf-events.js"></script> 
    <script src="/dashboard/js/chartjs-conf.js"></script> 
    <script src="/dashboard/js/common-scripts.js"></script> 
    <script src="/dashboard/js/easy-pie-chart.js"></script> 
    <script src="/dashboard/js/form-component.js"></script> 
    <script src="/dashboard/js/gritter-conf.js"></script> 
    <script src="/dashboard/js/jquery-ui-1.9.2.custom.min.js"></script> 
    <script src="/dashboard/js/jquery.backstretch.min.js"></script> 
    <script src="/dashboard/js/jquery.dcjqaccordion.2.7.js"></script> 
    <script src="/dashboard/js/jquery.nicescroll.js"></script> 
    <script src="/dashboard/js/jquery.scrollTo.min.js"></script> 
    <script src="/dashboard/js/jquery.sparkline.js"></script> 
    <script src="/dashboard/js/jquery.tagsinput.js"></script> 
    <script src="/dashboard/js/jquery.ui.touch-punch.min.js"></script> 
    <script src="/dashboard/js/sparkline-chart.js"></script> 
    <script src="/dashboard/js/tasks.js"></script> 
    <script src="/dashboard/js/zabuto_calendar.js"></script> 
    <script src="/dashboard/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script> 
    <script src="/dashboard/js/chart-master/Chart.js"></script> 
    <script src="/dashboard/js/fancybox/jquery.fancybox.js"></script> 
    <script src="/dashboard/js/fullcalendar/fullcalendar.min.js"></script> 
    <script src="/dashboard/js/gritter/js/jquery.gritter.js"></script> 
    <script src="/dashboard/js/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script> 
    <script src="/js/node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="/js/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/js/node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="/js/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/js/node_modules/zone.js/dist/zone.js"></script> 
    <script src="/js/node_modules/rxjs/bundles/Rx.js"></script> 
    <!--SCRIPTS END--> 

    <script> 


     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js', 
        main: 'main.js' 
       }, 
       '@angular/core': { 
        main: 'bundles/core.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/compiler': { 
        main: 'bundles/compiler.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/common': { 
        main: 'bundles/common.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser-dynamic': { 
        main: 'bundles/platform-browser-dynamic.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser': { 
        main: 'bundles/platform-browser.umd.js', 
        defaultExtension: 'js' 
       }, 
       rxjs: { 
        main: 'bundles/Rx.umd.min.js', 
        defaultExtension: 'js' 
       } 
      }, 
      map: { 
       'app': '.', // where my app is. '.' means relative 
       '@angular': '/js/node_modules/@angular', 
       'rxjs': '/js/node_modules/rxjs' 
      } 
     }); 
     System.import('management/main') 
       .then(null, console.error.bind(console)); 
    </script> 

    <!-- end AngularJS 2--> 
</head> 

<body> 

<my-app>Loading...</my-app> 

</body> 
</html>

マイファイル構造は次のとおりです。

management/ 
├── app/ 
│ ├── app.component.ts 
| ├── root.module.ts 
├──main.ts

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import {RootModule} from "./app/root.module"; 

platformBrowserDynamic().bootstrapModule(RootModule);

root.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 


@NgModule({ 
    imports:  [BrowserModule], // what my Angular Application needs 
    declarations: [AppComponent], // the view classes that belong to this module. 
    bootstrap: [AppComponent], // which class to boostrap 
}) 
export class RootModule {}

app.component.ts：

私はすべてのドキュメントのsystemjsを読んだ

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>BLAAH is best !!! OMGOMGOMG blagh assdsdasd</h1>' 
}) 
export class AppComponent { }

は提供しますが、コンフィギュレーションで何が起こっているのか理解できないようです。

System.import('main') 
       .then(null, console.error.bind(console));

私はコンソールでこれらのエラーを取得：私が書く場合例えば

？

GET http://merchant.localhost:1337/main.js 404 (Not Found) 
Error: (SystemJS) XHR error (404 Not Found) loading http://merchant.localhost:1337/main.js(…)

=========================================== =================================

---------------- -------------------- EDIT 1 ---------------------------- ---

=========================================== ==============================

私が変更されました：

System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js', 
       main: 'main.js' 
      }, 
      '@angular/core': { 
       main: 'bundles/core.umd.js', 
       defaultExtension: 'js' 
      }, 
      '@angular/compiler': { 
       main: 'bundles/compiler.umd.js', 
       defaultExtension: 'js' 
      }, 
      '@angular/common': { 
       main: 'bundles/common.umd.js', 
       defaultExtension: 'js' 
      }, 
      '@angular/platform-browser-dynamic': { 
       main: 'bundles/platform-browser-dynamic.umd.js', 
       defaultExtension: 'js' 
      }, 
      '@angular/platform-browser': { 
       main: 'bundles/platform-browser.umd.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       main: 'bundles/Rx.umd.min.js', 
       defaultExtension: 'js' 
      } 
     }, 
     map: { 
      'app': 'management', // where my app is. '.' means relative 
      '@angular': '/js/node_modules/@angular', 
      'rxjs': '/js/node_modules/rxjs' 
     } 
    }); 
    System.import('app') 
      .then(null, console.error.bind(console));

これで私のアプリは管理フォルダにあり、main.jsなどを実行しなければならないことを知っている "app"で起動します。これは機能します。すばらしいです。そこで私は先に進んでroot.component.htmlをロードしました。

GET http://merchant.localhost:1337/root.component.html 404 (Not Found)

出典

2016-11-07 mp3por

あなたが本当に.の代わりにappmanagementにフォルダをマップする必要があると思わ：

root.component.ts：

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'root-component', 
    templateUrl: 'root.component.html' 
}) 
export class RootComponent { }

とエラーここコードです。あなたはあなたのルートの名前を変更したので、それはあなたがこれらの問題を抱えている理由です。

また、パッケージにmain: './main.js'を修正し、モジュール名としてappを使用する必要があります。

System.Jsには、appのパッケージがあり、./management/main.jsの下にあるパッケージがあると伝えられます。

P.S.私はSystem.Js上のスーパービッグ専門家ではないですので、私は間違っているかもしれないが、私はAngular2チュートリアル:)

出典

2016-11-07 11:13:59

アプリの名前を変更すると、それを実行するために管理しました：」。'app：' management '、そしてSystem.import（' main '）は私に "GET http：//merchant.localhost：1337/main 404（Not Found）"を与えます。 – mp3por

'main'の代わりに' app'をインポートする必要があります。。 System.jsには「メイン」が何であるか分かりません。 –

あなたは 'main： 'となるようにパッケージを修正する必要があると思う/ main.js'' –

このSystemJsの設定を説明してください

答えて

関連する問題