如何从 nrwl workspace libs 文件夹中延迟加载模块？

Question

我有一个名为 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"    
  ],

谢谢。

Answer 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

Answer 2

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

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

导出 distinct index.ts 文件中的所有惰性模块。你应该不导入那些文件；
在应用级别 tsconfig.app.json 添加对那些 index.ts 文件的引用。注意 - 不是在根 tsconfig.json 中，而是在 app/tsconfig.app.json;
也许你应该在你的惰性库 lib.module.ts;

RouterModule.forChild(routes)

确保你不要在任何地方导入惰性模块，并且不要导入导出惰性模块的index.ts；

Answer 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'
}

Answer 4

使用 Angular v8 加载您的延迟加载库的工作方式如下：

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

如何从 nrwl workspace libs 文件夹中延迟加载模块？

How to lazy load a module from nrwl workspace libs folder?

angular

angular-cli

nrwl