使用webpack不能让Angular组件在项目中工作？

Question

我创建了一个找到here

的角度组件（datetime-popup）

我希望能够在我的项目中使用它，但我无法让它工作。我相信我需要把它作为一个umd库或webpack的东西，但我已经看过这个互联网，我无法找到如何做到这一点，无论我做什么，它都错了。

有人可以帮我解决这个问题吗？我希望能够在演示中引用该项目，并使用npm通过外部项目使用它。

编辑：

我试图复制this project但由于某种原因，当我构建我的示例项目时，它在脚本中得到一个异常

  

bundle.js：39725 Uncaught SyntaxError：意外的令牌导出

这是例外。这不是我的代码，当ngx-bootstrap项目在项目中时工作正常

Answer 1

包装Angular库仍然是一种黑色艺术。它是在angular-cli路线图上提供更好的开箱即用支持。同时，您可以咨询this excellent overview。

基本上，您需要使用ngc基于具有特定设置的tsconfig.json来编译模块和组件，这是创建Angular构建所需的元数据的必要步骤，并且 - 如果模板和CSS位于外部文件中，则对其进行处理（必要时进行预处理）。然后，使用应用程序从编译它们的目录中导入模块和组件，通常类似于dist或lib，这可以通过package.json中的条目来完成，例如{ {1}}。如果您要发布到"module": "dist/index.js"，那么您只需发布npm目录即可。提供更详尽的细节超出了这个简短答案的范围。