如何从 nrwl 工作区库文件夹中延迟加载模块？答案

【问题标题】：How to lazy load a module from nrwl workspace libs folder?如何从 nrwl 工作区库文件夹中延迟加载模块？
【发布时间】：2018-07-13 16:27:19
【问题描述】：

我有一个名为 myapp 的主应用程序。我的路线配置如下：

const routes: Routes = [
  { path: 'home', loadChildren: 'libs/home/home.module#HomeModule'},
  { path: 'admin', loadChildren: 'libs/admin/admin.module#AdminModule' },

  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

我的home和admin是有自己路由的模块，放在libs中。当我运行我的应用程序时，我的模块没有被加载。我想这只是一个路径问题..有人可以指导我如何从 nrwl 工作区的库文件夹中正确配置延迟加载模块吗？

这是我得到的错误：

ERROR Error: Uncaught (in promise): Error: Cannot find module 'libs/home/home.module'.
Error: Cannot find module 'libs/home/home.module'.
    at eval (eval at ../../../../../apps/myapp/src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9)
    at ZoneDelegate.invoke (webpack-internal:///../../../../zone.js/dist/zone.js:388)

注意：我更新了我的 tsconfig.app.json 和 tslint.json 如下： tslint.json

"nx-enforce-module-boundaries": [
      true,
      {
        "lazyLoad": [
          "home",
          "admin"
        ],
        "allow": []
      }
    ]

和 tsconfig.app.json：

 "include": [
    "**/*.ts",
    /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
    "../../../libs/home/index.ts",
    "../../../libs/admin/index.ts"    
  ],

谢谢。

【问题讨论】：

标签： angular angular-cli nrwl

【解决方案1】：

https://nrwl.io/nx/guide-nx-workspace#create-an-angular-module-lib

ng 生成 lib mymodule --routing --lazy --parentModule=apps/myapp/src/myapp.module.ts

【讨论】：

这个答案给出了一个命令，该命令创建一个新的库，该库将由创建时指定的某个应用程序延迟加载。它并没有真正回答如何延迟加载已经存在的库（可能需要由多个应用延迟加载）的问题。对此答案的扩展将不胜感激。
扩展在我的情况下特别有用，因为当前答案中给出的命令不会导致我的 app.module.ts 文件以任何方式被修改。
链接失效了！

【解决方案2】：

我遇到了类似的错误。我没有完全理解原因，所以以下是我的假设：

对于延迟加载，您应该这样做：

在distinct index.ts 文件中导出所有惰性模块。你应该不导入这些文件；
在应用级tsconfig.app.json 中添加对那些index.ts 文件的引用。注意——不是在根tsconfig.json，而是在app/tsconfig.app.json；
也许您应该在惰性库的 lib.module.ts 中执行 RouterModule.forChild(routes)；
确保您不要在任何地方导入惰性模块，也不要导入导出惰性模块的index.ts；

【讨论】：

您能否详细说明“distinct index.ts files”在这种情况下的含义？每个库不同？如果一个库包含多个要延迟加载的模块，那么该库是否应该有多个index.ts 文件？
我的意思是每个库都不同

【解决方案3】：

如果您在创建库时忘记添加参数 --parentModule，您可以通过将库添加到 apps/yourapp/tsconfig.app.json 文件到你的应用目录中，并将你的模块添加到

"include": ["**/*.ts", "../../libs/auth/src/index.ts", "../../libs/your-libname/src/index.ts"]

在 app.module.ts 中


{
path: 'mypath',
loadChildren: '@workspace/your-libname#YourLibnameModule'
}

【讨论】：

【解决方案4】：

使用 Angular v8 加载您的延迟加载库以这种方式工作：

{ path: 'home', loadChildren: () => import('@yourprefix/home').then(m => m.HomeModule) },

【讨论】：