Angular 4功能模块

Question

我们是否可以在单独的项目中开发一个angular 4功能模块，并与根模块建立链接，作为延迟加载？

如果是，那么loadChildren属性路由url是什么

Answer 1

TL;DR

遵循this指南并查看官方的Angular模块，如HttpModule。

长长的答案

这是可能的，但我还没有找到任何关于它的官方文档或教程。基本上你要做的就是创建一个可以包含在你的项目中的库。比如官方的RouterModule或HttpModule。

基本上，您必须创建一个模块，导出所有公共内容，如指令、服务和组件，然后最终构建整个功能模块。

构建模块并不是那么简单。在HttpModule中，他们使用ngc来编译打字脚本。ngc是官方的Angular编译器。然后，他们使用rollup-js和 minify -js打包和压缩代码。

因此，您需要的依赖项(对于最基本的库)是@angular/core、@angular/compiler、@angular/compiler-cli、rollup、rxjs、typescript和zone.js。

您还必须修改您的tsconfig.json。这些是主要的变化(我在最后提供的第二个链接列出了更多的性能提升变化)：

为提前(AoT)编译添加以下行："angularCompilerOptions": { "strictMetadataEmit": true}

• set "declaration": true，这会使编译器创建定义文件(您知道some-file.d.ts的东西)

• 使用显式路径到其他模块也很重要。这是因为如果您在示例中将Angular模块包含在构建中，则应用程序将崩溃，因为Angular将出现两次。

现在您需要像这样配置rollup.config.js：

• entry应该是您转换后的index.ts
• dest的路径应该是bundles/modulename.umd.js，这是模块的Angular标准名称(.umd.js是标准格式Angular globals将是一个

对象，所以没有特殊字符(也没有破折号)和

• )最后，您必须定义全局变量，您知道您使用的模块，但没有像@angular/core那样编写自己，所以globals应该是这样的对象：

看看Angular在HttpModule?上的rollup.config.js：here。

然后设置package.json以发布模块。重要的是你：

设置文件路径(记住使用semantic versioning)

• add "peerDependencies"

• set "main" to .umd.js"version"
• set "module“to your transpiled index.js file

现在，您可以构建功能模块，然后将其作为对其他项目的依赖项添加到其他项目中，并在那里使用您令人敬畏的东西。

两个很好的帖子提供了进一步的信息(尽管第二个并不容易理解)：

This post解释了如何创建(共享)模块。

This post更详细地介绍了发布模块的细节。

Answer 2

YouTube上的Here is a very good talk将帮助您实现这一点。它涵盖了从头开始的配置，没有大量的依赖项和样板代码。