Question

这是我第一次使用Angular开发完整的应用程序，我将其部署在Google App Engine / AWS Free Tier中。在后端中，它在AWS上部署的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"]);
    });

  }

Answer 1

在S3存储桶中，将错误文档以及索引文档都设置为index.html。

具有URL参数的角路由在GoogleAppEngine / AWS S3中部署时不起作用，但在LocalHost / LocalIP中可以完美地工作

1 个答案: