ルーティングが機能していない理由を把握できません

Question

angle2の学習を試みています。 tutosを読んで研究した後、私はすべての共通の機能を使ってデモをコーディングすることに決めました。

ページ間をルーティングしようとすると、私は完全に失われます。私は自分のコードの中で最も重要な部分を投稿しようとしますので、良い方法であれば教えてください。別の方法を試してみて、なぜうまくいかないのか教えてください。

environment_main.ts

import {bootstrap} from "angular2/platform/browser"; 

import {AppComponent} from "./environment_app.component"; 
import { provideRouter } from '@angular/router'; 
import { CarouselAppRoutes } from './carousel.routes' 

bootstrap(AppComponent, [ provideRouter(CarouselAppRoutes)]); 

AppComponentは、ページ間のリンクを含むHTMLページが含まれています。

私は私のindex.htmlをの頭の中で、次のファイルをインポートしています：

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script> 
    <script src="/node_modules/angular2/bundles/router.dev.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}}, 
     map: { 'app': './app' } 
     }); 
     System.import('app/environment_main') 
      .then(null, console.error.bind(console)); 
    </script> 

    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    <script>document.write('<base href="' + document.location + '" />');</script> 

carousel.routes.ts

import { SociosComponent } from './socios.component'; 
import { CarteleraComponent } from './cartelera.component'; 
import { AppComponent } from './environment_app.component'; 

export const ContactsAppRoutes = [ 
    { path: '', component: AppComponent }, 
    { path: 'socios', component: SociosComponent }, 
    { path: 'cartelera', component: CarteleraComponent } 
] 

私は次のエラーを取得しています（現在）：

ありがとうございます。

Answer 1

angular 2.0.0-beta.6を使用していますが、'@angular/router'; @ angles構文からのインポートには、rc.0が含まれているため、バージョンが混在しています。

出典：https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02