Angular 5.1 & CLI 1.6 릴리즈

스키머(schemr)
Dec 10, 2017 · 5 min read

Angular 5.1.0 버전과 Angular CLI 1.6.0 정식 버전이 릴리즈 되었습니다. 그리고 Angular Material과 CDK 도 첫번째 정식버전이 릴리즈 되었습니다.(2017.12.7)

각 릴리즈 내용에 대해서 간단히 정리했습니다.

Image for post
Image for post
angular.io 공식 홈페이지

Angular 5.1.0

animation 과 service-worker 에 대한 버그픽스가 릴리즈 되었습니다.(CHANGELOG)

  • animations: ensure DOM is cleaned up after multiple @trigger leave animations finish
  • service-worker: initialize in browser only
  • service-worker: esm2015 points to wrong path

Angular CLI 1.6.0

Service Worker / Universal / App Shell 지원이 추가되었습니다.

Service Worker

Angular 5.0.0 에서 추가된 Service Worker 를 지원합니다.

ng new <project-name> --service-worker

Angular Sevice Worker의 자세한 내용은 공식문서를 참고하세요.

Universal

서버사이드 렌더링을 위한 Angular Universal 명령어가 추가되었습니다.

ng generate universal <name>ng build --app=<name>

generate 실행시 자동으로 package.json, .angular-cli.json, main.ts, app.module.ts 파일에 Universal 을 위한 코드가 업데이트 되며, app.server.module.ts, main.server.ts, tsconfig.server.json 파일이 생성됩니다.

Image for post
Image for post
Angular CLI Universal

기존에 필요했던 과정들중 일부를 자동으로 처리해줍니다. (Angular Universal Integration, Step 4 부터 시작하면 됩니다.)

App Shell

App Shell 은 인터페이스를 구성하는 최소한의 HTML, CSS, JS 를 의미하며, 어플리케이션의 초기 구동 성능을 향상시켜 사용자에게 좋은 경험을 제공합니다. App Shell 은 라우터가 필수입니다.

ng new <project-name> --routingng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

자세한 내용은 다음 링크를 참고하세요.

Angular Material & CDK

Angular Material 은 2.0.0 알파버전을 시작으로 Sem Ver 정책에 맞춰서 첫 정식버전이 5.0.0 으로 릴리즈 되었습니다. Angular CDK(Component Dev Kit) 역시 5.0.0 정식버전으로 재사용 가능한 컴포넌트를 활용할 수 있습니다.

npm install --save @angular/material @angular/cdk

설치 및 사용에 관해서는 공식 문서를 참고해주세요.

에러 메세지의 변경

공식블로그에서 제시한 예시를 살펴보면 템플릿을 함수의 호출을 통해서 생성하려고 할때 에러가 발생하는데 발생한 위치와 내용을 더 쉽게 확인할 수 있습니다.

// components.ts@Component({  
template: genTemplate()
})
export class MyComponent {}

기존 에러 메시지

Error encountered resolving symbol values statically. Calling function ‘genTemplate’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

변경된 에러 메시지

component.ts(9,16): Error during template compile of 'MyComponent'.
Function calls are not supported in decorators but 'genTemplate' was called.

TypeScript 2.5 지원

Angular 5 버전에서는 기본적으로 TypeScript 2.4 를 지원하고 있으며 선택적으로 2.5 버전을 사용할 수 있습니다.

npm install typescript@'~2.5.3'

2.6버전에 대해서도 차후 마이너 릴리즈를 통해서 지원 예정이라고 합니다.

이번 릴리즈에 대한 내용은 Angular Blog 에 자세히 포스팅 되어 있습니다.

Angular Blog : Angular 5.1 & More Now Available

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store