[Ionic] PWA 설정 시 오류 해결

안녕하세요. 오늘은 Ionic으로 PWA 방식을 설정 추가시 오류 발생 해결방법을 공유하려고합니다.

ng add @angular/pwa 를 사용하여 PWA를 추가하는데 오류가 "Bootstrap call not found"라고 뜬다면 아래와 같이 해결하시면 됩니다. 

1. src/main.ts수정 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

위의 코드로 수정합니다. 단, 기존의 소스는 복사를 해두세요.(나중에 원복 예정입니다.)

2. app/app.module.ts 생성

import {NgModule} from '@angular/core';


@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [
  ],
  bootstrap: []
})
export class AppModule { }

위와같이 app.module.ts를 app폴더 아래에 생성 해주세요.

3. ng add @angular/pwa 재실행

4. src/main.ts 원복 및 코드 추가

import { enableProdMode, importProvidersFrom,isDevMode } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';

importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      // Register the ServiceWorker as soon as the application is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })),

기존의 main.ts 파일로 복원뒤 추가 변경된 app.module.ts 파일에 서비스 워커 추가 부분을 추가 넣어 주시면 됩니다. 

5.ionic serve

실행하여 정상적으로 동작하는지 확인 하시면 됩니다.