【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");
}