Angular2路由器:错误:找不到要加载的主出口';InboxComponent';
我创建了一个简单的路由应用程序。 链接“http://localhost:4200”和“http://localhost:4200/mail”运行良好 但当我尝试打开链接“http://localhost:4200/mail/inbox”时,我得到一个错误:“找不到加载“InboxComponent”的主出口” 错误的原因是什么?如何修复 以下是我的*.ts文件: 应用程序模块.ts:Angular2路由器:错误:找不到要加载的主出口';InboxComponent';,angular,typescript,angular2-routing,angular2-router,Angular,Typescript,Angular2 Routing,Angular2 Router,我创建了一个简单的路由应用程序。 链接“http://localhost:4200”和“http://localhost:4200/mail”运行良好 但当我尝试打开链接“http://localhost:4200/mail/inbox”时,我得到一个错误:“找不到加载“InboxComponent”的主出口” 错误的原因是什么?如何修复 以下是我的*.ts文件: 应用程序模块.ts: import { BrowserModule } from '@angular/platform-browse
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 { }
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!';
}
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() { }
}
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() { }
}
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() {
}
}
应用程序组件.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 { }
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!';
}
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() { }
}
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() { }
}
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() {
}
}
从'@angular/core'导入{Component};
@组成部分({
选择器:'应用程序根',
模板:`
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
title='appworks!';
}
文件夹.component.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 { }
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!';
}
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() { }
}
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() { }
}
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() {
}
}
从'@angular/core'导入{Component};
@组成部分({
选择器:“应用程序文件夹”,
模板:`
- 收件箱
`,
样式URL:['./folders.component.css']
})
导出类文件夹组件{
文件夹:任何[];
构造函数(){}
}
邮件列表.component.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 { }
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!';
}
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() { }
}
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() { }
}
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() {
}
}
从'@angular/core'导入{Component};
@组成部分({
选择器:“应用程序邮件列表”,
模板:`
邮件列表有效!
`,
样式URL:['./mail list.component.css']
})
导出类MailListComponent{
构造函数(){}
}
收件箱.component.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 { }
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!';
}
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() { }
}
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() { }
}
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() {
}
}
从'@angular/core'导入{Component,OnInit};
@组成部分({
选择器:“应用程序收件箱”,
模板:`
收件箱工作!
`,
样式URL:['./inbox.component.css']
})
导出类InboxComponent实现OnInit{
构造函数(){}
恩戈尼尼特(){
}
}
您的MailListComponent
也需要一个
,因为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() { }
}
@组件({
选择器:“应用程序邮件列表”,
模板:`
邮件列表有效!
`,
样式URL:['./mail list.component.css']
})
导出类MailListComponent{
构造函数(){}
}
但是,如果要在同一插座内呈现
InboxComponent
,则不应将其作为子级添加如果要避免添加
,另一种方法是将定义路由的方式更改为以下方式:
const routes = [
{ path: '',
children: [
{
path: '',
component: MailListComponent
}
]
},
{ path: 'mail',
children: [
{
path: '',
component: MailListComponent
},
{
path: 'inbox',
component: InboxComponent
}
]
}
];
这将允许您使用与上述相同的
托管新组件非常感谢!这是众多真正帮助我的答案中唯一的一个。但是,我不知道Angular是如何确定组件是子组件的(我没有像作者那样的子路由,出于某种原因,Angular仍然认为它是子组件)。您知道在哪里可以找到此关系的配置吗?您确实有一个子路由,因为收件箱
位于邮件
:)的子项
数组中,可能是