【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");
}
Author And Source
この問題について(【Ionic】lazyLoadのルーティング書き方メモ), 我々は、より多くの情報をここで見つけました https://qiita.com/pg_yamaton/items/8462b5475438eebd3cb9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .