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']);
}