Angular Library

이상훈

Published in

상훈 Devlog

5 min readOct 25, 2018

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

Angular CLI 6 버전부터 Angular CLI의 빌드 시스템에 ng-packagr라는 라이브러리를 연결하여 이를 구현할 수 있는 기능을 지원한다.

ng-packagr는 Angular 라이브러리 코드를 다른 모듈에서 import하여 사용할 수 있도록 Angular Package Format으로 변경해주는 라이브러리이다.

만약 Angular CLI 5버전 이하일 경우 직접 ng-packagr를 설치한 후 package.json에 몇가지 빌드를 위한 속성을 추가하면 된다. 이에 대한 자세한 사항은 다음 링크에서 확인할 수 있다. 아래 모든 내용은 Angular CLI 6이상 버전을 기준으로 한다.

라이브러리 생성

아래 명령어로 기존 Angular 프로젝트에 라이브러리를 생성할 수 있다.

ng generate library lib-name

명령어를 수행하면 기존 프로젝트에 추가되거나 수정되는 항목을 확인할 수 있다.

라이브러리 스켈레톤 코드 추가

프로젝트 폴더를 확인해보면projects/lib-name 하위에 라이브러리 스켈레톤 코드가 추가된 것을 알 수 있다.
NgModule 안에 컴포넌트나 서비스 등이 있는 기존 Angular 어플리케이션과 동일한 구조를 가지고 있다.

2. angular.json에 프로젝트 추가: projects 속성에 lib-name가 추가된다.

3. package.json에 의존성 추가: ng-packagr를 포함한 라이브러리를 빌드 할 수 있도록 하는 몇가지 의존성이 추가된다.

4. tsconfig.json에 빌드 경로 추가: 빌드 결과 경로가 추가된다.

라이브러리 빌드

Angular CLI를 통해 라이브러리를 빌드하거나 테스트, 린트 등을 수행할 수 있다.

ng build lib-name
ng test lib-name
ng lint lib-name

App에서 라이브러리 사용

생성한 라이브러리를 사용하기 전에 일반적으로 라이브러리가 어떤 메커니즘에 의해 사용할 수 있었던 것인지 이해할 필요가 있다.

npm 저장소에 있는 라이브러리를 사용하려면 다음과 같은 단계가 있을 것이다.

npm install lib-name을 통해 해당 라이브러리를 설치하여 node_modules 폴더에 넣는다.
app에서 import {something} from ‘lib-name’의 방식으로 import한다.

이 후에 Angular CLI는 import된 라이브러리를 찾기 위해 먼저 tsconfig에 명시된 경로에서 검색을 한 후 그 다음으로 node_modules에서 찾게 된다.

이 때, 라이브러리를 빌드하면 그 결과 파일은 node_modules에 들어 가지 않으므로 tsconfig에 명시된 경로를 빌드 시스템에 알려준다. 이 의미는 라이브러리를 빌드하지 않으면 app에서는 절대 사용할 수 없다. 예를 들어 github 저장소에서 클론 후, IDE에서npm install을 수행하면 lib-name은 import가 되지 않아 에러가 발생할 것이다.

또다른 문제는 라이브러리가 변경이 되어도 빌드하지 않으면 app에서는 변경된 라이브러리가 반영되지 않는다. 따라서 라이브러리를 수정했다면 먼저 이것을 재빌드 해야한다.

자동 빌드 수행

라이브러리를 수정 후 매번 ng build를 수행하는 것은 매우 귀찮고 시간도 꽤 걸린다. Angular CLI 6.2부터는 증분 빌드가 가능하기 때문에 라이브러리 개발자들에게 좀 더 나은 경험을 제공해 줄 것이다.

-- watch 옵션을 통해 파일이 변경될 때마다 수정된 파일을 부분 빌드한다.

ng build lib-name --watch

이 기능을 사용하려면 tsconfig.lib.json 파일에서 다음과 같은 설정이 필요하다.

“angularCompilerOptions” : {
   “enabledResourceInlining”: true,
   …
}

라이브러리 퍼블리싱

자신이 작성한 라이브러리를 npm 저장소에 퍼블리싱하기 하는 방법은 다음과 같다.

먼저 라이브러리를 빌드 한 후 빌드 결과 폴더에서 npm 저장소에 퍼블리싱 명령을 한다.

ng build lib-name
cd dist/lib-name
npm publish

기존에 npm에 퍼블리싱을 하지 않았다면 유저 계정을 먼저 생성해야 할 것이다.

npm adduser

그 후 https://npmjs.com/~username에서 계정이 생성된 것을 확인할 수 있다. 이것에 대해 좀 더 자세한 내용은 다음 링크에서 확인해볼 수 있다.

후기

Angular 어플리케이션을 개발 시에 자주 반복되었던 테이블 모듈이나 리치폼 기반의 입력박스 모듈 등을 재사용 가능하게 리팩토링을 한 후 이것을 라이브러리화해서 사용하였다.

이때, 각각 라이브러리들은 독립적으로 구성되기 때문에 결합도가 상당히 낮아지고 단위 시험을 하기에도, 추후에 유지보수 하기에도 매우 괜찮아진 구조가 된 것을 경험을 할 수 있었다.