角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 - 路由器的實例化過程中的錯誤 - （路由器出口 - >路由器）

回答

相關問題