LazyLoad 模式角度 8答案

【问题标题】：LazyLoad Mode angular 8LazyLoad 模式角度 8
【发布时间】：2020-05-23 19:39:36
【问题描述】：

我在 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 { }

【问题讨论】：

当我向页面收费时，我没有看到块文件，为什么？ -- 你能详细说明一下吗？

标签： angular module lazy-loading router

【解决方案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，我可以帮助你

【讨论】：