redireccionar - ¿Cómo agregar rutas ngModule como rutas secundarias de otro ngModule en Angular2?

rutas angular 6

Question

Estoy siguiendo este tutorial para tener una arquitectura de mi aplicación.

Para dar más información, consideremos A como appModule, y B es otro módulo principal. Ahora quiero cargar otros módulos ( NgModule que tiene muchas otras rutas) dentro del <router-outlet> B.

¿Cuál es un mejor enfoque para hacer esto?

Esto es lo que he hecho hasta ahora.

-mainBoard (Folder next to app.Module)
    --mainBoard Routes
    --mainBoard Component
    --mainHeader Component
    --mainFooter Component
    --mainSidenav Component

    -Users  (Folder inside mainBoard)
    --User Module
    --User Routes
    --UserList Component
    --UserDetail Component
    --UserSetting Component

    -Departments (Folder inside mainBoard)
    --Department Module
    --Department Routes
    --DepartmentList Component
    --DepartmentDetail Component

-Auth (Folder next to mainBoard folder)
    --Auth Module
    --Auth Component
    --Auth Routes
    -Sign-in (Folder)
    --Sign-in Component
    -Sign-up (Folder)
    --Sign-up Component

-App Module

Tengo 2 módulos principales, mainBoard y Auth. MainBoard tiene un encabezado, sidenav, pie de página y en el centro quiero cargar Usuarios y Departamento usando <router-outlet> .

Quiero cargar localhost/app/users para cargar la lista de localhost/app/users y localhost/app/department para cargar la lista de departamentos.

Mi placa principal.módulo y usuarios.módulo se ven así

// main-board.module.ts
import {MainBoardRouting} from ''./main-board.routes'';

import {UsersModule} from ''./users/users.module'';
import {DepartmentsModule} from ''./departments/departments.module'';

@NgModule({
    imports :[
        MainBoardRouting,
        UsersModule,
        DepartmentsModule
    ],
    declarations : [
        MainBoardComponent,
        MainHeaderComponent,
        MainFooterComponent,
        MainSidenavComponent
    ],
    providers: []
})
export class MainBoardModule{}

// Users.module.ts

import {NgModule} from ''@angular/core'';

import {usersRouting} from ''./users.routes'';
import {UserListComponent} from ''./user-list'';
import {UserDetailComponent} from ''./user-detail'';

@NgModule({
    imports :[
        usersRouting
    ],
    declarations : [
        UserListComponent,
        UserDetailComponent
    ],
    providers: []
})
export class UsersModule{}

// main-board.routes

import { RouterModule,Routes } from ''@angular/router'';

import {  MainBoardComponent  } from ''./main-board.component'';

const MainBoardRoutes: Routes = [{
    path: ''app'',
    component: MainBoardComponent
}];
export const MainBoardRouting = RouterModule.forChild(MainBoardRoutes);

// ruta de los usuarios

import { Routes, RouterModule } from ''@angular/router'';

import { UserListComponent }    from ''./user-list'';
import { UserDetailComponent }  from ''./user-detail'';

export const usersRoutes: Routes = [
  {path: '''', redirectTo: ''app/users'', pathMatch:''full''},
  { path: ''users'',  component: UserListComponent },
  { path: ''user/:id'', component: UserDetailComponent }
];

export const usersRouting = RouterModule.forChild(usersRoutes);

¿Mi enfoque es correcto para tener un NgModule hijo con sus propias rutas o tengo que cambiarlos a componentes simples y tener todas las rutas en las rutas main-board Módulo de la main-board principal?

Answer 1

Como he dicho antes de otros, pero me gustaría ser un poco claro. El uso de un submódulo para dividir las funciones de la aplicación es muy bueno, ya que la aplicación crece, permiten mantener una estructura de código simple.

La mejor manera de administrar este proceso es tener una estructura de carpetas como esta:

src
   - featureA
     - featureA.routes.ts
     - fefatureA.module.ts
     - component1
       - component1.ts
       - [...]
     - component2
       - component2.ts
       - [...]
     - [...]

   - featureB
     - featureB.routes.ts
     - fefatureB.module.ts
     - component1
       - component1.ts
       - [...]
     - component2
       - component2.ts
       - [...]
     - [...]

   - [...]

   - app-routing.module.ts
   - app.module.ts

En cada módulo de características declara las rutas para este módulo particular: archivo feature.routes.ts:

const routerConfig: Routes = [
    {
        path: '''',
        component: Component1
    },
    {
        path: ''other'',
        component: Component2
    }
]

