在 jhipster/angular 应用程序中将 LocationStrategy 从 HashLocationStrategy 更改为 PathLocationStrategy 的正确方法是什么？答案

【问题标题】：What is the correct way to change the LocationStrategy from HashLocationStrategy to PathLocationStrategy in a jhipster/angular app?在 jhipster/angular 应用程序中将 LocationStrategy 从 HashLocationStrategy 更改为 PathLocationStrategy 的正确方法是什么？
【发布时间】：2021-06-22 03:58:23
【问题描述】：

在 jhipster/angular 网关应用程序中，我试图将 LocationStrategy 从 HashLocationStrategy 更改为 PathLocationStrategy。此更改的原因是我尝试使用 Linkedin 对用户进行身份验证，并且在 Linkedin 应用程序配置中，我需要回调 URL 不能包含哈希 #

我在不同的来源阅读过它，最接近我的选项包括以下内容：

在src/main/webapp/app/app-routing.module.ts 中，我在RouterModule.forRoot() 函数的第二个参数的对象中将值false 分配给useHash
在 index.html 的 src/main/webapp/index.html 中，我按照 documentation 中的建议添加 <base href='/'>

通过上述方法，我设法消除了主页的哈希，我也设法进行了身份验证，但是当尝试在应用程序中导航失败时，可以在浏览器控制台中读取以下错误

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
provideForRootGuard@webpack-internal:///./node_modules/@angular/router/fesm5/router.js:5608:15
_callFactory@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:21635:20
_createProviderInstance@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:21591:26
initNgModule@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:21521:32
NgModuleRef_@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:22248:21
createNgModuleRef@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:22237:12
NgModuleFactory_.prototype.create@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:24772:25
RouterConfigLoader.prototype.load/<@webpack-internal:///./node_modules/@angular/router/fesm5/router.js:3678:34
MapSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/internal/operators/map.js:40:35
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/internal/Subscriber.js:63:18
MergeMapSubscriber.prototype.notifyNext@webpack-internal:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js:94:26
InnerSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/internal/InnerSubscriber.js:19:21
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/internal/Subscriber.js:63:18
subscribeToPromise/</<@webpack-internal:///./node_modules/rxjs/_esm5/internal/util/subscribeToPromise.js:10:28
ZoneDelegate.prototype.invoke@webpack-internal:///./node_modules/zone.js/dist/zone.js:390:26
onInvoke@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17652:33
ZoneDelegate.prototype.invoke@webpack-internal:///./node_modules/zone.js/dist/zone.js:389:52
Zone.prototype.run@webpack-internal:///./node_modules/zone.js/dist/zone.js:149:43
scheduleResolveOrReject/<@webpack-internal:///./node_modules/zone.js/dist/zone.js:888:34
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:422:31
onInvokeTask@webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17643:33
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:60
Zone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:194:47
drainMicroTaskQueue@webpack-internal:///./node_modules/zone.js/dist/zone.js:600:35
promise callback*scheduleMicroTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:583:28
ZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:412:38
onScheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:300:29
ZoneDelegate.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:403:51
Zone.prototype.scheduleTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:237:43
Zone.prototype.scheduleMicroTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:257:25
scheduleResolveOrReject@webpack-internal:///./node_modules/zone.js/dist/zone.js:878:14
resolvePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:824:44
makeResolver/<@webpack-internal:///./node_modules/zone.js/dist/zone.js:740:31
webpackJsonpCallback@https://localhost:9060/app/main.bundle.js:26:29
@https://localhost:9060/app/42.chunk.js:1:57

src/main/webapp/app/app-routing.module.ts 和这个类似

@NgModule({
    imports: [
        RouterModule.forRoot(
            [
                {
                    path: 'admin',
                    loadChildren: './admin/admin.module#AdminModule'
                },
                {
                    path: 'lorem',
                    loadChildren: './lorem/lorem.module#LoremModule'
                },
                {
                    path: 'ipsum',
                    loadChildren: './ipsum/ipsum.module#IpsumModule'
                }
            ],
            { useHash: false, enableTracing: DEBUG_INFO_ENABLED }
        )
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

【问题讨论】：

标签： angular jhipster

【解决方案1】：

问题是forRoot()函数被多次使用，其中一个在功能模块中，将此功能模块中的forRoot()更改为forChild()解决了问题

来自documentation

forRoot() 只在应用程序中使用一次，在应用路由模块

【讨论】：