当我在浏览器中输入网址时，Angular 6路由不起作用

Question

当我浏览该应用程序时，我的角度路由有效，但是当我通过浏览器输入网址时，我看不到该页面。 卡在这个问题上。 当我在浏览器中输入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