y ellos importan estas rutas en el archivo de módulo de características feature.module.ts:

    import { routerConfig } from "./feature.routes";
        @NgModule({
          imports: [ 
            RouterModule.forChild(routerConfig),
          ],
        })
export class FeatureModule{}

Lo último que debe hacer es importar todas las cosas en su módulo de enrutamiento, la carga diferida es perfecta para el rendimiento de una aplicación típica.

archivo app-routing.module.ts:

import { FeatureAModule } from ''./featureA/featureA.module'';
import { FeatureBModule } from ''./featureB/featureB.module'';
    @NgModule({
      imports: [
        RouterModule.forRoot([
          { path: '''', loadChildren: ()=> require("./featureA/featureA.module")["FeatureAModule"]},
{ path: ''feature-b'', loadChildren: ()=> require("./featureB/featureB.module")["FeatureBModule"]},
        ],  
        { preloadingStrategy: PreloadAllModules}) //Define the loading strategy
      ],
    })
    export class AppRoutingModule {}

Y finalmente, importar el módulo de enrutamiento a su archivo de módulo de aplicación app.module.ts:

import { AppRoutingModule } from ''./app-routing.module'';

@NgModule({
  imports: [
    AppRoutingModule,
  ],
})
export class AppModule {}

Answer 2

Debe usar la propiedad loadChildren en la definición de ruta, en lugar de los hijos en los enrutadores, luego apunte al módulo hijo (ya sea como una cadena delimitada por un "#" o como una función que devuelve el módulo)

Answer 3

Hola, he dado un módulo de enrutamiento de ejemplo para app.module y módulo de características.

el archivo de enrutamiento del módulo de enrutamiento de aplicaciones contiene las rutas principales y el archivo de enrutamiento del módulo de características contiene la raíz de las raíces secundarias. Espero que esto ayude al resultado resultante es / característica / libros

app-routing.module.ts // importar esto en app.module.ts

import {NgModule} from ''@angular/core'';
import {RouterModule, Routes} from ''@angular/router'';

export const routes: Routes = [
  { path: ''feature'', loadChildren: ''app/feature/feature.module#FeatureModule''},
  { path: '''', redirectTo: ''feature'', pathMatch: ''full'' },
];

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

export class AppRoutingModule {
}

feature-routing.module.ts // importar esto en feature.module.ts

import {NgModule} from ''@angular/core'';
import {RouterModule, Routes} from ''@angular/router'';

// ---- components imported----
import { BooksComponent } from ''./books/books.component'';
import { FeatureComponent } from ''./feature.component'';

const featureRoutes: Routes = [

  {
    path: '''',
    component: FeatureComponent,
    children: [
      {path: '''', redirectTo: ''books'', pathMatch: ''full''},
      {path: ''books'', component: BooksComponent},
      {path: ''**'', redirectTo: ''books'', pathMatch: ''full''},
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(featureRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class FeatureRoutingModule {
}

Answer 4

Lo he hecho en mi reciente proyecto. Aquí está la muestra.

app.routing.ts

import { NgModule } from ''@angular/core'';
import { RouterModule } from ''@angular/router'';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '''', loadChildren: ''../home/home.module#HomeModule'' },
        { path: ''settings'', loadChildren: ''../settings/settings.module#SettingsModule'' },
        { path: ''home'', redirectTo: '''', pathMatch: ''full'' }
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {  
}

home.module.ts

//all necessary imports

@NgModule({
imports: [
    CommonModule,
    TranslateModule,
    FormsModule,
    RouterModule.forChild([
        {
            path: '''', component: HomeComponent, canActivate: [SecureGuard]
        }
    ]),
    ViewCountPipeModule
],
declarations: [
    HomeComponent
],
providers: [
    SecureGuard,
    CommonService
]
})
export class HomeModule {
}

settings.module.ts

//all the necessary imports

@NgModule({
imports: [
    CommonModule,
    TranslateModule,
    FormsModule,
    RouterModule.forChild([
        {
            path: '''', component: RouteHolderComponent,
            children: [
                { path: '''', redirectTo: ''settings'', pathMatch: ''full'' },
                { path: ''settings'', component: SettingsComponent },
                { path: ''profile'', loadChildren: ''../profile-settings/profile-settings.module#ProfileSettingsModule'' },
                { path: ''account'', loadChildren: ''../account-settings/account-settings.module#AccountSettingsModule'' }
            ], canActivate: [SecureGuard]
        }
    ]),
    RouteHolderModule
],
declarations: [
    SettingsComponent
],
providers: [
    SecureGuard, SettingsService
]
})
export class SettingsModule {
}

RouteHolderModule exporta RouteHolderComponent que solo tiene una etiqueta <router-outlet></router-outlet> .

Answer 5

Lo que necesitas es loadChildren

child.module.ts

const childRoutes: Routes = [
    {
        path: '''',
        component: ChildComponentA
    },
    {
        path: ''other'',
        component: ChildComponentB
    }
]

@NgModule({
    imports: [
        RouterModule.forChild(childRoutes)
    ]
})
class MyChildModule {}

app.module.ts

const appRoutes: Routes = [
    {
        path: ''children'',
        // If using a function that returns the Module,
        // it will be "eager-loaded"
        loadChildren: () => MyChildModule
        // When using a string, it will be lazy-loaded
        // loadChildren: ''./path/to/child.module#MyChildModule''
    }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ]
})
class AppModule {
}

Answer 6

Su enfoque es correcto. Desea dividir las rutas a sus propios submódulos. Técnicamente, puede mover las rutas a cualquier módulo a medida que se fusionan, pero probablemente será una mala idea a largo plazo.

Plunker con las rutas resultantes https://plnkr.co/edit/Y9ReEwnBZNId48xX1CDR?p=preview

@Component({
  selector: ''users'',
  template: `
    <div>
      <h2>Users</h2>
      <ul><li *ngFor="let user of users">{{user}}</li></ul>
    </div>
  `,
})
export class Users {
  users = ["John", "Joe"];
}

const usersRoutes = [
  {path: ''users'', component: Users}
];
const UsersRoutes = RouterModule.forChild(usersRoutes);


@NgModule({
  imports: [ CommonModule, UsersRoutes ],
  declarations: [ Users ],
  exports: [ Users ]
})
export class UsersModule {}

Answer 7

Su enfoque es correcto. Debe dividir su enrutamiento específico para el módulo, como el módulo de usuario. El enrutamiento relacionado con el módulo de usuario será de gran ayuda ya que el tamaño de la aplicación crece ahora. Creo que debería intentar estas modificaciones.

// archivo de rutas de la placa principal

  import { RouterModule,Routes } from ''@angular/router'';

 import {  MainBoardComponent  } from ''./main-board.component'';

  const MainBoardRoutes: Routes = [{
       path: ''app'',
       component: MainBoardComponent
  }];
 export const MainBoardRouting = 
 RouterModule.forRoot(MainBoardRoutes); // use for root instead of for child 

Answer 8

Su metodología es correcta. En este enfoque, uno necesita importar solo el módulo secundario en el módulo principal , eso es todo. Childmodule se encargará de su propio enrutamiento. Del mismo modo, si tiene módulos anidados, solo los módulos deben importarse en las rutas principales en lugar de declarar muchas rutas en un solo lugar.