Angular 6 маршрутизация не работает, когда я ввожу URL в браузере

Question

Моя угловая маршрутизация работает, когда я перемещаюсь по приложению, но когда я вхожу в URL через браузер, я не вижу страницу.Застрял в этом вопросе.когда я вписываю URL в браузер, вместо загрузки загружаемого компонента я получаю тело json, вот метод контроллера, который я вызываю:

 @GetMapping(value = "getTrade", produces = arrayOf(MediaType.APPLICATION_JSON_VALUE))
    @CrossOrigin(origins = arrayOf("*"))
    fun getTransactionDetails(@RequestParam("linearID") linearID: String): ResponseEntity<List<StateAndRef<TradeState>>>? {
        if (linearID == null) {
            ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Linear Id cannot be null.\n")
        }
        val idParts = linearID.split('_')
        val uuid = idParts[idParts.size - 1]
        val criteria = QueryCriteria.LinearStateQueryCriteria(linearId = listOf(UniqueIdentifier.fromString(uuid)),status = Vault.StateStatus.ALL)
        return ResponseEntity.ok(proxy.vaultQueryBy<TradeState>(criteria=criteria).states)
    }

вот содержимое моего углового сервисного файла, откуда я вызываю этот API:

 getSpecificTrade(linearID) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let params: URLSearchParams = new URLSearchParams();
    params.set('linearID',linearID)
    let requestOptions=new RequestOptions;
    requestOptions.search = params;
    this.http.get('http://' + location.host + '/api/trading/getTrade',{
     headers: headers,search:params
   }).pipe(map((res:any)=>res.json()))
   .subscribe(
    (res) => {
     this.singleTrade=res[0];
     this.route.navigate(['/api/trading/getTrade'], {queryParams : {linearID : linearID}})
     console.log('success');     
    }
   );
   }

App.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {APP_ROUTES_PROVIDER} from './app.routes';
import {HttpClientModule} from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent } from './Landing-Page/landing-page/landing-page.component';
import { SingleTransactionComponent } from './Landing-Page/single-transaction/single-transaction.component';
import {CordaContentService} from './Services/corda-content.service';

@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent,
    SingleTransactionComponent
  ],
  imports: [
    BrowserModule,
    //AppRoutingModule,
    HttpModule,
    //HttpClientModule,
    APP_ROUTES_PROVIDER
  ],
  providers: [CordaContentService,{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Может кто-нибудь, пожалуйста, посмотрите на это, если это возможно?

Answer 1

Пожалуйста, внесите файл с именем .htaccess в свой угловой корневой путь. А затем напишите этот код.

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html