如何使用 npm 链接修复 Angular 库中的“未找到模块”错误？

Question

我正在尝试为 Javascript 库构建一个 Angular 包装器，但出现“找不到模块”错误。Javascript 库正在开发中，尚未发布到 NPM，所以我使用的是 npm-link，这可能会导致问题，但我不确定。我的 Angular 版本是 8.2.2。

Javascript 源代码库

源库/index.js：

var sourcelib = (function () {
    var doSomething = function() {
    };
    return {
        doSomething: doSomething
    };
})();
export default sourcelib;

该sourcelib目录还包含的package.json和README.md文件。如您所料，创建了一个 npm-link：

cd sourcelib
npm link

角度包装器

以下是我正在执行以创建 Angular 工作区、库和测试应用程序的 Angular CLI 命令：

ng new app-test --create-application=false
cd app-test
ng generate library testlib
ng generate application testlib-app

现在将testlib链接到 Javascript 库：

cd projects/testlib
npm link sourcelib

在testlib 中生成一个模块和组件：

cd src/lib
ng generate module test
ng generate component test/testcomp

testcomp.component.ts：

cd sourcelib
npm link

公共 api.ts：

ng new app-test --create-application=false
cd app-test
ng generate library testlib
ng generate application testlib-app

现在构建sourcelib：

ng build

这是控制台输出：

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'testlib'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
WARNING: No name was provided for external module 'sourcelib' in output.globals – guessing 'sourcelib'
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built testlib

------------------------------------------------------------------------------
Built Angular Package!
 - from: /Users/.../app-test/projects/testlib
 - to:   /Users/.../app-test/dist/testlib
------------------------------------------------------------------------------

并创建一个指向sourcelib的 npm 链接：

cd ../../dist/testlib
npm link

角度测试应用

将testlib-app链接到testlib：

cd ../../projects/testlib-app
npm link testlib

app.module.ts：

cd projects/testlib
npm link sourcelib

app.component.ts :

cd src/lib
ng generate module test
ng generate component test/testcomp

为应用程序提供服务：

ng serve

结果

ERROR in /Users/.../app-test/dist/testlib/fesm2015/testlib.js
Module not found: Error: Can't resolve 'sourcelib' in '/Users/.../app-test/dist/testlib/fesm2015'
? ?wdm?: Failed to compile.

我花了很多时间对此进行故障排除，但一直无法找到解决方案。任何帮助，将不胜感激。

Answer 1

Angular 有时在使用链接模块进行构建时会出现问题。"preserveSymlinks": true通常这可以通过添加到您的angular.jsonunder来解决projects.yourProject.architect.build.options。例如：

{
  "projects": {
    "yourProject": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }    
}