클래스는 외부 라이브러리의 Angular 모듈이 아닙니다.
간단한 Angular앱 을 만들고 사용자 지정 라이브러리 (동일한 프로젝트)를 추가했습니다.
ng new my-library ng generate library my-library-lib
그런 다음 다른 프로젝트 에서이 간단한 라이브러리를 테스트하기 위해 lib를 빌드했습니다.ng build my-library-lib
dist 폴더의 lib를 연결하고 다른 프로젝트에 연결하고 MyLibraryLibModule내SharedModule
{ MyLibraryLibModule } from 'my-library-lib
imports: [..., MyLibraryLibModule] -> 오류 발생 : class is not an Angular Module
이것은 내가 처음부터 모든 것을 다시 실행하고 tsconfig파일 등에서 아무것도 변경하지 않은 간단한 프로젝트입니다 . 온라인으로 보았지만 해결책을 찾을 수 없었습니다.
테스트하려면 : 라이브러리 저장소 : https://github.com/GCour/ui-library
간단한 프로젝트 저장소 : https://github.com/GCour/ui-test
tsconfig.lib.json:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
tsconfing.lib.prod.json
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"enableIvy": false
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"paths": {
"my-library-lib": [
"dist/my-library-lib/my-library-lib",
"dist/my-library-lib"
]
}
}
}
답변
당신이 경우 개발자의 사용에 대해 묻는 지역 도서관은 당신이 생산에 라이브러리를 만들어야합니다
ng build my-lib --prod
그런 다음 npm link로컬 라이브러리를 만드는 데 사용 하십시오.
cd dist
cd my-lib
npm link
모두 정상이면 컴퓨터의 다른 프로젝트에서 가져올 수 있으며 lib가 로컬 npm에 추가되었는지 확인할 수 있습니다.
C:\Users\[your-user]\AppData\Roaming\npm\node_modules\my-lib
이제 컴퓨터의 다른 프로젝트에서 사용해야하는 유일한 것은 npm link my-library
cd c:\my-another-app\src
npm link my-library
그리고 일반적으로 app.module에서 사용하십시오.
import {myLibModule} from 'my-lib'
//or import {MyLibService} from 'my-lib/public-api'
...
imports: [myLibModule}
이 GitHub 저장소 를 참조 용으로 사용할 수 있습니다.이 저장소 는 .NET을 사용 하는 사용자 지정 라이브러리의 설정 및 통합을 보여줍니다 npm link.
Angular CLI 빌드 명령은 다른 빌더를 사용하고 애플리케이션과는 다른 라이브러리 빌드 도구를 호출합니다.
Angular CLI는를
ng-packagr사용@angular-devkit/build-angular하고 기반으로 하는 애플리케이션 빌드와 달리 라이브러리 빌드를위한 다른 메커니즘을 가지고webpack있습니다.라이브러리 용 빌드 시스템은를 사용하여 라이브러리를 추가 할 때만 종속성에 추가됩니다
ng generate library my-lib. 인프라를 수동으로 설정 한 경우 구성 파일을 확인하여이를 확인하는 것이 좋습니다.
TypeScript 경로 매핑에주의하십시오 ..
빌드 메커니즘에 차이가 있기 때문에 TypeScript 소스는 빌드 된 애플리케이션 에서와는 완전히 다른 JavaScript 코드로 빌드 된 라이브러리에서 변환됩니다.
따라서 라이브러리에 의존하는 앱은 빌드 된 라이브러리를 가리키는 TypeScript 경로 매핑 만 사용해야합니다. TypeScript 경로 매핑은 라이브러리 소스 .ts 파일을 가리켜서는 안됩니다.
공식 문서에 명시된 바와 같이-
.. 자체 라이브러리를 빌드 할 때 tsconfig 경로에서 매핑을 찾아야합니다.
참고 : Angular CLI로 라이브러리를 생성하면 해당 경로가 tsconfig파일에 자동으로 추가 됩니다. Angular CLI는 tsconfig경로를 사용 하여 라이브러리를 찾을 위치를 빌드 시스템에 알립니다.
애플리케이션이 이전 라이브러리 빌드의 코드를 사용하고 있습니까?
소스 코드 내의 파일이 변경 될 때마다 소스 코드에서 새 변경 사항을 내보내는 부분 빌드가 수행됩니다.
라이브러리 코드의 변경 사항이 앱에 반영되지 않는다고 생각되면 앱에서 라이브러리의 이전 빌드를 사용하고있을 수 있습니다.
라이브러리를 변경할 때마다 라이브러리를 다시 빌드 할 수 있지만이 추가 단계에는 시간이 걸립니다. Angular에 내장 된 증분 빌드 기능을 사용할 수 있습니다. 증분 빌드는 개발 환경에서 백그라운드 프로세스로 실행할 수 있습니다.
--watch빌드 명령어에 플래그를 추가합니다 .$ ng build my-lib --watch
애플리케이션의 범위 밖에서 라이브러리 코드를 공유해야합니까?
- 글로벌 사용자를 위해 npm에 라이브러리를 게시하십시오.
- 사설 네트워크 내에서 공유하기위한 로컬 링크를 만듭니다.
작업이 편집되어 로컬 링크를 생성하려고하기 때문에 다음은 두 번째 비트 만 설명합니다. 에 라이브러리를 게시하려면 npm 레지스트리에 라이브러리 게시에 대한 공식 각도 문서를npm-registry 참조 할 수 있습니다 . npm 레지스트리를 처음 사용하고 라이브러리를 처음 게시하는 경우 npm 레지스트리에 라이브러리를 게시 할 때 다룰 다양한 근거를 확인하고 싶을 수 있습니다.
작업하는 동안 npm link...
라이브러리를 빌드 한 후 올바르게 완료되었는지 확인하려면 라이브러리 작업 공간의 dist / 폴더로 이동하여
package.json파일을 확인 하십시오.package.json, 속성을 가져야한다main. .ts가 아닌 .js 의 파일 확장자로 연결되어 있는지 확인하십시오.이제
npm link라이브러리 작업 공간에서 사용할 수 있습니다 . 라이브러리를 향하는 로컬 노드 환경 내에서 참조 포인터 ( 심볼릭 링크)를 만듭니다 .로컬 참조가 생성되면 프로젝트 작업 공간으로 이동하여
npm link <library-name>. 라이브러리 작업 공간 이름이 아니라 라이브러리 이름 인지 확인하십시오 .프로젝트 작업 공간에서
node_modules' @ '가 추가 된 라이브러리를 볼 수 있어야 합니다. 이제 라이브러리에서 프로젝트로 관련 구성 요소 및 서비스를 쉽게 가져올 수 있습니다app.module.ts. 또는 원하는 경우 지연로드 할 수 있습니다.
마찬가지로..
import { FooModule } from 'foo-library';
...