Angular 库作为 webpack 的依赖项

Question

我有一个 Angular 组件，我希望它可以被其他项目作为依赖项导入。由于某些原因，我不能使用 npm，而是使用 git 作为私有存储库。

目前我正在使用一个真正的虚拟组件进行一些测试，所以在我开发组件的项目中，我使用 webpack 生成 js 文件，所以我的 /dist 文件夹有这样的内容：

dummy-component.js
package.json

在 dummy-component.js 我有我的捆绑文件，基本上是

dummy.module.ts
/dummy
  dummy.component.ts
  dummy.component.scss
  dummy.component.html

因此，这个 /dist 文件的内容被推送到 dummy-dist 存储库中，并由另一个项目作为依赖项使用

"my-dummy-component": "git+https://.../_git/dummy-dist"

这很好地导入了我的 /node_modules 文件夹（即 js 文件和 package.json）。

然后我尝试在我的 app.module.ts 中使用它，如

...
import { DummyModule } from 'my-dummy-component';
...
@NgModule({
  imports: [
    ...
    DummyModule
  ],
...

但是当我尝试启动项目时，我从 webpack 收到一个错误

ERROR in ./src/app/app.module.ts
(13,37): error TS2307: Cannot find module 'my-dummy-component'.

它存在于我的 node_modules 文件夹中，所以我猜我错过了一些其他的东西。它是什么？我也尝试在导出模块的 /node_modules 中使用 index.js，但没有成功。

有什么想法吗？谢谢。

编辑：在阅读了 cmets 中@Pavlo 提供的第一个链接之后，我现在也设法生成了定义类型。 现在我的 /dist 文件夹的内容是

dist/
  dist/
    dummy/
      dummy.component.d.ts
    dummy.module.d.ts
  dummy.bundle.js
  dummy.bundle.js.map
  package.json

在我的 package.json 中

    "name": "dummy",
    "version": "0.0.0",
    "main": "dummy.bundle.js",
    "module": "dummy.bundle.js",
    "types": "dummy.module.d.ts",
    "peerDependencies": {
      ..
    },
    "private": true
  }

现在 webpack 工作正常，但是当我加载页面时，我在控制台中收到错误

Unexpected value 'undefined' imported by the module 'AppModule'
    at Error.ZoneAwareError

Answer 1

创建一个可重用的 Angular 库并不像使用 Webpack 构建一个 Angular 应用程序那么简单。您需要以特殊方式构建它以保留 ES2015 模块（导入/导出语句），创建 TypeScript 定义文件并对组件进行 AOT 编译。

请参阅以下指南，详细了解如何执行此操作：http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/

此外，您可以使用模板开始基本设置，例如：https://github.com/jvandemo/generator-angular2-library