无法弄清楚为什么路由不起作用

Question

试着学习angular2。在阅读了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

您正在使用NVARCHAR，但angular 2.0.0-beta.6 @angular语法导入了'@angular/router';，因此您混淆了版本。

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