Angular 4延迟加载路线与任何路线均不匹配

Question

我有一个简单的登录名和主页，其中主页正在延迟加载。 可行，但通往主页子级的路由无效。 我不知道如何解决此问题。 如果将路由声明为路由链接，则该路由有效，但如果通过this.route.navigate（['about']）对其进行调用，则该路由不起作用。

我从调试控制台收到的错误是

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'about'
Error: Cannot match any routes. URL Segment: 'about'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (VM4677 vendor.bundle.js:96886)



//app.module.app
@Component({
  selector: 'app-root',
  templateTemplate: ` <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css'],
  providers: [ ]
})
export class AppComponent implements OnInit, OnDestroy {


  constructor( ) {} // , private chat: ChatService ) { }


  ngOnInit(): void {
  }

  ngOnDestroy() {
  }

}

//app-routing.module.ts
const routes: Routes = [

  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'mainpage', loadChildren: 'app/mainpage/mainpage.module#MainpageModule'  },
  { path: '', redirectTo: '/', pathMatch: 'full' },

];

@NgModule({
  imports: [ RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

//mainpage.routing.ts

const childroutes: Routes = [
  { path: '', redirectTo: 'mainpage', pathMatch: 'full'},
  { path: 'mainpage', component: MainpageComponent  ,
    children: [ {path: 'about', component: AboutComponent} ]
 }

];

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);

const newLocal: NgModule = {
    imports: [RouterModule.forChild(childroutes) ],
    exports: [RouterModule, ],
    declarations: []
};

@NgModule(newLocal)

export class MainRoutingModule { }


//mainpage.component.ts

@Component({
  selector: 'app-main',
  templateTemplate: `<div fxLayout="row">
   <!-- <div fxFlex="25"> <a [routerLink]="['about']"> About</a>
   </div> -->
 <div fxFlex="10"><button  (click)="onClicked()">about</button> </div>
  <div fxFlex="nogrow"> <p>New</p> <router-outlet></router-outlet></div>
</div>`,

})


public onClicked() {
  this.route.navigate(['about']);
}

Answer 1

我没有在您的路线中看到定义的路线，即使它的定义应该是，

public onClicked() {
  this.route.navigate(['mainpage','about']);
}