Режим LazyLoad angular 8 - PullRequest
Новая
       11

Режим LazyLoad angular 8

0 голосов
/ 07 февраля 2020

Я разработал маршруты с помощью LazyMode в angular 8. Я создаю различные модули (auth, pages и app) и для каждого компонента. html: (auth, pages and app. html) Я ставлю , Я выполняю команду: npm запустить сборку, но когда я загрузил страницу, я не вижу файл чанка, почему? Я забыл что-нибудь сделать?

auth.module.ts: 

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

auth-rout.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 { }

приложение. 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 { }

1 Ответ

0 голосов
/ 07 февраля 2020

я думаю, что я понял, что вы делаете неправильно.

попробуйте это в модуле маршрутизации вашего приложения

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

, если не работай, пожалуйста, сделай стек, и я могу помочь тебе

...