Upgrading apps to Angular 2 using ngUpgrade

ngUpgrade를 사용하여 애플리케이션을 angular2로 업그레이드 해봅시다.

2014년 12월 15일. 드디어 angular 2 beta버전이 출시되었습니다. 이제 어느정도 안정화가 되었으니 새롭게 무엇인가를 준비한다면 angular2 버전을 사용 할 때가 된것 같네요. :) 하지만 아직까지 많은 애플리케이션이 angular1으로 작성되어있습니다. 기존 버전으로 작성된 애플리케이션을 어떻게 해야 할까요? 지난번 Tips to Improve AngularJS Performance(AngularJS 성능향상을 위한 11가지팁) 포스팅에서 성능향상을 언급했지만, angular2사용에 대한 아쉬운점들이 있었습니다. 그래서 다른 더 좋은 방법이 있지 않을까 찾아봤는데, angular1을 angular2로 업그레이드 하는데 도움이 되는 좋은글을 발견했습니다. 그냥 혼자만 보고 끝내면 시간은 적게 들겠지만, 여럿이 같이 보면 더 즐거울것 같아서 읽었던 글을 공유 해 봅니다.
ps. 언제나 그렇듯이 그냥 편하게 읽으시라 번역한 글이니, 정확히 이해가 되시지 않으시다면 원문을 읽는것을 추천드립니다.
ps. 몇일 전 까지만 해도 ‘알아둘 사항’ 이라는 단락이 있었는데, 이 글을 포스팅 하기 전 다시 확인해 보니 사라졌네요. :0

알아 둘 사항 : 이 문서에는 알파 상태라 정기적으로 업데이트 할 필요가있는 API를 기반으로 한 콘텐츠가 포함되어 있습니다. 여러분이 나중에 언제든지 이 글을 읽을 수 있게, 가능한 최신의 글을 유지하기 위해 노력했습니다. 마지막 업데이트는 2015년 12월 12일 입니다. (원문에서 이 단락은 이제 사라졌습니다. :0)

angular2가 다가오는 이 시점에, 기존의 angularJS 애플리케이션을 angular2로 업그레이드 하는것은 확실히 흥미로운 주제중의 하나입니다. 오랜시간동안 업그레이드하는 방법은 현시점에서 불명확해 보였습니다. angular2는 여전히 알파상태였고, API는 아직 불안정한 상태였습니다. 이것들은 어떻게 진행해야 하는지, 무엇이 가장 최선의 방법인지, 업그레이드 방법을 ‘추정하기’ 더 힘들게 만들었습니다.

그렇지만 올해 초, angular 팀은 유용한 업그레이드 전략과 두 프레임워크가 동일한 웹 사이트에서 함께 실행되기 위해서 서로작동(interperate) 해야 한다는것에 대해서 공식발표했습니다. 하지만 블로그 포스트는 간략히 훑어 보았을 때, 어떠한 코드도 나타나있지 않았습니다. 설계용 문서는 API를 어떻게 표현할지에 대한 더 구체적인 아이디어를 주기위해 만들어졌습니다.

그동안에 ngUpgrade의 첫번째 구현은 코드로 만들어졌고 이제 그것을 파헤쳐 볼 시간입니다. 이 문서에서는 업그레이드를 준비하기위해 무엇을 할 수 있는지 탐구해 볼 것입니다. 물론, 마지막에는 애플리케이션을 angular2로 업그레이드 하기 위해 ngUpgrade를 사용하는 방법도 알아볼 것입니다.

업그레이드는 왜 해야 할까요? ( Why upgrade? )

사람들은 여러가지 이유로 angular2로 업그레이드를 할 수 없습니다. 그 중 하나는 좋지않은 일이 발생될까 겁이나서 거절하는 경우입니다. 먼저 업그레이드가 필요한 경우에 대해 생각해 봅시다. 물론 angular2는 프레임워크의 차기 주요버전입니다. 그리고 미래에 웹 애플리케이션을 구축 할 때 틀림없이 함께 가고 싶은 버전이 될 것입니다.

하지만, 그것이 기존의 angular1 애플리케이션이 웹의 차세대에서는 더이상 살아남을 만큼 충분하지 않다는것을 의미하지는 않습니다. angular2가 출시됐다고해서 angular1이 즉시 작업을 중지해야 하는것은 아닙니다. 오래되었고 느려져 시대에 뒤떨어진것같은 거대한 웹사이트들도 여전히 존재합니다. 믿기 힘들겠지만, 이러한 웹사이트들 중에는 심지어 10년이 넘어도 여전히 돌아가는 사이트도 존재합니다. 웹의 장점이죠. 웹이 망가지는것을 누구도 원치 않기에 이전 프로그램과 호환이 되는것은 존재하지 않습니다. 그렇죠?

