无法在Angular 2中设置路线

时间:2016-10-30 05:55:34

标签: angular angular-routing

通过以下步骤在官方网站上实现路由我已经为我的新ng2应用程序设置了一些路由,但我无法使其正常工作。

我的路线档案。

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { SchoolComponent } from './school/school.component';
import { AdminComponent } from './admin/admin.component';
import { HomeComponent } from './home/home.component';

// Route Configuration
export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'users', component: UserComponent },
    { path: 'schools', component: SchoolComponent },
    { path: 'admins', component: AdminComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

模块文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { SchoolComponent } from './school/school.component';
import { AdminComponent } from './admin/admin.component';
import { HomeComponent } from './home/home.component';
import { routing } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    SchoolComponent,
    AdminComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }

当我尝试访问路由时,我在控制台中收到了这些错误

    error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'UserComponent'
Error: Cannot find primary outlet to load 'UserComponent'

我无法找出我做错了什么。任何帮助将不胜感激。感谢

1 个答案:

答案 0 :(得分:2)

无法找到主要出口意味着您尚未将 router-outlet 添加到 HTML 。您只需将其添加到 HTML 中,就像这样,

<router-outlet></router-outlet>