Angular 2 - 路由器实例化期间出错 - （路由器插座 - >路由器）答案

【问题标题】：Angular 2 - Error during instantiation of Router - (Router Outlet ->Router)Angular 2 - 路由器实例化期间出错 - （路由器插座 - >路由器）
【发布时间】：2016-07-15 15:12:39
【问题描述】：

编辑这是我的笨蛋：plnkr.co/edit/qMBc5j62jQoBJLsFYgr4?p=preview

我正在使用 TypeScript。

我收到以下错误：

Router 实例化期间出错！（RouterLink -> 路由器）。和（RouterOutlet -> 路由器）

我在这个论坛上尝试了不同的解决方案来解决这个问题，包括在index.html 中添加/更改<base href="/"> 或将APP_BASE_HREF 添加到引导程序。

我一直在使用官方 Angular Plunker 教程http://plnkr.co/edit/d8pewJf9kVqD3kTSvQmK?p=preview 中的代码，效果很好。

我的 app.component.ts 如下所示：

import { Component } from 'angular2/core';
import {LandingComponent} from './landing.component';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

@Component({
 selector: 'my-app',
 template: `
    <h1>Hello</h1>
    <h1>{{title}}</h1>
    <nav>
      <a [routerLink]="['Landing']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
    `,
 directives: [ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS]
})

@RouteConfig({
 {
    path: '/landing',
    name: 'Landing',
    component: LandingComponent,
    useAsDefault: true
}

 })

export class AppComponent { 
 title = 'Win Free!';
}

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);

index.html

<html>
 <head>

 <script>document.write('<base href="' + document.location + '" />');  </script>
      <title>Angular 2 QuickStart</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">    
      <link rel="stylesheet" href="styles.css">
      <!-- 1. Load libraries -->
      <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>


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

  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

谢谢。

【问题讨论】：

几乎每件事似乎都很好。你有你的代码plunker吗？
您的 plnkr 工作正常，您的 plnkr 哪里出错了？
@PardeepJain。那不是他的笨蛋。他正在使用它作为参考。
opps 我认为这是他的 plnkr 区域 ;)
是的，我之前链接的 plunker 是官方的 Angular 2 plunker。这是我的 plunker [链接] (plnkr.co/edit/qMBc5j62jQoBJLsFYgr4?p=preview) 我还应该注意，添加路由后，“app.component.ts”中的“{{title}}”绑定停止工作。

标签： angular angular2-routing

【解决方案1】：

从AppComponent 中删除providers: [ROUTER_PROVIDERS]。 ROUTER_PROVIDERS 应该由整个应用程序共享，只需将其添加到 boostrap(AppComponent, [ROUTER_PROVIDERS])。

如果您也将它们添加到组件 providers 上，那么该组件会获得一个新实例，这会阻止它们按预期工作。

更新

在您的 Plunker（Edit ... 之后的链接）中，ROUTER_PROVIDERS 仅在组件上，但在 bootstrap() 中没有，但它应该是相反的。 @RouteConfig() 中还有一个语法问题，它需要一个数组，但实际上是 {}（而不是 []）。

Working Plunker

【讨论】：

我仍然遇到同样的错误。奇怪，因为我使用的结构与我上面链接的官方 angular plunker 相同。
现在可以使用了。我更新了@RouteConfig 以使用[] 和ROUTER_PROVIDERS。谢谢。