Angular AWS通过角度停止URL重定向到索引进行放大
我有一个Angular应用程序,最近迁移到AWS Amplify。但是,我在创建特定页面的链接时遇到了问题(例如,在电子邮件中发送确认链接)。链接自动重定向到索引页。如果我试图通过在地址栏中输入页面的URL来导航到页面,或者只是重新加载页面,也会发生同样的情况 我有一个app-routing.module.ts文件,在移动到放大之前,该文件通常会工作。从localhost运行时,链接仍然可以正常工作。我该如何解决这个问题 App-routing.module:Angular AWS通过角度停止URL重定向到索引进行放大,angular,amazon-web-services,routes,aws-amplify,Angular,Amazon Web Services,Routes,Aws Amplify,我有一个Angular应用程序,最近迁移到AWS Amplify。但是,我在创建特定页面的链接时遇到了问题(例如,在电子邮件中发送确认链接)。链接自动重定向到索引页。如果我试图通过在地址栏中输入页面的URL来导航到页面,或者只是重新加载页面,也会发生同样的情况 我有一个app-routing.module.ts文件,在移动到放大之前,该文件通常会工作。从localhost运行时,链接仍然可以正常工作。我该如何解决这个问题 App-routing.module: import { NgModule
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 { }
应用程序模块
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 { }
应用程序组件
<main [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</main>
编辑:我尝试删除prepareRoute、AmplicateAngularModule和AmplicateService,但问题仍然存在。出于安全目的,AWS Amplicate会阻止来自外部源的所有链接,并将它们重定向到索引。要编辑这些规则,请转到“重写和重定向”。下一页解释如何使用这些规则
请提供您的代码。@Sela什么代码?整个应用程序?您的应用程序路由模块和其他一两个组件do@Sela好吧,我也有类似的问题。当我在本地主机上运行我的应用程序时,路由是好的。当我在amplify上部署它时,路由总是导致错误-这个XML文件似乎没有任何与之相关的样式信息。文档树如下所示<代码>拒绝访问拒绝访问
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'];
}
}