Маршрутизатор Angular2: ошибка: не удается найти основной выход для загрузки «InboxComponent»

Я создал простое приложение с маршрутизацией. Ссылки "http://localhost:4200" и "http://localhost:4200/mail" работают хорошо,

но когда я пытаюсь открыть ссылку "http://localhost:4200/mail/inbox", я получаю сообщение об ошибке: "Не удается найти основной выход для загрузки "InboxComponent"".

Что вызывает ошибку и как ее исправить?

Вот мои файлы *.ts:

app.module.ts :

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

import { AppComponent } from './app.component';
import { MailListComponent } from './components/mail-list/mail-list.component';
import { FoldersComponent } from './components/folders/folders.component';
import { InboxComponent } from './components/inbox/inbox.component';

const routes = [
  { path: '',
    component: MailListComponent
   },

  { path: 'mail', component: MailListComponent,
      children: [
        {path: 'inbox', component: InboxComponent}
      ]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    MailListComponent,
    FoldersComponent,
    InboxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-folders></app-folders>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

folders.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-folders',
  template: `
    <aside class="folders">
      <ul>
        <li><a routerLink="mail/inbox">Inbox</a></li>
      </ul>
    </aside>
  `,
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent {
  folders: any[];

  constructor() { }

}

mail-list.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-mail-list',
  template: `
    <p>
      Mail list works!
    </p>
  `,
  styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {

  constructor() { }

}

inbox.component.ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-inbox',
  template: `
    <p>
      inbox works!
    </p>
  `,
  styleUrls: ['./inbox.component.css']
})
export class InboxComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

typescript angular angular2-routing angular2-router
person Zurab-D    schedule 25.01.2017    source источник
comment
Возможный дубликат ошибки маршрутизатора Angular2: не удается найти основной выход для загрузить «Домашнюю страницу»   -  person ishandutta2007    schedule 07.08.2017

Ответы (2)


arrow_upward
23
arrow_downward

Вашему MailListComponent также нужен <router-outlet>, потому что InboxComponent определен как дочерний в конфигурации вашего маршрутизатора:

@Component({
  selector: 'app-mail-list',
  template: `
    <p>
      Mail list works!
    </p>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {

  constructor() { }

}

Однако, если вы хотите отобразить InboxComponent внутри одного и того же выхода, вам не следует добавлять его как дочерний элемент.

person Poul Kruijt    schedule 25.01.2017
comment
Большое спасибо! Это единственный ответ из многих, который действительно помог мне. Однако я понятия не имею, как Angular определяет, что компонент является дочерним (у меня нет дочернего маршрута, как у автора, и все же Angular почему-то считает, что это дочерний компонент). Любые идеи, где я могу найти конфигурацию этих отношений? - person Ivan Yurchenko; 08.02.2017
comment
У вас есть дочерний маршрут, потому что inbox находится внутри массива children mail :) - person Poul Kruijt; 02.06.2017

arrow_upward
5
arrow_downward

Другой способ, если вы хотите избежать добавления <router-outlet></router-outlet>, состоит в том, чтобы изменить способ определения маршрутов следующим образом:

const routes = [
  { path: '',
    children: [
      {
        path: '',
        component: MailListComponent
      }
    ]
  },
  { path: 'mail', 
    children: [
      {
        path: '',
        component: MailListComponent
      },
      {
        path: 'inbox', 
        component: InboxComponent
      }
    ]
  }
];

Это позволит вам использовать тот же <router-outlet></router-outlet>, что и выше, для размещения нового компонента.

person hasanain    schedule 09.02.2018