当手动导航到浏览器时，Angular应用程序没有加载我的组件路径

发布于 2025-02-10 08:25:38 字数 1048 浏览 0 评论 0原文

我的应用程序从登录页面上开始，该页面上有一个按钮create-account页面。

如果我在create-account页面上，并且刷新了浏览器，则返回到登录页面。

这是为什么？我尝试阅读文档以找到解决方案，但并不完全清楚。我可以从浏览器中看到，如果我手动导航到http：// localhost/create-account，它将返回301，然后返回登录 page。为了允许创建击中该路由的路线必须采取什么措施？

这是我的app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "create-account", component: CreateAccountComponent },
  { path: "password-reset", component: PasswordResetComponent }
];

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

原文

My application starts on a login page which has a button to a create-account page.

If I am on the create-account page and I refresh my browser, it goes back to the login page.

Why is that? I tried reading through the documentation to find a solution, but it wasn't entirely clear. I can see from the browser that if I manually navigate to http://localhost/create-account, it returns a 301 and goes back to the login page. What must be done to the route to fix this in order to allow create-account to be hit?

Here is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "create-account", component: CreateAccountComponent },
  { path: "password-reset", component: PasswordResetComponent }
];

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由如风 2025-02-17 08:25:38

哎呀，那是因为我的app.component.ts在其中有一个，并且在应用程序初始化应用程序（首先浏览到）时都会被

ngOnInit() {
  this.router.navigate(['/login']);
}

。

ngOnInit() { }

调用如果您查看<<> logincomponent> >，则添加了一个没有映射的URL路由将转到登录页面，如果您查看<<<< login 页面代码>路由在这里：

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "create-account", component: CreateAccountComponent },
  { path: "password-reset", component: PasswordResetComponent },
  { path: "**", component: LoginComponent }
];

Whoops, it was because my app.component.ts had this in it, and it gets called for every route when the application is initialized (first browsed to):

ngOnInit() {
  this.router.navigate(['/login']);
}

I have refactored this to:

ngOnInit() { }

I have also added a wildcard route resolver to the LoginComponent instead, so that URL routes that have no mapping will go to the login page, if you look at the last element added in the Routes here:

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "create-account", component: CreateAccountComponent },
  { path: "password-reset", component: PasswordResetComponent },
  { path: "**", component: LoginComponent }
];

回复收藏 0 原文

~没有更多了~