Angular 4 Lazy Loading Route不匹配任何路线

时间:2017-11-23 02:34:42

标签: angular routes

我有一个简单的登录和主页,其中主页正在延迟加载。这是有效的,但路由到主页的子节点不起作用。我对如何解决这个问题很感兴趣。如果路由被声明为routelink它可以工作,但如果通过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']);
}

0 个答案:

没有答案