따라서, 프로세스 업그레이드를 살펴보기 전에 왜 업그레이드를 원하는지 스스로 진지하게 물어보고, 지금까지 구축했던 애플리케이션들이 지금 이 시점에 정말로 업그레이드가 필요한지를 생각해 보아야 합니다.

그럼에도 불구하고 업그레이드를 원하는 강력한 주장들이 있습니다. 아래에서 그 중 몇가지를 알아보겠습니다.

  • 더 나은 성능 — angular 2는 빠른 변경 감지 방법, 템플릿 프리컴파일(precompilation), 더 빨라진 부트스트랩 시간, 뷰 캐싱과 프레임워크를 매우 빠르게 만드는 많은 것들을 제공합니다.
  • 서버쪽 렌더링 — angular의 다음 버전은 애플리케이션 레이어와 렌더 레이어 두 부분으로 분리되어 있습니다. 이것이 웹 워커들이나 심지어 서버와 같은 브라우저 이외의 환경에서도 angular를 실행 할 수 있게 해 줍니다.
  • 더 강력한 템플레이팅 — 새로운 템플릿 문법은 여기서 논의된 바와 같이 정적으로 분석이 가능합니다. 그리고 많은 디렉티브를 제거하고 웹 컴포넌트와 다른 엘리먼트들로 더 나은 통합을 합니다.
  • 더 나은 에코시스템 — 물론, 이 글을쓰는 시점에서도 이것은 사실이 아닙니다. 하지만 angular 2의 에코시스템은 앞으로 더 나아지고 더 흥미로워 질 것입니다.

angular1보다 angular2가 더 나은 확실한 이유들은 더 있습니만, 이 글에서는 업그레이드 동기에 대해서 논의하기로 했다는것을 잊지마세요. 그럼 실제 업그레이드를 위해서 미리 준비 할 수 있는 방법에 대해서 얘기 해 볼까요.

angular 2의 변경사항 ( Changes in Angular 2 )

업그레이드를 하기위해서, angular 2가 어떤점에서 다른지 이해 할 필요가 있습니다. 유감스럽게도, 프레임워크 두 버전 사이의 큰 차이를 커버하는 것은 이 글의 범위를 벗어납니다. 하지만, 여러분이 angular2를 완전 처음 접하신다면, angular2 둘러보기를 확인하신 후 시작하세요.

업그레이드에 대해 생각할 때 매우 결정적인 변경사항 목록이 여기에 있습니다.

  • 컴포넌트 (Components) — 컴포넌트는 angular2로 애플리케이션을 만들때 사용되는 새로운 구성요소입니다. 애플리케이션 자체 및 거의 모든 것들이 컴포넌트 입니다.
  • 입/출력 (Inputs / Outputs) — 컴포넌트는 입력과 출력을 통해서 커뮤니케이션합니다. 만약 브라우저에서 실행되고 있다면, 속성과 이벤트같은 요소들 입니다. Angular 2 템플릿 문법의 애매함 제거라는 글에서 어떻게 동작하는지 설명하고 있습니다.
  • 컨텐츠 투영 (Content Projection) — 기본적으로 새로운 트랜스클루전(transclusion)이지만, 웹 컴포넌트 표준과 더 잘 맞습니다.
  • 의존성 주입 (Dependency Injection) — 애플리케이션 전체를 위해 하나의 인젝터를 가지는대신에, angular 2에서는 각각의 컴포넌트들마다 자신의 인젝터를 가집니다. 이에 대한 상세 문서을 참고하세요.

물론, angular2에는 라우팅, 폼, Http 계층 이외에 변경되거나 프레임워크에 새로 추가된 방법들이 더 있습니다.

어떻게 해야 할까요? ( How do we get there? )

Christoph와 함께 thoughtram에서 다수의 리서치를 한 후, 전체 업그레이드 프로세스는 기본적으로 준비와 업그레이드 두 단계로 분류 할 수 있다는것을 알게되었습니다.

준비

현재 우리가 시작 할 수 있는 단계입니다. 나중에 업그레이드 프로세스를 쉽게 만들기 위해 지금 무엇을 할 수 있을까요? 이것은 애플리케이션을 어떻게 구성할 것인가, 어떤 툴을 사용할 것인가, 아니면 어떤 언어로 업그레이드 할 것인가와 같은 몇가지 사항들을 포함합니다.

