Angular 路由懒加载

Question

我收到以下错误

        core.js:6210 
            
           ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/product'
    Error: Cannot match any routes. URL Segment: 'home/product'
        at ApplyRedirects.noMatchError (router.js:2628)
        at CatchSubscriber.selector (router.js:2610)
        at CatchSubscriber.error (catchError.js:27)
        at MapSubscriber._error (Subscriber.js:75)
        at MapSubscriber.error (Subscriber.js:55)
        at MapSubscriber._error (Subscriber.js:75)
        at MapSubscriber.error (Subscriber.js:55)
        at ThrowIfEmptySubscriber._error (Subscriber.js:75)
        at ThrowIfEmptySubscriber.error (Subscriber.js:55)
        at TakeLastSubscriber._error (Subscriber.js:75)
        at resolvePromise (zone-evergreen.js:1213)
        at resolvePromise (zone-evergreen.js:1167)
        at zone-evergreen.js:1279
        at ZoneDelegate.invokeTask (zone-evergreen.js:406)
        at Object.onInvokeTask (core.js:28578)
        at ZoneDelegate.invokeTask (zone-evergreen.js:405)
        at Zone.runTask (zone-evergreen.js:178)
        at drainMicroTaskQueue (zone-evergreen.js:582)
        Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/product'

我正在构建这个 angular 示例来测试路由。

这意味着

appmodule --> homedule --> product1的懒加载

        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        
        import { AppRoutingModule } from './app-routing.module';
        import { AppComponent } from './app.component';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        @NgModule({
          declarations: [
            AppComponent,
          ],
          imports: [
            BrowserModule,
            BrowserAnimationsModule,
            AppRoutingModule,
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

---

        <h1>App Component appcomponent.html</h1>
        <router-outlet></router-outlet>        

---

        import { NgModule } from '@angular/core';
        import { RouterModule, Routes } from '@angular/router';
        import { HomeComponent } from './home/home.component';
        
        const routes: Routes = [
          {path: '', redirectTo: 'home', pathMatch: 'full'},
          {path: 'home', component: HomeComponent}
        ];
        @NgModule({
          declarations: [],
          imports: [RouterModule.forRoot(routes)],
          exports: [RouterModule]
        })
        export class AppRoutingModule { }

---

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        
        import { HomeRoutingModule } from './home-routing.module';
        import { HomeComponent } from './home.component';
        
        
        @NgModule({
          declarations: [
            HomeComponent
          ],
          imports: [
            CommonModule,
            HomeRoutingModule
          ]
        })
        export class HomeModule { }            

---

        <p>home works! homecomponent.html</p>
        

---

        import { NgModule } from '@angular/core';
        import { RouterModule, Routes } from '@angular/router';
        
        const routes: Routes = [
          {path: '', redirectTo: 'product', pathMatch: 'full'},
          {path: 'product', loadChildren: () => import('../feature/product/product.module').then(m => m.ProductModule)}
        ];
        
        @NgModule({
          imports: [RouterModule.forChild(routes)],
          exports: [RouterModule]
        })
        export class HomeRoutingModule { }

---

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        
        import { ProductRoutingModule } from './product-routing.module';
        import { Product1Component } from './product1/product1.component';
        
        
        @NgModule({
          declarations: [
            Product1Component
          ],
          imports: [
            CommonModule,
            ProductRoutingModule
          ]
        })
        export class ProductModule { }

---

        import { NgModule } from '@angular/core';
        import { RouterModule, Routes } from '@angular/router';
        import { Product1Component } from './product1/product1.component';
        
        const routes: Routes = [
          {path: '', component: Product1Component}
        ];
        
        @NgModule({
          imports: [RouterModule.forChild(routes)],
          exports: [RouterModule]
        })
        export class ProductRoutingModule { }
        

---

        <p>product1 works! product1component.html</p>
        

  app/
  app.module.ts
  app.routing.module.ts
  home/
    home.module.ts
    home.routing.module.ts
    homecomponent
      feature
        product.module.ts
        product.routing.module.ts
          product1
            product1component
            product1component.html

这是基本结构，我需要一些建议 app 模块到 home 模块然后我正在为 product1 做产品模块的延迟加载谢谢

Answer 1

在 AppRoutingModule 中将您的路由配置更改为

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'}      
 ];

并在 AppModule 中将 HomeModule 添加到导入部分。

在 HomeRoutingMoule 中将您的路线配置更改为

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product', loadChildren: () =>
  import('../feature/product/product.module').then(m => m.ProductModule)}
];

在 HomeModule 中将 ProductModule 添加到导入部分。