개발/front-end

angular 라이브러리 만들기

희운1205 2024. 7. 5. 08:31
반응형

angular 설치용 라이브러리 만들기(npx 기준)

1. 라이브러리 작성과 상관없이 메인이 되는 Angular Project를 생성해야 함  

npx -p @angular/cli@11.1.0 ng new 프로젝트명 --no-create-application



2. 생성된 프로젝트 폴더 이동  

cd 프로젝트명



3. 생성된 프로젝트 폴더에서 라이브러리 생성  

npm run ng generate library [library-name]



4. 로컬용 라이브러리 배포 파일 생성
: package.json 파일의 scripts에 아래 문구 추가

"build_lib": "ng build --prod 라이브러리명(폴더명)",
"npm_pack": "cd dist/라이브러리명 && npm pack",
"package": "npm run build_lib && npm run npm_pack"



* 라이브러리 배포 파일 생성

npm run package

=> 프로젝트의 dist 폴더에 라이브러리 명칭(projects의 라이브러리  폴더에 package.json의 name 명으로 변경 가능 (dist 폴더 생성되고 라이브러리 명칭으로 된 배포용 tgz 파일 생성됨)

5. 사용할 프로젝트에서 install
   1) 4번에 배포용 tgz 파일을 복사하여 작업할 프로젝트 root에 복사     

npm install ./배포용.tgz 파일

(package.json 파일 dependencies에 'file:배포용. tgz"로 자동 등록)

6. 사용할 프로젝트의 특정 모듈 파일에 import

import { SampleModule, SampleService } from '라이브러리 명칭; //예시

 

반응형