업그레이드

두 프레임워크를 함께 실행하는 단계입니다. ngUpgrade는 angular1과 angular2의 컴포넌트를 공동으로 이용 가능하도록 동작하게 됩니다. 동일한 웹사이트에 두 프레임워크를 실행하는것은 확실히 적합하지 않으므로, 이 단계의 목적은 가능한 한 적게 그것을 유지해야 한다는점을 꼭 기억하세요.

업그레이드 준비 ( Preparing for upgrade )

실제 업그레이드를 위해 지금 준비 할 수 있는 것에 대해서 이야기 해 봅시다.

기능이나 컴포넌트에 의한 애플리케이션 층

시간이 지나도 여전히 가치있는 방법이 있습니다. 디렉티브들은 app/directives, 서비스들은 app/services, 컨트롤러들은 app/controllers과 같은 프로젝트 구조를 사용하는 애플리케이션을 아직까지 볼 수 있습니다. 여러분들은 아이디어를 가지고 있습니다. 작은 애플리케이션이 완전히 동작할 수 있도록 업그레이드를 하는데는 많은 시간이 걸리지 않습니다. 여러분은 컴포넌트에서 컴포넌트로 업그레이드를 하기를 원 할 수 있습니다. 기능/컴포넌트 보다 타입별로 애플리케이션 레이어를 가지는것은 소스를 추출해서 업그레이드하는것을 힘들게 만듭니다.

아래와 같이 가는것이 좋습니다.

이 구조는 productDetail을 angular2로 업그레이드 한 뒤, 나중에 애플리케이션으로 다시 통합할 수 있도록 합니다. 모든것을 한곳에서 처리하기 때문에, 어떤것들이 productDetail 코드와 관련이 있다는 것을 잊을까 걱정 할 필요가 없습니다.

.factory()대신에 .service()를 사용하세요.

만약 프레임워크 뿐만 아니라 애플리케이션이 쓰여진 언어까지 업그레이드 할 계획이라면, 잠재적으로 서비스 클래스가 될 수 있는 모든 경우에 대해 .factory() 대신 .service()를 사용하는것을 심사숙고 해야 합니다. angular2에서는 서비스는 단지 논리적인 일을 하는 하나의 클래스일 뿐입니다. .service()가 더 잘 맞는 이유에 관한 더 많은 정보는 이 문서를 읽어보세요.

ES2015나 TypeScript로 새로운 컴포넌트를 작성하세요.

이것은 흥미로운 점입니다. 맨 처음 anguar2를 접했을 때, 몇몇 사람들은 갑작스런 클래스와 데코레이터로인해 깜짝 놀랐습니다. (이문서에서 설명 한 것처럼) angular2 앱을 TypeScript로 작성하지 않은 사실에도 불구하고, ES2015는 다음 표준화된 버전입니다. 이것은 어쨌든 조만간에 그것을 사용하게 될 것임을 의미합니다.

현재의 ES2015로 angular를 작성하는 방법에 관한 글을 작성했고, 업그레이드 하기위한 계획을 가지고 있었지만, 컴포넌트를 ES2015나 TypeScript로 정확히 작성해야 했기에 즉시 할 수는 없었습니다.

아무리 그래도, 기존 코드를 ES2015나 TypeScript로 업그레이드 한다는것은 정말이지 이해 할 수 없습니다.

비록 그 작업이 업그레이드를 위한 준비에 논리적인 단계가 될 것으로 보인다 하더라도, angular2로 애플리케이션을 업그레이드 하기 전, 기존의 대형 코드를 먼저 ES2015나 TypeScript로 업그레이드 할 수 있는 방법에는 전혀 도움이 되지 않습니다.

만약 angular2로 업그레이드를 해야만 한다면, 아마 기존의 코드를 건드리지 않고, 컴포넌트로 컴포넌트를 재작성하는것이 더 의미가있습니다. 그러나 물론 이것은 애플리케이션이 얼마나 거대한지에 따라서 달라집니다.

다시 말하지만, 이것은 단지 언어 업그레이드 입니다. 그리고 업그레이드 자체에는 정말 도움이 되지 않습니다. 그러나 그것은 우리와 우리 팀이 그것으로 컴포넌트를 빌딩하는것 같이, 새로운 언어의 기능에 익숙해지는데 도움이 됩니다.

