Angular 라이브러리 배포

# Angular 라이브러리

Angular를 사용하다 보면 다른 사람이 만든 컴포넌트를 npm으로 설치해 사용하거나 하는 일들이 종종 있는데, 이 컴포넌트를 배포하는 방식이 바로 Angular Library를 만들어서 배포하는 것

컴포넌트, 모듈 등을 라이브러리화 해서 배포할 수 있도록 한다

# Angular 프로젝트 만들기

Angular 라이브러리를 생성하기 위해선 우선 Angular 프로젝트를 생성해줘야 한다

ng new {project-name}

# Angular 라이브러리 만들기

ng generate library {library-name}

위 명령어를 이용하면 Angular 라이브러리 생성 완료

/projects/{library-name} 폴더 안에 라이브러리가 생성 된다

만약 ng new 명령어로 프로젝트를 생성하지 않은 상태에서 위 명령어를 실행하면 angular.json 파일이 없기 때문에 에러가 발생한다

아래는 ng new sample-app, ng generate library sample-library 명령어로 라이브러리를 생성했을 때의 폴더 구조

# angular.json

angular.json 파일을 열어보면 projects 필드에 "sample-library"가 추가된 것을 확인할 수 있다

여기서 library에 관한 설정들을 할 수 있지만 기본적으로는 건드릴 필요가 없음

라이브러리 루트 폴더가 변경 될 때나 prefix 수정이 필요할 때 바꿔주면 된다

"sample-library": { "projectType": "library", "root": "projects/sample-library", "sourceRoot": "projects/sample-library/src", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/sample-library/tsconfig.lib.json", "project": "projects/sample-library/ng-package.json" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/sample-library/src/test.ts", "tsConfig": "projects/sample-library/tsconfig.spec.json", "karmaConfig": "projects/sample-library/karma.conf.js" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "projects/sample-library/tsconfig.lib.json", "projects/sample-library/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }

그리고 위에서 root와 sourceRoot 필드를 보면 projects 폴더 내에 있는 요소들만 바라보도록 되어있기 때문에 라이브러리에서 외부 모듈을 사용해야 한다면 projects/sample-library/src/package.json 파일과 projects/sample-library/src/ng-package.json 파일을 수정해줘야 한다

# 외부 모듈 추가

우선 Angular 프로젝트 루트 폴더에서 npm 명령어를 이용해 패키지를 설치해준다

여기선 예시로 d3 패키지를 설치해보자

d3와 @types/d3를 모두 설치한다

npm intsall d3 npm install --save-dev @types/d3

그리고 projects/sample-library/src/package.json 파일의 peerDependencies 부분에 두 모듈을 추가해준다

{ "name": "sample-library", "version": "0.0.1", "peerDependencies": { "@angular/common": "^8.2.0", "@angular/core": "^8.2.0", "d3": "^5.12.0", "@types/d3": "^5.7.2" } }

이 부분이 약간 이상한게 .. 지금 이 글을 쓸 때 사용한 Angular 버전은 8이고, 처음 라이브러리를 배포해 본 건 Angular 6 버전인데 적용법이 조금 다른 것 같다

Angular 6에선 위와 같이 했더니 외부 모듈은 명시적으로 whitelist를 작성해줘야 한다 - 정확히는 기억 안 나지만 비슷한 문구 - 는 에러가 발생했었고, 이에 따라 projects/sample-library/src/package.json 파일이 아래와 같이 작성되도록 projects/sample-library/src 폴더 내에서 npm install 명령어를 실행하고,

{ "name": "sample-library", "version": "0.0.1", "peerDependencies": { "@angular/common": "^8.2.0", "@angular/core": "^8.2.0" }, "dependencies": { "d3": "^5.12.0" }, "devDependencies": { "@types/d3": "^5.7.2" } }

projects/sample-library/src/ng-package.json 파일을 아래와 같이 수정 했었다

{ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/sample-library", "lib": { "entryFile": "src/public-api.ts" }, "whitelistedNonPeerDependencies": [ "d3", "@types/d3" ] }

이 부분이 버전에 따른 차이인지 아니면 이전에 내가 잘못한 부분인지는 추가 확인이 필요할 듯

만약 잘못했다면 .. 수상과 멀어지는 소리가 들린다 ...

# public-api.ts

외부, 즉 다른 Angular 프로젝트에서 불러올 수 있도록 하려는 모듈, 컴포넌트, 서비스 등은 public-api.ts 파일에 작성해준다

/* * Public API Surface of sample-library */ export * from './lib/sample-library.service'; export * from './lib/sample-library.component'; export * from './lib/sample-library.module';

# Build

ng bulid {library-name}

빌드는 간단하게 위와 같이 할 수 있다

정상적으로 빌드가 되면 dist/{library-name} 폴더가 생성되고, 해당 폴더를 npm에 배포하거나 다른 프로젝트에 설치해서 사용할 수 있다

from http://devs-diary.tistory.com/39 by ccl(A) rewrite - 2020-03-06 03:54:28