角2 - 路由器的实例化过程中的错误 - （路由器出口 - >路由器）

编辑这里是我的plunker：plnkr.co/edit/qMBc5j62jQoBJLsFYgr4?p=preview 角2 - 路由器的实例化过程中的错误 - （路由器出口 - >路由器）

我使用的是打字稿。

，我发现了以下错误：

Error during instantiation of Router! (RouterLink -> Router). and (RouterOutlet -> Router)

我试图在这个论坛对于这个问题，包括增加/在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/[email protected]/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/[email protected]/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>

谢谢。

来源

2016-03-28 ronanmc

几乎evey的东西似乎没事。你有你的代码淹没吗？ – micronyks

你的plnkr工作正常，你的plnkr错误在哪里？ –

@PardeepJain。那不是他的闯入者。他正在使用它作为参考。 – micronyks

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

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

更新

在你Plunker（Edit ...后的临客）具有ROUTER_PROVIDERS仅在组件，但不是在bootstrap()，但它应该是周围的其他方法。 @RouteConfig()中也有一个语法问题，它需要一个数组，但是是{}（而不是[]）。

Working Plunker

来源

2016-03-28 12:47:55

我仍然收到相同的错误。奇怪，因为我正在使用与上面链接的官方角度蹲跳器相同的结构。 – ronanmc

我更新了我的答案。 –

它现在有效。我更新了'@ RouteConfig'以使用'[]'和'ROUTER_PROVIDERS'。谢谢。 – ronanmc

角2 - 路由器的实例化过程中的错误 - （路由器出口 - >路由器）

回答

相关问题