原始例外：没有路由器的提供商

Question

我正在尝试使用Angular 2的Component路由器。我已经使用pre-exisitng angular 1应用程序引导了角度2应用程序。这是我的代码：

main.ts

import { upgradeAdapter } from './upgrade-adapter';
import { ResAppComponent } from './resApp.component';
import { appRouterProviders } from './app.routes';

angular.module('utdApp').directive('appComponent', upgradeAdapter.downgradeNg2Component(ResAppComponent));

upgradeAdapter.bootstrap(document.body,['utdApp'],ResAppComponent,[appRouterProviders]);

resApp.component.ts

import { Component } from '@angular/core';
import { DisclosureComponent } from './disclosure.component';
import {ROUTER_DIRECTIVES} from '@angular/router'

@Component({
selector: 'app-component',
template: `
<h1>My angular app</h1>
<nav>
<my-app-new></my-app-new>
<a routerLink="/route1" routerLinkActive="active">Route</a>

<router-outlet></router-outlet>
</nav>
`,
directives: [ROUTER_DIRECTIVES],
providers:[DisclosureComponent]

}) 

export class ResAppComponent{}

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import { DisclosureComponent } from './disclosure.component';

const routes:RouterConfig = [

{
    path: 'route1',
    component: DisclosureComponent,
}
];


export const appRouterProviders = [
provideRouter(routes)
]; 

disclosure.component.ts

 import { Component } from '@angular/core';
 import { ROUTER_DIRECTIVES, provideRouter } from '@angular/router';


@Component({
selector:'my-app-new',
template:`<h1>{{title}}</h1>`,
directives:[ROUTER_DIRECTIVES],

providers:[provideRouter]

})

export class DisclosureComponent
{
title="Success"

}

我的错误是这样的：

我似乎无法找到问题所在。关于angular2的组件路由器没有太多可用的信息。

Answer 1

需要在bootstrap(AppComponent, [appRouterProviders])而不是根组件中提供新路由器。

providers:[provideRouter]

应从@Component()

的DisclosureElement中删除