多个路由在 angular 10 个延迟加载模块中不起作用

Question

我有一个主应用程序，在单击菜单时，我正在加载一个新的延迟加载子模块 (productModule)。我想在 productModule 上有多个路由，但它不起作用。谁能帮忙？我试过了 cannot find module in angular Lazy Loading 和 lazy load module inside main component in Angular 10 还有更多。

这是代码

app.component.ts


@Component({
  selector: 'pm-root',
  template: `<div>
                <nav-bar></nav-bar>
                <router-outlet></router-outlet>
                
             </div>`
  
})

和

app-routing.module


const routes: Routes = [
...
...
  {path:'user',loadChildren:()=>import('./profile/UserModule/user.module').then(m=>m.UserModule)},
  {path:'product',loadChildren : () => import('./pluralsightproject/product/product.module').then(mod => mod.ProductModule)}  // <== this is the module
  
  
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

然后在我的产品模块中，默认情况下我正在加载一个页面，其中的产品将列在 table 中，如果我点击一个产品，那么应该显示该产品的详细信息（一个页面，其中显示产品）

product.module.ts


const productRoutes: Routes = [
  { path: 'productsList', component: ProductListComponent}, 
   { path: 'productdetail/:id', component: ProductDetailComponent }  //<= this path is not working
];


@NgModule({
  declarations: [
    ProductListComponent,
    ConvertToSpacePipe,
    StarComponent,
    ProductDetailComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(productRoutes),
    FormsModule,
    //HttpClientModule,
  ],
  providers: []
})

现在是激活路线的代码。

product-list.component

<div class="table-responsive">
    <table class="table table-hover table-dark">
       . . .
 <tbody>
            <tr *ngFor="let product of filteredProducts"  >
                <td><img *ngIf="imageShown" [src]="product.imageUrl" alt={{product.productName}}></td>
                <td>{{product.productName}}</td>
                <td>{{product.productCode | convertToSpace:'-' | uppercase}}</td>
                <td>{{product.releaseDate}}</td>
                <td>{{product.price | currency : 'INR':'symbol'}}</td>
                //****HERE I HAVE PLACED A BUTTON WHICH SHOULD ACTIVATE THE ROUTE*****
                <td><button [routerLink]="['/productdetail',product.productId]" routerLinkActive="router-link-active">click</button></td>
            </tr>
        </tbody>
    </table>
</div>

当我点击按钮获取产品详情时出现以下错误


core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'productdetail/1'
Error: Cannot match any routes. URL Segment: 'productdetail/1'
    at ApplyRedirects.noMatchError (router.js:2270)

我缺少什么？

我的环境详情

Angular CLI: 10.0.4
Node: 12.18.3
OS: win32 x64

Angular: 10.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Answer 1

考虑以下，

当用户访问 /product 时，您正在延迟加载 ProductModule。因此，用户必须访问 /products 才能激活子路由

/product 条路线的所有子路线必须有 /product/path/to/route。对于您的情况，这将是 /product/productdetail/1

要解决此问题，您必须更改路由器 link 以反映此问题

<button [routerLink]="['/product', 'productdetail',product.productId]" routerLinkActive="router-link-active">click</button>

多个路由在 angular 10 个延迟加载模块中不起作用

multiple routes are not working in angular 10 lazy loaded module

typescript

angular

angular10