介绍
angular-router-loader 是用于加载 Angular 路由配置的 webpack loader。它可以轻松地将路由配置动态导入到 Angular 应用程序中，同时支持延迟加载和代码分割。
安装
你可以通过 npm 安装 angular-router-loader：
npm install angular-router-loader --save-dev
使用
首先，在你的 webpack.config.js 文件中添加一个规则来使用 angular-router-loader。以下是一个示例配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ------------------------
-------- -
------- ----------------
------- -----------
--
--
-- --- ----- ------- ---
--
--
-- --- ----- ----- ---
--
--
-- --- ----- ------- ---
--在上面的示例中，我们使用 angular-router-loader 处理 .ts 文件，并配置了以下选项：
loader：用于加载异步模块的 loader。在上面的示例中，我们使用了async-requireloader。genDir：生成文件的目录。在上面的示例中，我们指定为compiled，生成的文件将位于compiled目录中。
接下来，在你的路由配置文件中，使用 loadChildren 来指定延迟加载的模块。以下是一个示例配置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
----- ------- ------ - -
-
----- ---
----------- -------
---------- -------
--
-
----- -------
------------- -- -- ------------------------------------- -- --------------
--
-
----- --------
------------- -- --
--------------------------------------- -- ---------------
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --在上面的示例中，我们使用 loadChildren 来指定延迟加载 HomeModule 和 AboutModule。使用 import() 函数来动态加载模块，并在 then() 函数中返回模块类。
最后，运行 webpack 构建你的应用程序。现在，当用户访问 http://your-site.com/home 和 http://your-site.com/about，会先加载路由配置，然后再加载相应的模块。
示例代码
以下是一个完整的示例代码：
webpack.config.js
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ------------------------
-------- -
------- ----------------
------- -----------
--
--
-- --- ----- ------- ---
--
--
-- --- ----- ----- ---
--
--
-- --- ----- ------- ---
--app-routing.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
----- ------- ------ - -
-
----- ---
----------- -------
---------- -------
--
-
----- -------
------------- -- -- ------------------------------------- -- --------------
--
-
----- --------
------------- -- --
--------------------------------------- -- ---------------
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --有了这个使用教程，你可以轻松地使用 angular-router-loader 将模块的加载和分割集成到 Angular 应用程序中，并提高应用程序的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66865