我有一个Angular 6库,我正在尝试从中导出单个组件。与Google Material Design非常相似。我遵循了这篇教程:https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5,并遵循了这些指南:https://github.com/angular/angular-cli/wiki/stories-create-library。当我尝试将库导入新项目(由angular cli创建)时,我遇到了错误。libraries package.json如下:
{
"name": "sample-library",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"sass-flex-grid": "1.0.4",
"rxjs": "6.2.2",
"ng-inline-svg": "8.0.1"
},
"dependencies": {
}
}
两个项目的最高级别package.json如下:
"@angular/animations": "6.0.3",
"@angular/common": "6.1.4",
"@angular/compiler": "6.1.4",
"@angular/core": "6.1.4",
"@angular/cli": "6.1.5"
我正在使用npm link将我的库导入另一个项目。在谷歌上搜索了一段时间后,它开始感觉像一个符号链接问题,所以我在我将库导入其中的新项目的angular.json文件中添加了"preserveSymlinks":true,这样就创建了一组新的错误:ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve 'ng-inline-svg' in
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'
ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve
'rxjs/add/observable/combineLatest' in
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'
ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve 'rxjs/add/observable/of' in
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'
ERROR in ./node_modules/corteva-component-library/fesm5/imported-
library.js
Module not found: Error: Can't resolve 'rxjs/add/observable/zip' in
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'
看起来该模块没有正确导出rxjs或inline-svg依赖项; 从故障排除的结果来看,以下是最相关的文件片段
public_api.ts :
export * from './lib/imported-library.service';
export * from './lib/imported-library.module';
export * from './lib/components/accordion/accordion.module';
export * from './lib/components/form-elements/checkbox/checkbox.module';
tsconfig.lib.json
"compilerOptions": {
"baseUrl": "./",
"outDir": "../out-tsc/lib",
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2015"
],
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
],
"rxjs/*": ["../node_modules/rxjs/*"]
}
}
我感觉这与符号链接有关,如果能提供帮助,将不胜感激。我已经没有更多的想法了。