如何从 nrwl workspace libs 文件夹中延迟加载模块?
How to lazy load a module from nrwl workspace libs folder?
我有一个名为 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"
],
谢谢。
https://nrwl.io/nx/guide-nx-workspace#create-an-angular-module-lib
ng 生成 lib mymodule --routing
--lazy --parentModule=apps/myapp/src/myapp.module.ts
我有类似的错误。我没有完全理解原因,所以以下是我的假设:
对于延迟加载你应该这样做:
- 导出 distinct
index.ts
文件中的所有惰性模块。你应该
不导入那些文件;
- 在应用级别
tsconfig.app.json
添加对那些 index.ts
文件的引用。注意 - 不是在根 tsconfig.json
中,而是在 app/tsconfig.app.json
; 中
- 也许你应该在你的惰性库
lib.module.ts
; 中做 RouterModule.forChild(routes)
- 确保你不要在任何地方导入惰性模块,并且不要导入导出惰性模块的
index.ts
;
如果您在创建库时忘记添加参数--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'
}
使用 Angular v8 加载您的延迟加载库的工作方式如下:
{ path: 'home', loadChildren: () => import('@yourprefix/home').then(m => m.HomeModule) },
我有一个名为 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"
],
谢谢。
https://nrwl.io/nx/guide-nx-workspace#create-an-angular-module-lib
ng 生成 lib mymodule --routing --lazy --parentModule=apps/myapp/src/myapp.module.ts
我有类似的错误。我没有完全理解原因,所以以下是我的假设:
对于延迟加载你应该这样做:
- 导出 distinct
index.ts
文件中的所有惰性模块。你应该 不导入那些文件; - 在应用级别
tsconfig.app.json
添加对那些index.ts
文件的引用。注意 - 不是在根tsconfig.json
中,而是在app/tsconfig.app.json
; 中
- 也许你应该在你的惰性库
lib.module.ts
; 中做 - 确保你不要在任何地方导入惰性模块,并且不要导入导出惰性模块的
index.ts
;
RouterModule.forChild(routes)
如果您在创建库时忘记添加参数--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'
}
使用 Angular v8 加载您的延迟加载库的工作方式如下:
{ path: 'home', loadChildren: () => import('@yourprefix/home').then(m => m.HomeModule) },