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

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 }
];

Myhome和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

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

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

1. 将所有惰性模块导出到不同的 index.ts文件中。您不应该导入这些文件；
2. index.ts在 app-level 中添加对这些文件的引用tsconfig.app.json。注意 - 不是在 root 中tsconfig.json，而是在app/tsconfig.app.json;
3. 也许你应该RouterModule.forChild(routes)在你的惰性库中做lib.module.ts；
4. 确保不要在任何地方导入惰性模块，也不要导入index.ts导出惰性模块；

Answer 3

使用 Angular v8 加载你的延迟加载库是这样工作的：

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

Answer 4

如果您在创建 lib 时忘记添加参数 --parentModule，您可以通过将 lib 添加到应用程序目录中的 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'
}