LazyLoad Mode角度8

Question

我通过在角度8中使用LazyMode开发了路线。我创建了不同的模块（身份验证，页面和应用程序）以及每个component.html：（身份验证，页面和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 { }

现在您的网址将为https://yoursite.com/c/componentsFromAuthModule和https://yoursite.com/p/componentsFromPageModule

如果不起作用，请进行快速堆叠，我可以帮助您