angular1에서 데코레이터 사용하기

물론, TypeScript로 언어를 업그레이드 하고 angular1을 위해 특별히 만들어진 데코레이터를 사용함으로써, 우리 코드를 angular2 코드 처럼 보이게 할 수 있습니다. a1atscript, angular2-now, angular-decorator, ng-classy외에 많은 커뮤니티들이 관련된 프로젝트를 진행하고 있습니다.

그들은 angular1에 의미상 도움이 되는 데코레이터를 추가하는 동일한 문제를 해결하기위해 노력합니다. 하지만 정말 도움이 될까요? 전 그렇게 생각하지 않습니다.

뜻밖에도 우리를 위해 코드를 생성하는 훌륭한 데코레이터를 사용할 수 있기 때문에 개발자의 경험을 향상시킬 수 있습니다. 하지만 애플리케이션을 angular2로 업그레이드 하는데는 도움을 주지는 않습니다. 어떤 프로젝트, ng-forward 같은 경우는 angular1에 정확히 동일한 angular2 문법을 사용할 수 있도록 합니다.

이것은 여러분과 여러분의 팀이 angular1코드를 작성하는동안 angular2 애플리케이션을 작성하는 방법에 익숙해지고 있기 때문에, 일부를 확장하는데 도움이 될 수 있습니다. 하지만 다른한편으로, angular1 체계에 angular2 개념과 문법들을 밀어 넣으면 혼동스러울 수 있습니다. 데코레이터을 사용하여 프로젝트를 시작 할 때, 얼마나 실용적인가를 볼 수 있을것입니다.

업그레이드 전략 ( Upgrade Strategies )

이제 업그레이드 준비를 위해 우리가 무엇을 할 수 있는지를 알게되었습니다. 사용할 수 있는 두가지 업그레이드 전략중, 어느것이 우리에게 더 의미가 있는지 살펴보겠습니다.

기본적으로 두가지 전략이 있습니다.

  • 빅뱅 (Big Bang) — angular2로 전적으로 시작하여 전체 애플리케이션을 한번에 바꾸기
  • 인크리멘탈 (Incremental) — 기존의 애플리케이션을 서비스나 컴포넌트를 한번에 하나씩 업그레이드

어떤 방법을 사용해야 할까요?

이건 정말로 의존적입니다! 애플리케이션이 작은편이라면 빅뱅 재작성하는 방법이 아마도 업그레이드 하는 가장 쉽고 빠른 방법입니다. 애플리케이션이 큰편이고 연속적으로 배포되어야 한다면, 단지 업그레이드만 한 번에 할 수는 없습니다. 단계적으로 컴포넌트, 서비스를 업그레이드 하는 방법이 필요합니다. 이런 상황에서 인크리멘탈(incremental) 업그레이드가 쓰입니다.

결국 마지막에 정말 문제가 되는것은 프로세스를 업그레이드하기 위해 얼마나 많은 시간을 가지고 있는가 하는 점입니다. 많은 개발자들이 어떻게 돌아가는지를 확인하고 이해하기를 원하기 때문에, 여기서는 인크리멘탈(incremental)업그레이드에 초점을 맞추겠습니다.

ngUpgrade를 이용한 업그레이드 (Upgrading using ngUpgrade)

두 프레임워크를 함께 실행하고 컴포넌트들이 상호 정보교환이 가능하게 만들기 위해서, angular 프로젝트는 ngUpgrade 모듈을 함께 제공합니다. 이 모듈은 겉으로 어댑터와 같은 역할을 합니다. 그래서 우리는 실제 두 프레임워크가 함께 동작하고 있다는것을 느낄 수 없습니다.

이렇게 동작하기 위해서 4가지 상호작용(interoperate)이 필요합니다.

  • 의존성 주입 (Dependency Injection) — angular2 서비스를 angular1 컴포넌트로 노출(expose)시킵니다. 그리고 반대도 마찬가지 입니다.
  • 컴포넌트 중첩 (Component Nesting) — angular1 디렉티브는 angular2 컴포넌트로 사용할 수 있습니다. 그리고 angular2 컴포넌트는 angular1의 디렉티브로 사용할 수 있습니다.
  • 컨텐츠 투영 / 트랜스클루전 (Content Projection / Transclusion) — angular1 컴포넌트는 angular2 컴포넌트를 트랜스클루드(transclude) 합니다. 그리고 anguarl2 컴포넌트를 angular1 디렉티브에 투영시킵니다.
  • 변경감지 (Change Detection) — angular2에는 angular1의 스코프 digest와 변경탐지기(change detector)가 이미 내재되어있습니다.

