【Ionic】lazyLoadのルーティング書き方メモ


フォルダ構成

src
┗ app
 ┣ core
 ┣ features
 ┃ ┣ homes
 ┃ ┃ ┣ components
 ┃ ┃ ┣ home
 ┃ ┃ ┃ ┗ home.page.html/scss/spec.ts/ts
 ┃ ┃ ┣ homes-routing.module.ts
 ┃ ┃ ┣ homes.module.ts
 ┃ ┃ ┣ homes.services.spec.ts
 ┃ ┃ ┗ homes.services.ts
 ┃ ┗ products
 ┃  ┣ components
 ┃  ┣ directives
 ┃  ┣ product-new
 ┃  ┃ ┗ product-new.page.html/scss/spec.ts/ts
 ┃  ┣ product-edit
 ┃  ┃ ┗ product-edit.page.html/scss/spec.ts/ts
 ┃  ┣ product-view
 ┃  ┃ ┗ product-view.page.html/scss/spec.ts/ts
 ┃  ┣ product-list
 ┃  ┃ ┗ product-list.page.html/scss/spec.ts/ts
 ┃  ┣ pipes
 ┃  ┣ products-routing.module.ts
 ┃  ┣ products.module.ts
 ┃  ┣ products.services.spec.ts
 ┃  ┣ products.services.ts
 ┃  ┗ store
 ┣ shared
 ┃ ┣ components
 ┃ ┣ directives
 ┃ ┣ modals
 ┃ ┣ pipes
 ┃ ┣ services
 ┃ ┣ store
 ┃ ┗ shared.module.ts
 ┣ app-routing.module.ts
 ┣ app.component.html
 ┣ app.component.scss
 ┣ app.component.spec.ts
 ┣ app.component.ts
 ┗ app.module.ts

AppRoutingModule

app-routing.module.ts
import { NgModule } from "@angular/core";
import { PreloadAllModules, RouterModule, Routes } from "@angular/router";

const routes: Routes = [
    {
        path: "",
        loadChildren: () =>
            import("./features/homes/homes.module").then((m) => m.HomesModule)
    },
    {
        path: "product",
        loadChildren: () =>
            import(
                "./features/products/products.module"
            ).then((m) => m.ProductsModule)
    }
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

ProductsRoutingModule

products-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProductNewPage } from "./product-new/product-new.page";
import { ProductEditPage } from "./product-edit/product-edit.page";
import { ProductViewPage } from "./product-view/product-view.page";
import { ProductListPage } from "./product-list/product-list.page";

const routes: Routes = [
    {
        path: "new",
        component: ProductNewPage
    },
    {
        path: "edit",
        component: ProductEditPage
    },
    {
        path: "view",
        component: ProductViewPage
    },
    {
        path: "list",
        component: ProductListPage
    }
];

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

ProductsModule

products.module.ts
import { NgModule } from "@angular/core";
import { SharedModule } from "src/app/shared/shared.module";
import { ProductsRoutingModule } from "./products-routing.module";
import { ProductNewPage } from "./product-new/puroduct-new.page";
import { ProductEditPage } from "./product-edit/puroduct-edit.page";
import { ProductViewPage } from "./product-view/puroduct-view.page";
import { ProductListPage } from "./product-list/puroduct-list.page";

@NgModule({
    imports: [SharedModule, ProductsRoutingModule],
    declarations: [
        ProductNewPage,
        ProductEditPage,
        ProductViewPage,
        ProductListPage
    ]
})
export class ProductsModule {}

呼び方

hoge.page.ts
toProductNew(): void {
    // products: AppRoutingModuleで定義したpath
    // product-new: ProductsRoutingModuleで定義したpath
    this.router.navigateByUrl("/products/product-new");
}