4

我有一个 Angular 6 库，我试图从中导出单个组件。与谷歌材料设计非常相似。

我遵循了本教程：https ://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5并遵循了这些准则：https ://github.com/angular/angular-cli/wiki/stories -创建库

当我尝试将库导入一个新项目（由 angular cli 创建）时，我遇到了错误。

库包.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将我的库导入另一个项目。

谷歌搜索了一段时间后，它开始感觉像是一个符号链接问题，所以我将"preserveSymlinks": true,库添加到我的新项目的 angular.json 文件中。这会产生一组新的错误：

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/*"]
  }
}

我真的觉得它与符号链接有关。任何帮助将不胜感激。我没主意了。

4

1 回答 1

1

尝试将值为“true”的“preserveSymlinks”属性添加到您的“angular.json”，如下所示

"projects": {
  "<your app name>": {
    ...
    "projectType": "application",
    ...
    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
              "options": {
                 ...
                 "preserveSymlinks": true,
                 ...
              },
              "configurations": {
                 "production": {
                    ...
                    "preserveSymlinks": true,
                    ...
                 }
于 2018-11-02T10:16:23.673 回答