Question

我正在尝试为我的angular2应用程序制作路由。我见过许多问题，例如this和this，但没有一个问题对我有帮助。

这是我的app.route.ts：

import { provideRouter, RouterConfig } from '@angular/router';
import {FormComponent} from './form.component';
import {AboutComponent} from './about-this.component';

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

export const appRouterProviders = [
  provideRouter(routes)
]

然后这是我的根组件：

import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { Component } from '@angular/core';
import {NavbarComponent} from './shared/navbar.component';
import {appRouterProviders} from './app.routes'


@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives:[NavbarComponent,ROUTER_DIRECTIVES],
  providers: [appRouterProviders]
})

export class AppComponent {
     title = "Here is Root!";
  }

在太阳穴中是（app.component.html）：

<router-outlet></router-outlet>

如您所见，我使用./app.routes作为我的路线提供者。因此，我希望，当我使用http://localhost:4200/home时，它会带来表单组件，但它不会发生。此外，控制台中没有错误。出了什么问题？

更新：我也用main.ts引导我的应用程序：

import { bootstrap }  from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {appRouterProviders } from './app.routes';

bootstrap(AppComponent,[appRouterProviders] );

Answer 1

路由器需要在bootstrap

中提供

bootstrap(AppComponent, [appRouterProviders])

Answer 2

根据上述答案中的评论，我可以尝试一些解决方案......

首先：在package.json文件中更改

"@angular/router": "whatever version you have"

到这个

"@angular/router": "3.0.0-beta.2"

此外，如果您的Package.json文件看起来不像快速启动here，那么我建议将其复制到您的项目中，进行上面提到的更改，并在您的项目上运行npm install项目。然后尝试启动您的应用，看看你得到了什么。

没有RouterOutletMap的提供者！在angular2应用程序中

2 个答案: