角刷新应用程序如果URL是手工编写

Question

我使用的是6角和我有路线的变化的问题。如果我通过使用routerLink或导航（）方法的应用程序导航，它工作正常，因为它仅加载新的模块（如有必要）。但是，例如，如果我在这个链接：本地主机：8080 /回家，我点击URL，取消“家”，写“个人资料”，并按下回车键，正确进入个人资料页上，但在重新加载（应用程序还应用程序组件）。为什么？我想不通。这是我的路由：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

也许这个问题是在auth后卫？

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: Store<fromApp.AppState>, private route: ActivatedRoute, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select('auth')
        .pipe(take(1),
            map((authState: fromAuth.State) => {
                if (authState.authenticated) {
                    return true;
                } else {
                    let sessionStorageToken: string = sessionStorage.getItem('token');
                    if (sessionStorageToken) {
                        this.store.dispatch(new AuthActions.Login());
                        this.store.dispatch(new AuthActions.SetToken(sessionStorageToken));
                        return true;
                    } else {
                        let url = state.url;
                        this.router.navigate(['/login', { redirectTo: url }]);
                        return false;
                    }
                }
            }));
}
}

这是profile.module.ts：

@NgModule({
declarations: [
    ProfileComponent
],
imports: [
    CommonModule,
    FormsModule
]
 })
 export class ProfileModule { }

Answer 1

当你通过内角的routerLink导航，底层JavaScript是确定哪些服务的浏览器。这意味着当URL地址是通过角路由器的改变，但回升的变化，并相应提供的组件。

当您手动更新网址并回车，它就像去一个新的网页。这意味着服务器将需要重新服务于基地的网站，http://localhost:1234，然后应用程序后，将处理途径有，/profile和服务所需的组件。

我试着解释它在一个非常简单的方式，更全面的解释请查看Angular docs

Answer 2

当使用routerLink，JavaScript的改变URL，即它不被视为网页的重新加载。

但是，当你打在地址栏回车，重新加载页面，即，内容再次从供应中的index.html（如果你没有任何其他HTML定义的替代指标送达做服务器提供服务），并且因此该应用程序重新初始化。

这就是为什么所有的组件得到重新加载。

正如@Wesley建议，你可以参考角文档的更多信息。

https://angular.io/guide/router

您可以探索部署目的下面提到的博客。

https://arjunphp.com/deploy-angular-app-production-nginx/

这里要注意的主要是try_files $uri $uri/ /index.html =404;。当进入被击中地址栏上，NGINX首先检查是否给定的URL映射到服务器上的一些文件/路径。如果它不存在，这对我们来说localhost:8080/profile，不会因为没有这样的物理路径。因此，NGINX将服务/index.html文件，这反过来会获取所有的JS文件这又将处理路由。

如果您需要使用API​​来工作，你可以使用NGINX反向代理机制，例如qazxsw POI路径重定向，您相应的服务器。

Answer 3

您可以使用

/api/

哈希将阻止应用程序的重新加载。所以，当你将达到地址栏上输入，应用程序将只是改变组件来显示。

Answer 4

路由基本上是用来延迟加载应用程序，一个模块在同一时间。每条路线都依赖于先前路线等上。所以，当你手动输入网址，应用程序将加载在路由的所有组件。