상호운용되는 이 네 가지를 이용하여, 우리는 이미 컴포넌트에서 애플리케이션 컴포넌트로 업그레이드를 시작할 수 있습니다.

라우팅은 도움을 줄 수 있는 또다른 부분이지만, 반드시 필요한것은 아닙니다. 그렇게 때문에 우리는 업그레이드하는 동안 어떤 angular 1 라우팅 시스템을 완전히 유지 할 수 있습니다.

전형적인 업그레이드 프로세스

일반적인 업그레이드 프로세스는 아래와 같습니다.

  • angular2와 업그레이드 모듈을 포함 합니다.
  • 업그레이드 할 컴포넌트를 선택합니다. 그리고 선택한 컴포넌트의 컨트롤러와 템플릿을 angular2 문법으로 바꿉니다. (이제 angular2 컴포넌트 입니다. )
  • angular2 컴포넌트를 angular1 애플리케이션에서 동작하도록 다운그레이드 합니다.
  • 업그레이드 할 서비스를 선택합니다. 이 때 약간의 변경이 요구됩니다. ( 특별히 ES2015에 있어서 )
  • 2단계와 3단계(혹은 4단계까지)를 반복합니다.
  • angular1의 부트스트랩을 angular2 부트스트랩으로 변경합니다.

컴포넌트를 angular2로 업그레이드하기 위해 ngUpgrade를 사용해 봅시다!

ngUpgrade를 사용해 부트스트랩핑 하기

angular1 애플리케이션을 ngUpgrade로 업그레이드 하는일이 가장 먼저 필요합니다. 애플리케이션을 angular2로 업그레이드 할 때는 반드시 최상위 레벨에 angular1 부트스트랩이 항상 있어야 합니다. 이것은 업그레이드가 진행되는 동안 angular2 컴포넌트는 항상 angular1 컴포넌트 내부에서 부트스트랩 됨을 의미합니다.

업그레이드를 원하는 애플리케이션으로 시작해 봅시다.

평범한 예전 angular1 모듈은 일반적으로 ng-app 속성을 사용하여 부트스트랩 됩니다. 하지만 지금부터는 ngUpgrade를 사용하여 부트스트랩을 할 수 있습니다. HTML에 있는 ng-app 속성을 제거하고, 업그레이드 모듈로부터 ngUpgrade 어댑터를 생성합니다. 그리고 모듈 의존성처럼 myApp을 어댑터의 bootstrap()으로 호출합니다.

좋습니다. 이제 애플리케이션은 ngUpgrade를 사용하여 부트스트랩 되었고, angular1 컴포넌트와 angular2 컴포넌트들을 섞어서 사용할 수 있습니다.

angular2 컴포넌트 다운드레이드 (Downgrading Angular 2 compontnts)

첫 번째 컴포넌트를 angular2로 업그레이드 해 보고, angular1 애플리케이션에서 이를 사용해 봅시다. 업그레이드 할 productDetail 디렉티브가 아래에 있습니다.

이것을 angular2로 업그레이드를 하면 아래와 같이 볼 수 있습니다.

참고: 간단하기 때문에 이곳에 정의 했지만, 별도의 파일에 이 컴포넌트를 정의 할 수도 있습니다.

완벽하네요! 하지만 angular2 컴포넌트를 어떻게 angular1 애플리케이션에서 사용할 수 있을까요? 우리가 만들었던 UpgradeAdapter는 downgradeNg2Component() 메소드와 함께 제공됩니다. 이것은 angular2 컴포넌트를 받아서 angular1 디렉티브를 생성합니다. angular1 세계에서 angular2 컴포넌트를 사용해 볼까요.

angular1 컴포넌트 업그레이드 (upgrading Angular1 components)

어떤 컴포넌트를 이미 angular2로 업그레이드 한 경우에도 여전히 그 템플릿에서는 angular1 디렉티브를 사용 할 경우가 있을 수 있습니다. ngUpgrade는 upgradeNg1Component()를 사용하여 업그레이드 한 angular1 디렉티브를 angular2 컴포넌트에서 사용하게 해 줍니다.

아래와 같은 ProductList 컴포넌트를 가지는 애플리케이션의 업그레이드에 대해서 계속해서 이야기 해 봅시다.

