Angular 带有 URL 参数的路由部署在 GoogleAppEngine/AWS S3 中时不起作用,但在 LocalHost/LocalIP 中运行完美
Angular Routes with URL Parameters Not working when Deployed in GoogleAppEngine/AWS S3 , but works perfect in LocalHost/LocalIP
这是我第一次使用 Angular 开发完整的应用程序,我在 Google App Engine / AWS 免费套餐中部署了它。
在后端,它是部署在 AWS 中的 运行 on Spring Boot Rest API。
应用程序在根域下加载正常
http://feedtalk.in(点击打开)
但是没有 URL 带参数的正在打开
http://feedtalk.in/article/maruti-suzuki-ignis-limited-edition-to-be-launched-soon
但在本地一切正常,localhost:4200/127.0.0.0:4200/192.168.1.5:4200(wifi-router)
一切正常。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { ArticlereaderComponent } from './articlereader/articlereader.component';
import { HomeComponent } from './home/home.component';
import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
import { LinksreaderComponent } from './linksreader/linksreader.component';
import { SearchfeedsComponent } from './searchfeeds/searchfeeds.component';
import { FormsModule } from '@angular/forms';
import { CommentmanagerComponent } from './commentmanager/commentmanager.component';
const appRoutes: Routes = [
{
path: 'article/:urlLink', component: ArticlereaderComponent,
children: [{ path: 'comments/:commentjson', component: CommentmanagerComponent }]
},
{ path: 'newslinks/:urlLink', component: LinksreaderComponent },
{ path: 'search/:query', component: SearchfeedsComponent },
{ path: '', component: HomeComponent }
]
@NgModule({
declarations: [
AppComponent,
ArticlereaderComponent,
HomeComponent,
EscapeHtmlPipe,
LinksreaderComponent,
SearchfeedsComponent,
CommentmanagerComponent
],
imports: [
FormsModule,
BrowserModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }, // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
declare var $: any;
import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
import {AppComponent} from '../app.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(public http: HttpClient, public router: Router) {
this.getTopStories();
this.getAllStories();
this.getMostRead();
this.getLatestNewsLinks("TOPSTORY");
}
public forwardURL(urlLink: string) {
window.open("article/" + urlLink, "_self");
}
public forwardlLink(urlLink:string){
window.open("newslinks/" + urlLink, "_self");
}
app.component.html
<div class="list-group" *ngFor="let Feed of AllStories" (click)="forwardURL(Feed.urlLink)">
articlereader.component.ts
export class ArticlereaderComponent implements OnInit {
public feed: Feed;
public nextFeed: Feed;
public tags: any;
public parameterLink: any;
public MostRead;
public NonPolitics;
public RelatedArticle;
public Comments;
constructor(public route: ActivatedRoute, public http: HttpClient, public router: Router) {
this.route.params.subscribe(params => {
this.parameterLink = params.urlLink;
});
this.getArticle();
this.getMostRead();
this.getNonPoliticsFeeds();
}
public forwardURL(urlLink: string) {
window.open("article/" + urlLink, "_self");
}
public getArticle() {
this.http.get(AppComponent.APIHost + "/feed/FeedByUrl/" + this.parameterLink + "/").subscribe(data => {
this.feed = data;
this.Comments = this.feed.comments;
this.tagsSplit();
this.getNextfeed(this.feed["feedId"]);
this.getRelated(this.feed["feedId"]);
});
}
在您的 S3 存储桶中将错误文档设置为 index.html 以及您的索引文档。
这是我第一次使用 Angular 开发完整的应用程序,我在 Google App Engine / AWS 免费套餐中部署了它。 在后端,它是部署在 AWS 中的 运行 on Spring Boot Rest API。 应用程序在根域下加载正常 http://feedtalk.in(点击打开)
但是没有 URL 带参数的正在打开 http://feedtalk.in/article/maruti-suzuki-ignis-limited-edition-to-be-launched-soon
但在本地一切正常,localhost:4200/127.0.0.0:4200/192.168.1.5:4200(wifi-router) 一切正常。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { ArticlereaderComponent } from './articlereader/articlereader.component';
import { HomeComponent } from './home/home.component';
import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
import { LinksreaderComponent } from './linksreader/linksreader.component';
import { SearchfeedsComponent } from './searchfeeds/searchfeeds.component';
import { FormsModule } from '@angular/forms';
import { CommentmanagerComponent } from './commentmanager/commentmanager.component';
const appRoutes: Routes = [
{
path: 'article/:urlLink', component: ArticlereaderComponent,
children: [{ path: 'comments/:commentjson', component: CommentmanagerComponent }]
},
{ path: 'newslinks/:urlLink', component: LinksreaderComponent },
{ path: 'search/:query', component: SearchfeedsComponent },
{ path: '', component: HomeComponent }
]
@NgModule({
declarations: [
AppComponent,
ArticlereaderComponent,
HomeComponent,
EscapeHtmlPipe,
LinksreaderComponent,
SearchfeedsComponent,
CommentmanagerComponent
],
imports: [
FormsModule,
BrowserModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }, // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
declare var $: any;
import { Component } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
import {AppComponent} from '../app.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(public http: HttpClient, public router: Router) {
this.getTopStories();
this.getAllStories();
this.getMostRead();
this.getLatestNewsLinks("TOPSTORY");
}
public forwardURL(urlLink: string) {
window.open("article/" + urlLink, "_self");
}
public forwardlLink(urlLink:string){
window.open("newslinks/" + urlLink, "_self");
}
app.component.html
<div class="list-group" *ngFor="let Feed of AllStories" (click)="forwardURL(Feed.urlLink)">
articlereader.component.ts
export class ArticlereaderComponent implements OnInit {
public feed: Feed;
public nextFeed: Feed;
public tags: any;
public parameterLink: any;
public MostRead;
public NonPolitics;
public RelatedArticle;
public Comments;
constructor(public route: ActivatedRoute, public http: HttpClient, public router: Router) {
this.route.params.subscribe(params => {
this.parameterLink = params.urlLink;
});
this.getArticle();
this.getMostRead();
this.getNonPoliticsFeeds();
}
public forwardURL(urlLink: string) {
window.open("article/" + urlLink, "_self");
}
public getArticle() {
this.http.get(AppComponent.APIHost + "/feed/FeedByUrl/" + this.parameterLink + "/").subscribe(data => {
this.feed = data;
this.Comments = this.feed.comments;
this.tagsSplit();
this.getNextfeed(this.feed["feedId"]);
this.getRelated(this.feed["feedId"]);
});
}
在您的 S3 存储桶中将错误文档设置为 index.html 以及您的索引文档。