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，但没有运气。

有什么想法吗？感谢。

编辑：在评论中阅读@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

Angular库作为webpack的依赖项

1 个答案: