(배포용)library 만들기

독립된 library를 만들면 npm과 같은 배포도 편리하고 동일 라이브러리를 다수의 프로젝트에 사용함으로서 유지 보수도 편리합니다.
여기서는 독립된 library를 만들고 현재 프로젝트에 import하여 사용하는 것에 대해서 다루겠습니다.

1. 신규 App 생성

먼저 angular app을 만들고 해당 디렉토리로 이동한다.
기존에 App이 있으시면 바로 다음 단계로 이동

ng new my-app
cd my-app

2. 라이브러리 생성 (여기서 부터)

ng generate library [LibraryName] --prefix=enl			

위와 같이 생성하면 기존 프로젝트에 아래와 같이 프로젝트 폴더가 생성되고 하위로 신규 라이브러리가 생성되며 관련 파일들이 자동 생성됩니다.

- projects 
  - LibraryName
    - src
    ...

• tsconfig.json

아래의 paths를 보면 참조하는 곳이 dist 이하의 [LibraryName] 이고 아직 존재하지 않는다.
아래에 설명된 라이브러리 빌드 단계를 거치면 이곳에 생성이 되고 그러면 우리는 메인 App에서 직접 호출하여 사용할 수 있다.

.....................
 "compilerOptions": {
    .....................
    "paths": {
      "[LibraryName]": [
        "dist/[LibraryName]"
      ]
    },

• angular.json

.....................
"projects": {
  .....................
  "[LibraryName]": {
  }
  .....................
}

3. 라이브러리 빌드

ng build LibraryName	// angular 7 이후 버젼은  --prod 없이 바로 사용한다. 
ng build --prod LibraryName	

출력메시지

✔ Built ng-count-up-js

------------------------------------------------------------------------------
Built Angular Package
 - from: D:\DEV\projects\[LibraryName]
 - to:   D:\DEV\dist\[LibraryName]
------------------------------------------------------------------------------

Build at: 2023-07-11T07:07:33.853Z - Time: 3982ms

여기 까지 마쳤으면 신규프로젝트에서 Library를 import 하여 테스트할 수 있다.

• app.module.ts

import { MyModule } from '[LibraryName]';

Dependencies vs devDependencies vs peerDependencies