[英]Angular 5 6 | URL routes not working with routing
I've reached a dead end trying to work with url paths in my Angular project. 尝试在Angular项目中使用URL路径时,我走到了尽头。 I have implemented routing and routerLinks are working as intended and even with guards to control navigation.
我已经实现了路由,routerLinks可以按预期运行,甚至可以通过防护来控制导航。 However I need to be able to use my browser back and forward arrows to navigate activated routes.
但是,我需要能够使用浏览器的后退和前进箭头导航激活的路线。 Trying to implement this functionality I realized my routing is behaved strangely.
尝试实现此功能时,我意识到我的路由表现很奇怪。 According to the tutorial here Angular Routing I should be able to reach my components by appending /MyComponentPath.
根据此处的“ 角度路由 ”教程,我应该可以通过附加/ MyComponentPath来访问我的组件。 When I do this my Angular app always redirects to the landing page / front page.
当我这样做时,我的Angular应用程序总是重定向到登录页面/首页。 Ie routes like:
即路线,例如:
all redirect to /landing-page. 全部重定向到/ landing-page。 Routing works when clicking links in the menues, however manually appending in the address bar does not work.
单击菜单中的链接时,路由有效,但是手动添加到地址栏中不起作用。
Router 路由器
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminModule } from './admin/admin.module';
import { AuthGuard } from './core/auth.guard';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { ... ] from '...ALL MY COMPONENTS'; // THIS PART HAS BEEN ABBREVIATED
const routes: Routes = [
{ path: 'landing-page', component: LandingPageComponent },
{ path: 'loggedin-dashboard', component: LoggedinDashboardComponent, canActivate: [AuthGuard] },
{ path: 'events', component: EventsComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard] },
{ path: 'my-profile', component: MyProfileComponent, canActivate: [AuthGuard] },
{ path: 'create-new-event', component: CreateNewEventComponent, canActivate: [AuthGuard] },
{ path: 'about', component: AboutComponent },
{ path: 'feedback', component: FeedbackComponent, canActivate: [AuthGuard] },
{ path: 'contact', component: ContactComponent },
{ path: 'terms-of-service', component: TermsOfServiceComponent},
{ path: 'cookies-consent', component: CookiesConsentComponent, canActivate: [AuthGuard] },
{ path: 'privacy-policy', component: PrivacyPolicyComponent },
{ path: 'my-events', component: MyEventsComponent, canActivate: [AuthGuard] },
{ path: 'prices', component: PricesComponent},
{ path: 'payment', component: PaymentComponent, canActivate: [AuthGuard] },
{ path: 'my-event', component: MyEventComponent, canActivate: [AuthGuard] },
{ path: 'patch-notes', component: PatchNotesComponent, canActivate: [AuthGuard] },
{ path: 'view-event', component: ViewEventComponent, canActivate: [AuthGuard] },
{ path: 'rate-event', component: RateEventComponent, canActivate: [AuthGuard] },
{ path: 'admin-module', loadChildren: () => AdminModule, canActivate: [AuthGuard] },
{
path: 'dummy-list',
component: DummyListComponent,
data: { title: 'Dummy List' },
},
{ path: '',
redirectTo: '/landing-page',
pathMatch: 'full',
},
{ path: '**', component: PageNotFoundComponent }
];
export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class RoutingModule {}
App module 应用模块
...imports... ... ...进口
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent,
DummyListComponent,
LandingPageComponent,
LoggedinDashboardComponent,
PageNotFoundComponent,
FooterComponent,
EventListComponent,
EventFilterComponent,
LandingPageHeaderComponent,
CreateAccountFormComponent,
CreateNewEventComponent,
EventsComponent,
MyProfileComponent,
ImageUploadComponent,
UserImageGalleryComponent,
EventControlMenuComponent,
FeedbackComponent,
AboutComponent,
ContactComponent,
AboutComponent,
ContactComponent,
FeedbackComponent,
TermsOfServiceComponent,
CookiesConsentComponent,
PrivacyPolicyComponent,
ActiveBlockedPipe,
MobileLoginHeaderComponent,
MyEventsComponent,
PaymentComponent,
PricesComponent,
MyEventComponent,
PatchNotesComponent,
ViewEventComponent,
ConfirmationDialogComponent,
RateEventComponent,
CreateWallPostComponent
],
entryComponents: [MobileLoginHeaderComponent, ConfirmationDialogComponent, CreateWallPostComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
RoutingModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatTabsModule,
ModalGalleryModule.forRoot(),
AngularFontAwesomeModule,
AngularWebStorageModule,
MatProgressBarModule,
HttpClientModule,
MatFormFieldModule,
MatCardModule,
MatListModule,
MatIconModule,
MatExpansionModule,
MatInputModule,
MatButtonModule,
MatChipsModule,
MatSelectModule,
MatGridListModule,
MatSliderModule,
MatSlideToggleModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatMenuModule,
MatToolbarModule,
MatTooltipModule,
MatDialogModule,
MatRadioModule,
MatStepperModule,
MatDatepickerModule,
MatNativeDateModule,
MatBadgeModule,
RouterTestingModule,
NgxSpinnerModule,
HttpModule,
AdminModule,
ToastrModule.forRoot()
],
providers: [CookieService, AuthGuard, CanDeactivateGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
With my described symptoms how do you I get my router/routing to behave as desired? 有了我描述的症状,您如何使路由器/路由按预期运行? From the user being unable to enter manual paths appending /path to being able to.
从无法输入手动路径的用户可以将/ path添加到该路径。
The reason my app works with routerLinks is because the router can evaluate our current route and how to proceed from their when working client side. 我的应用程序与routerLinks配合使用的原因是,路由器可以评估我们的当前路由,以及在工作客户端时如何从它们进行操作。 However in order to have URL works (think invitation email linking to a specific component with params etc) we have to setup something server side depending on our host.
但是,为了使URL正常工作(请考虑将邀请电子邮件链接到带有params的特定组件等),我们必须根据主机设置服务器端。 See this link for help Routed apps must fallback to index.html
请参阅此链接以获取帮助路由应用必须回退到index.html
I found a solution. 我找到了解决方案。 It was an error.
这是一个错误。
There are two possible answers to anyone in the same situation as me. 对于与我处于相同情况的任何人,都有两个可能的答案。 First of:
首先:
import { NgModule, ModuleWithProviders } from '@angular/core';
Make sure you are importing 'ModuleWithProviders' from @angular/core, I was importing from a wrong package. 确保您是从@ angular / core导入“ ModuleWithProviders” ,而我是从错误的包中导入的。
Secondly: // Routing 其次://路由
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RoutingModule, routingModule } from './routing.module'
Check capitalization of import names. 检查导入名称的大小写。 In the above example I import both, just to be sure it is getting the right module.
在上面的示例中,我都导入了两个文件,只是为了确保它获取了正确的模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.