Angular npm 패키지를 게시하는 방법.

Angular 패키지는 여러 Angular 응용 프로그램에 동일한 기능을 공유하는 데 사용됩니다.

시작하기

아래 명령은 빈 작업 공간을 생성합니다. 패키지 이름을 선택하는 동안 항상 고유하고 의미 있는 전체 이름을 선택하십시오.

ng new package_name --create-application=false

아래 명령을 사용하여 프로젝트 폴더로 이동합니다.

cd package_name

그런 다음 아래 명령을 사용하여 라이브러리를 생성하십시오.

ng generate library package_name

이렇게 하면 프로젝트 폴더 안에 라이브러리 파일이 생성됩니다.


예를 들어 사용자 지정 지시문 또는 사용자 지정 파이프의 빌드 패키지를 원하는 경우 ng generate 명령을 사용하여 사용자 지정 지시문을 만듭니다.

ng g directive name_of_the_directive
// for custom pipe
ng g pipe name_of_the_pipe

파이프 또는 지시문 안에 모든 논리를 작성하고 App.module.ts의 파일도 언급했습니다.



그리고 새로 추가된 파일을 public-api.ts 파일에 import 해야 합니다.

패키지 빌드

패키지 빌드는 Angular 애플리케이션 빌드 프로세스와 유사합니다.

ng build --prod

이렇게 하면 응용 프로그램 내에 dist 폴더가 생성됩니다.

로컬에서 패키지 테스트

게시하기 전에 npm 링크를 사용하여 패키지를 테스트할 수 있습니다.

아래는 패키지를 각도 응용 프로그램에 연결하는 단계입니다.

ng build --prod를 사용하여 응용 프로그램을 빌드합니다.

명령줄을 사용하여 dist/package_name 폴더로 이동합니다.

사용 npm link 이를 통해 package_name을 로컬에서 참조할 수 있습니다.

패키지를 설치하려는 Angular 응용 프로그램으로 이동하여 아래 명령을 실행합니다.

npm link package_name 

그러면 package_name과 각도 응용 프로그램 사이에 심볼릭 링크가 생성됩니다.

architect -> build -> 옵션 내의 angular.json 파일에서 this"preserveSymlinks": true를 추가하면 패키지와 응용 프로그램 간의 링크가 활성 상태로 유지됩니다.

그런 다음 Angular 응용 프로그램 app.module.ts 내에서 패키지 모듈을 가져오고 패키지를 테스트합니다.

import {NgxNumberonlyDirectiveModule} from 'ngx-numberonly-directive'

@NgModule({
    declarations: [
    ],
    imports: [
      NgxNumberonlyDirectiveModule,
    ],
    providers: [ ],
    bootstrap: [AppComponent]
  })

패키지 게시

아래는 npm 패키지를 게시하는 단계입니다.

ng build --prod를 사용하여 응용 프로그램을 빌드합니다.

명령줄을 사용하여 dist/package_name 폴더로 이동합니다.

npm login 를 사용하여 npm 계정에 로그인해야 합니다.

npm publish를 사용하여 npm 패키지를 게시합니다.

패키지 정보 및 사용 지침을 작성합니다.

패키지의 정보와 사용 및 설치 가이드라인을 작성하는 것은 매우 중요합니다. README.md 파일 안에 모든 사용 지침을 작성해야 합니다.



패키지를 게시하기 전에 매번 package.json 파일 내부의 버전을 변경하십시오. 그렇지 않으면 오류가 발생합니다. 또한 package.json 내 패키지와 관련된 키워드 및 라이선스를 추가할 수 있습니다.