当我在浏览器中输入 url 时，Angular 6 路由不起作用答案

【问题标题】：Angular 6 routing doesn't work when i enter url in browser当我在浏览器中输入 url 时，Angular 6 路由不起作用
【发布时间】：2019-04-25 16:22:07
【问题描述】：

当我浏览应用程序时，我的角度路由有效，但是当我通过浏览器输入 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 { }

如果可能的话，有人可以调查一下吗？

【问题讨论】：

angular.io/guide/…
嘿，我不能显示相同的页面吗？
是的，你可以。这就是我链接到的页面上的解释。点击阅读。
这是服务器配置问题。请参考这里。 Server configuration in angular project deployment
但是这些文档中没有提到 spring boot/tomcat

标签： angular spring-boot angular-routing

【解决方案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

【讨论】：