- Angular Library - medium: https://medium.com/frontend-developers/angular-library-3aa8029c2318

1. Routing
이상훈
18.10.27
2018.10.27

2. 자신이 제작한 라이브러리를 npm 저장소에 퍼
블리싱하고 다른 프로젝트에서 npm install을 통
해 해당 라이브러리를 사용 할 수 있도록 하는 방
법에 대해 알아본다.
들어가기에 앞서..

3. Angular CLI 6 버전부터 Angular CLI의 빌드 시
스템에 ng-packagr라는 라이브러리를 연결하여
이를 구현할 수 있는 기능을 지원한다.
들어가기에 앞서..
ng-packagr: Angular 라이브러리 코드를 다른 모듈에서 import하여 사용
할 수 있도록 Angular Package Format으로 변경해주는 라이브러리

4. ng generate library lib-name
라이브러리 스켈레톤 코드 추가
projects/lib-name 하위에 라이브러리 스켈레
톤 코드 생성
NgModule 안에 컴포넌트나 서비스 등이 있
는 기존 Angular 어플리케이션과 동일한 구조
라이브러리 생성

5. angular.json에 프로젝트 추가
projects 속성에 lib-name가 추가
package.json에 의존성 추가
ng-packagr를 포함한 라이브러리를 빌드 할
수 있도록 하는 몇가지 의존성이 추가
tsconfig.json에 빌드 경로 추가
빌드 결과 경로가 추가
라이브러리 생성

6. Angular CLI를 통해 라이브러리를 빌드하거나 테스트, 린
트 등을 수행할 수 있다.
ng build lib-name
ng test lib-name
ng lint lib-name
라이브러리 빌드

7. 일반적으로 라이브러리가 어떤 메커니즘에 의해 사용할
수 있었을까?
npm 저장소에 있는 라이브러리를 사용하려면 다음과 같
은 단계가 있다.
npm install lib-name을 통해 해당 라이브러리를 설
치하여 node_modules폴더에 넣음
app에서 import {something} from ‘lib-name’의 방
식으로 import
App에서 라이브러리 사용

8. 이 후에 Angular CLI는 import된 라이브러리를 찾기 위해 먼저 tsconfig에
명시된 경로에서 검색을 한 후 그 다음으로 node_modules에서 찾는다.
이 때, 라이브러리를 빌드하면 그 결과 파일은 node_modules에 들어 가
지 않으므로 tsconfig에 명시된 경로를 빌드 시스템에 알려준다.
이 의미는 라이브러리를 빌드하지 않으면 app에서는 절대 사용할 수 없
다는 것
예를 들어 github 저장소에서 클론 후, IDE에서npm install을 수행하면
lib-name은 import가 되지 않아 에러가 발생한다.
또한 라이브러리가 변경이 되어도 빌드하지 않으면 app에서는 변경된 라이
브러리가 반영되지 않는다. 따라서 라이브러리를 수정했다면 먼저 이것을 재
빌드 해야한다.
App에서 라이브러리 사용

9. 라이브러리를 수정 후 매번 ng build를 수행하는 것은 매
우 귀찮고 시간도 꽤 걸리는 작업이다.
Angular CLI 6.2부터는 증분 빌드가 가능
-- watch 옵션을 통해 파일이 변경될 때마다 수정된 파일
을 부분 빌드
ng build lib-name --watch
이 기능을 사용하려면 tsconfig.lib.json 파일에서 다음과
같은 설정이 필요하다.
자동 빌드 수행
"angularCompilerOptions" : {
"enabledResourceInlining": true
}

10. 라이브러리를 빌드 한 후 빌드 결과 폴더에서 npm
저장소에 퍼블리싱 명령을 수행한다.
ng build lib-name
cd dist/lib-name
npm publish
기존에 npm에 퍼블리싱을 하지 않았다면 유저 계
정을 먼저 생성한다.
npm adduser
https://npmjs.com/~username에서 계정이 생
성된 것을 확인할 수 있음
라이브러리 퍼블리싱

11. Angular 어플리케이션을 개발 시에 자주 반복되
었던 테이블 모듈이나 리치폼 기반의 입력박스
모듈 등을 재사용 가능하게 리팩토링을 한 후 이
것을 라이브러리화해서 사용하였다.
이때, 각각 라이브러리들은 독립적으로 구성되기
때문에 결합도가 상당히 낮아지고 단위 시험을
하기에도, 추후에 유지보수 하기에도 매우 괜찮
아진 구조가 된 것을 경험을 할 수 있었다.
후기