Angular 6/7 使用自定义库会引发错误 TS2397：找不到模块“*”答案

【问题标题】：Angular 6/7 Consuming a custom library throws error TS2397: Cannot find module '*'Angular 6/7 使用自定义库会引发错误 TS2397：找不到模块“*”
【发布时间】：2019-03-26 22:57:43
【问题描述】：

我目前正在尝试将我的 Angular 2.something 项目升级到最新版本。我有一个自定义的 angular.config 文件，因此我可以构建 2 个使用相同组件“库”的应用程序。但随后 Angular 6 的史诗版本与真正的 Angular 库一起出现了！但是现在我（再次）试图将我的项目重构为这个新版本。

我已经在 DIST 文件夹中构建了一个组件库（名为“core”）。甚至 Typescript 也可以使用这个库。但是当我尝试构建我的网络应用程序时，Angular CLI 开始抱怨它找不到模块“核心”。

以下代码sn -p是文件夹dist/core中的public_api.d.ts：

export { WdCoreModule } from './lib/wd-core.module';
export { wdApi } from './lib/core/wd.service';
export { ProcessTokenComponent } from './lib/core/process-token.component';
export { GroupByPipe } from './lib/core/group-by.pipe';
export { AvatarComponent } from './lib/avatar/avatar.component';
export { GameElementsModule } from './lib/game-elements/game-elements.module';
export { AchievementsComponent } from './lib/game-elements/achievements/achievements.component';
export { ModalComponentComponent } from './lib/modal-component/modal-component.component';
export { BaseModalService, BaseModalComponent } from './lib/core/basemodal.service';
export { NavMenuComponent } from './lib/nav-menu/nav-menu.component';
.... More exports ahead

我在 tsconfig.json 中添加了这个库的路径

"paths": {
      "core": [
        "dist/core"
      ],
      "core/*": [
        "dist/core/*"
      ],
}

然后是时候将模块和组件从库“core”导入到名为“cms”的应用程序中了。

import { WdCoreModule } from 'core';

还没有错误！现在我已经准备好构建我的项目了：ng serve cms 这将引发以下错误：

projects/cms/src/app/app.module.ts(52,30)：错误 TS2307：找不到模块“核心”。

我一直在寻找解决这个问题的方法，但我有点卡住了。有哪位编程英雄可以帮助我吗？

编辑：解决方案的额外信息

我按照以下帖子打包并安装了我的构建库

https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

以下 2 个命令对我有用：

//package.json
"npm_pack": "cd dist/core && npm pack",
//then
npm install dist/core/core-0.0.1.tgz --save

【问题讨论】：

您不应该将“核心”映射到“dist”文件夹。创建一个“libs”文件夹或其他东西并映射到该路径（如果它是第 3 方库）。只有捆绑输出应该放在 dist 文件夹中。
不，你应该照你做的。但请确保您首先使用 ng build core 构建了您的库 - 否则将找不到它
这不是第三方库，是我自己的库。我首先做了一个 NG build core，所以我的 dist 文件夹有一个很好的文件夹，里面有所有必需的模块和 public_api.d.ts 文件:)

标签： angular typescript

【解决方案1】：

您应该在您的 packages.json 中链接您的构建库（.tgz）。 ts.config 路径仅用于开发时间..

【讨论】：

谢谢。打包库并通过 NPM 安装它解决了这个问题。我关注这篇博文顺便说一句：blog.angularindepth.com/…
这个解决方案有热重载un host project？或者我应该编译库以进行任何更改？
做了同样的事情但得到错误“找不到模块'@angular/core'”。

【解决方案2】：

我遇到了同样的问题，找到了一个在开发过程中不需要我打包库的解决方案

我解决了这个问题，也将路径添加到应用程序目录中的 tsconfig.app.json 文件

{
  "compilerOptions": {
    ...
    "paths": {
      "ika-admin-lib": [
        "../dist/name-lib"
      ],
      "ika-admin-lib/*": [
        "../dist/name-lib/*"
      ]
    }
}

【讨论】：

仍然可以在这里联系web.archive.org/web/20201001135853/http://codecleane.rs/2019/07/…

【解决方案3】：

在开发过程中，我遇到了与 tsconfig.json 中存在的路径相同的错误。我通过将路径放在应用程序级别 tsconfig 下 - /projects/myproject/tsconfig.app.json

解决了这个问题

      "mylib": [
        "../../dist/mylib"
      ],
      "mylib/*": [
        "../../dist/mylib/*"
      ]

我没有这方面的来源或文档，也没有充分的理由。无论我读过什么文章都建议在 parent 中有路径并且它似乎对他们有用，也许那些是不同的版本。我刚刚看到应用程序级别的 tsconfig.app.json 并想到将路径放在那里并尝试一下，它奏效了。我不知道为什么将路径放在父 tsconfig.json 中不起作用。

这是我的版本输出的摘录-

Angular CLI: 7.2.4

Angular: 7.2.16

@angular-devkit/build-angular      0.12.4
@angular-devkit/build-ng-packagr   0.12.4
@angular-devkit/build-optimizer    0.12.4
@angular-devkit/build-webpack      0.12.4

ng-packagr  4.7.1

typescript  3.2.4

有几点需要注意-

相对路径会改变。在 tsconfig.json 中，您处于父级别，路径看起来像-

    "paths": {
      "mylib": [
        "dist/mylib"
      ],
      "mylib/*": [
        "dist/mylib/*"
      ]
    }

如果我只有应用级别 tsconfig.app.json 中的路径，则 IDE（Visual Studio 代码）会抱怨显示错误并且智能感知不起作用。为了解决这个问题，我也将路径保留在父级 tsconfig.json 中。

最初，我只是想评论 Maurizio Pozzobon 的回答，说我也做过同样的事情，并且在开发过程中对我有用。但是作为一个新手，它不允许我添加评论。所以，想用更多信息来写这个答案。

【讨论】：