아이오닉 (Ionic) 컴포넌트 모듈(module) 만들기

Ionic에서 새로운 컴포넌트를 만들 때 ionic cli가 있다면 다음의 커맨드로 쉽게 만들 수 있다.

ionic generate component example

 

그러면 다음과 같은 파일이 새로운 상위 폴더와 함께 만들어진다.

example/

    example-routing.module.ts

    example.page.html

     example.page.scss

     example.page.spec.ts

     example.page.ts

 

 

 

하지만 lazy loading 할 때  import 할 module은 생성되지 않아서 직접 모듈 파일을 만들어 줘야 한다.

 

위의 폴더에 동일한 컴포넌트 이름을 붙인 모듈 파일을 만들어 준다.

example.module.ts

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

import { ExamplePageRoutingModule } from './example-routing.module';

import { ExamplePage } from './example.page';

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        ExamplePageRoutingModule,
    ],
    declarations: [ExamplePage],
})
export class ExamplePageModule {}

 

보통 앵귤러 모듈과 다른 점은 IonicModule을 불러온 다는 점이다.

 

 

이제 이 모듈을 app-routing.module.ts 파일에서 불러올 수 있다!

const routes: Routes = [
  {
    path: 'example',
    loadChildren: () => import('./example/example.module').then( m => m.ExamplePageModule)
  },
];