Angular 5 HashLocation策略不导航

时间：2018-03-13 03:09:29

标签： angular lazy-loading aspnetboilerplate angular-router

在将Angular 5应用程序部署到IIS之后，我一直在尝试实现HashLocationStrategy。在我的Angular应用程序中，有3个模块：RootModule和2个延迟加载的模块（AccountModule和AppModule）。

在AccountModule组件中进行身份验证后，应用程序应导航到AppModule 中的主要组件。但是点击＆＃34;登录＆＃34;按钮。只有当我手动刷新时，它才会引导我进入app模块。

我是否需要在子模块中添加任何其他配置或导入，或者只是配置根模块？或者我的配置有什么问题吗？

这是我的代码：

根路由模块： 

const routes: Routes = [
    { path: '', redirectTo: '/app/home', pathMatch: 'full' },
    {
        path: 'account',
        loadChildren: 'account/account.module#AccountModule', //Lazy load account module
        data: { preload: true }
    },
    {
        path: 'app',
        loadChildren: 'app/app.module#AppModule', //Lazy load account module
        data: { preload: true }
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
        onSameUrlNavigation: 'reload', useHash: true, enableTracing: true
    })],
    exports: [RouterModule],
    providers: []
})

根模块： 

@NgModule({
    imports: [
        // ...,
        RootRoutingModule
    ],
    declarations: [
        RootComponent
    ],
    providers: [
        // ...,
        {provide: LocationStrategy, useClass: HashLocationStrategy}
    ],
    bootstrap: [RootComponent]
})

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: AccountComponent,
                children: [
                    { path: 'login', component: LoginComponent },
                    { path: 'register', component: RegisterComponent }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

步骤

当我输入用户凭据并单击登录时，它不会导航到#/app/home，它只会停留在现在的位置。但它已经过验证。 enter image description here

我必须在地址栏中手动输入根网址。 enter image description here

只有这样，我才被引导到#/app/home

enter image description here

跟踪导航

点击登录按钮后，会在控制台日志中捕获此内容。

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 3, url: '/')
platform-browser.js:367 NavigationStart {id: 3, url: "/"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 3, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } )
platform-browser.js:367 RoutesRecognized {id: 3, url: "/", urlAfterRedirects: "/app/home", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 3, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } )
platform-browser.js:367 GuardsCheckStart {id: 3, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'app')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: 'app')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: '')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'home')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 3, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } , shouldActivate: false)
platform-browser.js:367 GuardsCheckEnd {id: 3, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: false}
platform-browser.js:380 Router Event: NavigationCancel
platform-browser.js:367 NavigationCancel(id: 3, url: '/')
platform-browser.js:367 NavigationCancel {id: 3, url: "/", reason: ""}
platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 4, url: '/account/login')
platform-browser.js:367 NavigationStart {id: 4, url: "/account/login"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 4, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } )
platform-browser.js:367 RoutesRecognized {id: 4, url: "/account/login", urlAfterRedirects: "/account/login", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 4, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } )
platform-browser.js:367 GuardsCheckStart {id: 4, url: "/account/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 4, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 4, url: "/account/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'login')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: '')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: 'account')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'account')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 4, url: '/account/login', urlAfterRedirects: '/account/login')
platform-browser.js:367 NavigationEnd {id: 4, url: "/account/login", urlAfterRedirects: "/account/login"}
platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 5, url: '/')
platform-browser.js:367 NavigationStart {id: 5, url: "/"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 5, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } )
platform-browser.js:367 RoutesRecognized {id: 5, url: "/", urlAfterRedirects: "/app/home", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 5, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } )
platform-browser.js:367 GuardsCheckStart {id: 5, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'app')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: 'app')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: '')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: 'home')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 5, url: '/', urlAfterRedirects: '/app/home', state: Route(url:'', path:'') { Route(url:'app', path:'app') { Route(url:'', path:'') { Route(url:'home', path:'home') }  }  } , shouldActivate: false)
platform-browser.js:367 GuardsCheckEnd {id: 5, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: false}
platform-browser.js:380 Router Event: NavigationCancel
platform-browser.js:367 NavigationCancel(id: 5, url: '/')
platform-browser.js:367 NavigationCancel {id: 5, url: "/", reason: ""}
platform-browser.js:380 Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 6, url: '/account/login')
platform-browser.js:367 NavigationStart {id: 6, url: "/account/login"}
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 6, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } )
platform-browser.js:367 RoutesRecognized {id: 6, url: "/account/login", urlAfterRedirects: "/account/login", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 6, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } )
platform-browser.js:367 GuardsCheckStart {id: 6, url: "/account/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 6, url: '/account/login', urlAfterRedirects: '/account/login', state: Route(url:'', path:'') { Route(url:'account', path:'account') { Route(url:'', path:'') { Route(url:'login', path:'login') }  }  } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 6, url: "/account/login", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'login')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: '')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: 'account')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: 'account')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 6, url: '/account/login', urlAfterRedirects: '/account/login')
platform-browser.js:367 NavigationEnd {id: 6, url: "/account/login", urlAfterRedirects: "/account/login"}

0 个答案:

没有答案
相关问题
最新问题