У меня есть приложение Angular, которое я недавно перенес на AWS Amplify. Однако у меня возникла проблема с созданием ссылок на определенные страницы (например, отправка ссылки для подтверждения по электронной почте). Ссылки автоматически перенаправляют на страницу индекса. То же самое происходит, если я пытаюсь перейти на страницу, введя ее URL-адрес в адресную строку, или просто перезагрузить страницу.
У меня есть файл app-routing.module.ts, который раньше работалпрежде чем перейти к усилению. При запуске с localhost ссылки по-прежнему работают нормально. Как это исправить?
App-routing.module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: './intro/intro.module#IntroModule'
},
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgSelectComponent } from './ng-select/ng-select.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';
@NgModule({
declarations: [
AppComponent,
NgSelectComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule,
BrowserAnimationsModule,
MaterialModule,
HttpClientModule,
NgxChartsModule,
AmplifyAngularModule
],
exports: [
],
providers: [
AmplifyService,
{ provide: 'APIRoot', useValue: 'https://app.rivver-platform.com/api/' },
{ provide: 'colors1', useValue: ['#3dcc85','#ffbe5c','#7b64e0','#ff8370'] },
{ provide: 'colors1', useValue: ['#3dcc85','#ffbe5c','#7b64e0','#ff8370'] },
{ provide: 'colors2', useValue: ['#51c8e0','#7b64e0','#3dcc85','#ffbe5c'] }
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component
<main [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</main>
app.component.ts
import { Component,OnInit } from '@angular/core';
import { RouterOutlet, Router } from '@angular/router';
import { slideInAnimation } from './animations';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';
import { LocationStrategy } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
slideInAnimation
// animation triggers go here
]
})
export class AppComponent implements OnInit {
private loaded = false;
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer, private locationStrategy: LocationStrategy, private router: Router) {
ngOnInit() {
let _this = this;
setTimeout(function(){
_this.loaded = true;
},1);
}
prepareRoute(outlet: RouterOutlet) {
if (!this.loaded){
history.pushState(null, null, location.href);
}
return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}
}
РЕДАКТИРОВАТЬ: я пытался удалить prepareRoute, AmplifyAngularModule и AmplifyService, но проблема сохраняется.