아이오닉프레임워크 3 기본 앱 빌드 실패시 추가 설정하기

ionicframework의 CLI를 설치한 후 바로 production 빌드를 하면 ngc 스크립트 단계에서 빌드 실패 오류가 납니다. verbose 옵션으로 내용을 확인하면 아래 내용을 볼 수 있습니다.

npm install -g ionic cordova # ionic, cordova 설치 
ionic start myApp tabs # tab 기반 앱 만들기 
cd myApp 
ionic cordova build android --prod --verbose # 프로덕션 빌드

위 명령어가 순서대로 실행되어 빌드가 진행되면 아래 단계에서 멈춥니다.

[23:27:34]  typescript: Users/<USERNAME>/node_modules/@types/graphql/subscription/subscribe.d.ts, line: 17 
            Cannot find name 'AsyncIterator'.

L16:    subscribeFieldResolver?: GraphQLFieldResolver<any, any>, 
      L17:  ): Promise<AsyncIterator<ExecutionResult> | ExecutionResult>;

Cannot find name 'AsyncIterable'.

[23:27:34]  typescript: Users/<USERNAME>/node_modules/@types/graphql/subscription/subscribe.d.ts, line: 29 
      L28:    fieldResolver?: GraphQLFieldResolver<any, any>, 
      L29:  ): Promise<AsyncIterable<any>>;

[23:27:34]  ionic-app-script task: "build" 
[23:27:34]  Error: The Angular AoT build failed. See the issues above 
Error: The Angular AoT build failed. See the issues above 
    at /Users/<USERNAME>/<APP_PATH>/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:232:55 
    at step (/Users/<USERNAME>/<APP_PATH>/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23) 
    at Object.next (/Users/<USERNAME>/<APP_PATH>/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53) 
    at fulfilled (/Users/<USERNAME>/<APP_PATH>/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58) 
[ERROR] An error occurred while running subprocess ionic-app-scripts.

AsyncIterator를 TypeScript를 이용한 트랜스파일 시 찾을 수 없다는 에러입니다.

tsconfig.json 파일을 열어 아래 내용을 추가해줍니다.

{ 
  "compilerOptions": { 
    "allowSyntheticDefaultImports": true, 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
      "dom", 
      "es2015", 
      "esnext" // <- 추가하세요 
    ], 
    "module": "es2015", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "target": "es5" 
  }, 
  "include": [ 
    "src/**/*.ts" 
  ], 
  "exclude": [ 
    "node_modules", 
    "src/**/*.spec.ts", 
    "src/**/__tests__/*.ts" 
  ], 
  "compileOnSave": false, 
  "atom": { 
    "rewriteTsconfig": false 
  } 
}

이제 --prod 옵션을 이용해 빌드를 할 수 있습니다.