<product-list-item>은 아직 angular2로 포팅되지 않은 컴포넌트입니다. 아마도 포팅 할 수 없는 이유가 있을 수도 있습니다. 이 컴포넌트는 업그레이드가 필요한데, 어떻게 해야 할까요? 보시다시피, @Component 메타데이터에는 디렉티브 속성이 있습니다. 이 속성은 컴포넌트의 템플릿에서 사용되는 디렉티브를 정의합니다. 이제 필요한것은 <product-list-item>도 거기에 추가하는 방법입니다.

upgradeNg1Component()는 정확하게 우리가 그 일을 가능하게 합니다. upgradeNg1Component()는 angular1 모듈 어딘가에 등록된 디렉티브의 이름을 사용하고, angular2 컴포넌트로 그것을 업그레이드 합니다. 여기 아래코드 같이 보일꺼예요.

우리가 해야할 일은 ProductList 아이템을 다운그레이드하는 것입니다. 그리고는 바로 사용할 수 있습니다.

angular2 프로바이더 추가 ( Adding Angular 2 Providers )

컴포넌트를 업그레이드하는것은, 아마도 전체 업그레이드 과정중에 가장 중요한 부분입니다. 하지만 가끔씩, 컴포넌트는 두 버전 모두에서 동작하기 위해 필요한 서비스 의존성을 가지고 있습니다. 다행히도, ngUpgrade는 그것을 위한 API를 제공합니다.

이미 angular2로 업그레이드 된 ProductDetail 컴포넌트의 ProductService 의존성에 대해 얘기 해 봅시다.

angular2에서는 컴포넌트의 인젝터를 위해 프로바이더의 환경설정을 추가해야만합니다. 하지만 angular2를 사용해 부트스트랩을 하지 않기 때문에 그렇게 할 방법이 없습니다. ngUpgrade는 이 상황을 해결하기위해 addProvider() 메소드를 사용하여 프로바이더를 추가하도록 해 줍니다.

우리가 필요한것은 이것이 전부랍니다.!

angular1 프로바이더 업그레이드 (Upgrading Angular 1 Providers)

원격서버와 통신하기위해 다른 낮은 레벨의 DataService와 의존관계에 있는 ProductService에 대해 얘기해 볼까요. DataService는 아직 angular2로 업그레이드 되어있진 않지만, 이미 angular1 애플리케이션에 구현되어 있습니다.

보시다시피, DataService 타입을 가지고 있지 않기 때문에, DataService의 프로바이더 토큰을 명시하기 위해서 @Injector를 사용합니다. 이해하기가 힘드시다면, DI in Angular2 문서를 더 읽어보세요.

어쨋든, angular2에는 아직까지 DataService를 위한 프로바이더가 없습니다. upgradeNg1Provier()를 사용하여 그것을 사용할 수 있도록 해 봅시다.

흠! 훨씬 더 낫게 만들 수 있을것 같은데요. angular1 서비스가 이미 클래스로 작성되었다고 가정해 봅시다.

이 클래스는 angular2에서 타입이나 의존성주입을 위한 토큰으로 사용할 수 있습니다. 우리가 해야 할 일은, 그 토큰으로 서비스를 업그레이드 하는 것이 전부입니다.

이제 확실히 이전타입의 어노테이션을 사용하여 그것을 주입할 수 있습니다.

참고 : TypeScript는 메타데이터를 전달하기 위해 적어도 하나의 데코레이터를 필요로 하기 때문에 서비스에 @Injectable()을 추가했습니다. Injecting Services in Services in Angular2 글에서 자세히 알아보세요.

angular2 프로바이더 다운그레이드 ( Downgrading angular 2 providers )

마지막이지만 앞서 말씀 드린것들과 마찬가지로 중요한 사항인데, angular1 컴포넌트에서 angular2 서비스를 사용하는것이 필요 할 수 있습니다. 이를위해 ngUpgrade는 downgradeNg2Provider() 메소드가 제공됩니다.

결론 ( Conclusion )

ngUpgrade는 유용한 API를 많이 제공합니다. 그리고 그것은 정말 angular1에서 angular2로 애플리케이션을 업그레이드 함에있어 아주 큰 성과입니다. AngularConnect에서 업그레이드 워크샵을 가졌었고, 소스 저장소를 공개함으로써 업그레이드 준비에서 부터 지나온 모든 과정을 확인할 수 있게 했습니다. steps 브랜치를 꼭 확인하세요.

이 문서가 좀 더 확실한 전체 업그레이드 이야기를 만들 수 있기를 기대합니다.