LazyLoad 模式 angular 8

Question

我在 angular 8 中使用 LazyMode 開發了路由。我創建了不同的模塊（auth、pages 和 app），並在每個 components.html 中：（auth、pages 和 app.html）我把 . 我執行命令：npm run build 但是當我為頁面充電時我沒有設置塊文件，為什么？ 我忘了做點什么？

auth.module.ts ：

@NgModule({
    declarations: [
        AuthComponent,
        LoginComponent,
        RegisterComponent,
        ForgotPasswordComponent,
        ResetPasswordComponent
    ],
    exports: [],
    imports: [
        FormsModule,
        CommonModule,
        AuthRoutingModule
    ]
})
export class AuthModule { }

auth-routes.modules.ts

const authRoutes: Routes = [
    {
        path: "login", component: LoginComponent, data: { title: "Login" }
    },
    {
        path: "register", component: RegisterComponent, data: { title: "Register" }
    },
    {
        path: "forgot/password", component: ForgotPasswordComponent, data: { title: "Forgot Password" }
    },
    {
        path: "reset/password", component: ResetPasswordComponent, data: { title: "Reset Password" }
    }
];
@NgModule({
   imports: [RouterModule.forChild(authRoutes)],
   exports: [RouterModule]
})
export class AuthRoutingModule { }

pages.module.ts

@NgModule({
    declarations: [
        PagesComponent,
        AllUsersComponent,
        AllUsersComponent,
        TestrouteComponent
    ],
    exports: [],
    imports: [
        PagesRoutingModule,
        AuthModule,
        CommonModule,
        RouterModule
    ]
})

pages.routes.ts

const pagesRoutes: Routes = [
    {
        path: "users", component: AllUsersComponent, data: { title: "Users" }
    },
    {
        path: "orders", component: AllOrdersComponent, data: { title: "Orders" }
    },
    {
        path: "protect", component: TestrouteComponent, data: { title: "Protect" }, canActivate: [AuthGuard]
    }
];
@NgModule({
    imports: [RouterModule.forChild(pagesRoutes)],
    exports: [RouterModule]
})
export class PagesRoutingModule { }

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
     BrowserModule,
     CommonModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     AppRoutingModule,
     AuthModule,
     PagesModule,
     ServiceModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: './pages/auth/auth.module#AuthModule'
  },
  {
    path: '', component: PagesComponent, loadChildren: '../app/pages/pages.module.ts#PagesModule'
  },
];

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

Answer 1

我想我看到你做錯了什么。

在你的應用路由模塊上試試這個

app-routing.module.ts

 const routes: Routes = [ { path: '/c', loadChildren: './pages/auth/auth.module#AuthModule' }, { path: '/p',loadChildren:'../app/pages/pages.module#PagesModule' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

現在您的 URL 將是https://yoursite.com/c/componentsFromAuthModule和https://yoursite.com/p/componentsFromPageModule

如果不起作用，請進行一次stackblitz，我可以幫助您