Angular 2 Routing-找不到加载“AppComponent”的主要出口答案

【问题标题】：Angular 2 Routing- Cannot find primary outlet to load 'AppComponent'Angular 2 Routing-找不到加载“AppComponent”的主要出口
【发布时间】：2017-10-03 19:19:32
【问题描述】：

我正在尝试创建一个简单的 Angular 应用程序，并在其中创建了一个登录组件。

在成功登录用户需要登陆仪表板页面后，我也创建了一个仪表板组件。

然后我曾尝试使用Angular Navigation创建了一个路由文件

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

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashBoardComponent } from './dash-board/dash-board.component';

export const rotuer: Routes = [
{ path: 'dashBoard', component: DashBoardComponent },
 { path: 'App', component: AppComponent },
// { path: '**', component: PageNotFoundComponent }
 ];
 export const routes: ModuleWithProviders  =RouterModule.forRoot(rotuer);

代码文件的引用已被应用模块所采用

import {routes} from './app.route'

imports: [
   BrowserModule,
  FormsModule,
 HttpModule,
 routes,
// RouterModule.forRoot(appRoutes)

],

现在我在登录组件上有一个登录按钮，点击它我正在调用一个函数

 login() {
     alert(this.user.email);
      alert(this.user.password);
    // this.router.navigate(['/hero']);
      this.router.navigate(['App']);
   }

我可以接收用户电子邮件和密码，但是 this.router.navigate(['App']);或者 this.router.navigate(['DashBoard is throwing error']);

找不到加载“DashBoardComponent”的主要出口

我曾尝试放置在 1.登录 2.仪表板。 3 在两个页面上

但还是 n 无法解决。

【问题讨论】：

请同时显示您的 html 代码
你必须将粘贴到你的基本组件的模板上

标签： angular angular2-routing

【解决方案1】：

您似乎错过了<router-outlet></router-outlet>，它充当占位符并被导航路线指向的模板所取代。

将<router-outlet></router-outlet> 放在您尝试导航到仪表板页面的页面中。它应该可以解决您的问题。

【讨论】：

【解决方案2】：

您必须在必须加载组件的组件模板上粘贴<router-outlet></router-outlet>。

我的 git hub 回购帖子 - https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/app.component.html

【讨论】：