[IONIC4] 라우팅 라우팅 정보

[young chol seo]

https://www.joshmorony.com/using-angular-routing-with-ionic-4/

Why Switch to Angular Routing in Ionic?

As I mentioned, push/pop navigation does still exist in Ionic, but it is advisable to switch to Angular routing if you are building an Ionic/Angular application.

Aside from the potential future-proofing aspect of switching to Angular routing, there are a couple of big reasons to switch to it as soon as you upgrade to Ionic 4.x:

• The @IonicPage decorator has been removed and it is no longer possible to enable lazy loading without Angular routing
• If you are developing a PWA, the browser-based navigation approach is much simpler

Lazy loading is the big ticket item here. If you are unfamiliar with lazy loading the basic idea is that it breaks your application down into smaller chunks, and only loads what is necessary at the time. When your application is first loaded, only the components that are necessary to display the first screen need to be loaded.

With lazy loading, your application can boot much faster because it doesn’t need to load much – you could have a huge application, with 50 pages, but it could still load just as fast as an application with just 2 pages. Without lazy loading, you need to load the entire application upfront before anything can be done.

With smaller applications, it is not that much of a big deal, but it is critical for larger applications. There is no harm in using lazy loading, so I would encourage everybody to use it by default (and I think that it will be set up by default in the Ionic 4.x starter templates).

Lazy Loading with Angular Routing in Ionic

Lazy loading with Angular routes is not too dissimilar to regular routing. However, your routes would look like this instead:

const routes: Routes = [
  { path: 'login', loadChildren: './pages/login/login.module#LoginModule' },
  { path: 'home', loadChildren: './pages/home/home.module#HomeModule' },
  { path: 'detail/:id', loadChildren: './pages/detail/detail.module#DetailModule' },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

Instead of supplying a component for the route, we supply a loadChildren property. Since we are not loading everything up front, this property is essentially saying “go to this file to determine what components need to be loaded”. We link to the module file for the page just like we did with lazy loading with @IonicPage in Ionic 3.x, and we also need to supply the name of the module class by appending it to the end with a #.

If we use the home route as an example, the loadChildren property is:

'./pages/home/home.module#HomeModule'

The router knows that it needs to open the home.module.ts file, and look for the HomeModule. That file might look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage],
  entryComponents: [],
  bootstrap: [HomePage],
})
export class HomeModule {}

NOTE: If you are using lazy loading, you should make sure that you are not also declaring these pages in your root module file (app.module.ts).

This specifies all of the dependencies required for this particular route, and then it also supplies its own HomePageRoutingModule to define any additional routes. That file might look like this:

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

import { HomePage } from './home.page';

const routes: Routes = [
  { path: '', component: HomePage }
];

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

In this case, we just want the HomePage loaded when we hit the /home route, so we supply the default route with an empty path (and this route will load the HomePage component). If you wanted to, you could also add additional routes in the HomePageRoutingModule. If you were to define a route with a path of something in this file, the user could then activate that route by going to /home/something, and you could use that to load a different component.

With this setup, we can make it so that Angular only loads the directives/components that we require for a particular route, rather than all of the directives/components for our entire application. The set up might seem a bit convoluted, but like with lazy loading in Ionic 3, it’s all pretty much the same for every page, and it will all likely be set up by default, so you don’t really need to think too much about it.

Summary

In my opinion, this is the one “scary” looking change in Ionic 4.x, but I don’t think that it is too much of a mental leap from the old style of navigation to this. Although you do not have to use this style of routing, I would recommend that you do.

If you are creating a new Ionic 4 application you will find that most of this stuff is already set up for you. You will have default routes set up when you generate a new application, and when you generate new pages using ionic g page it will also automatically add additional routes to your app-routing file for you (although you might want to modify them a little).