I have an Angular app that I recently migrated to AWS Amplify. I am having a problem, though, with creating links to particular pages (for example, sending a confirmation link in an email). Links automatically redirect to the index page. The same thing happens if I try to navigate to a page by entering its URL in the address bar, or if I simply reload the page.
I have an app-routing.module.ts file that used to work before moving to Amplify. When run from localhost, the links still work fine. How do I fix this?
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'];
}
}
EDIT: I tried removing prepareRoute, AmplifyAngularModule, and AmplifyService but the problem persists.
For security purposes, AWS Amplify blocks all links from external sources and redirects them to the index. To edit these rules, go to Rewrites and Redirects. The following page explains how to use these rules.