同じサーバー上のSpringブート+ Angular2

Question

this tutorialの後に、私のAngular2アプリケーションをSpringブートバックエンドに統合し、コンパイル済みのJSリソースを/ uiサブディレクトリに配置することに成功しました。すべて基本的にうまくいきますが、Angular2アプリケーションはのappname/ui URLからアクセスできます。

しかし、私は/UIパスの子供たちは、のように、現在インターセプトに/UI/*をターゲットにすべての要求を春のURL「パススルー」に春を告げるする方法があるかどうかを知りたいのですがAngular2 Routerが/uiパスのリソースに適切にナビゲートしないようにします。

現在、私は唯一の私のコントローラの一つで、このマッピングを持っています。これにより

@RequestMapping(value = "/ui") 
public String uiIndex() { 
    return "/ui/index.html"; 
} 

、インターフェースが正しく/UIで現れますが、春には、その下のすべてのために私のエラーと404エラーを送信します私はそれらを直接ブラウザからアドレス指定します。 Angular2アプリ内のルーターナビゲーションは完全に機能します。明確にするよう

 <resource> 
      <directory>${project.basedir}/src/main/resources</directory> 
      <includes> 
       <include>*.properties</include> 
       <include>templates/*.*</include> 
      </includes> 
     </resource> 
     <resource> 
      <directory>target/ui</directory> 
      <targetPath>static/ui</targetPath> 
     </resource> 

を：私は（私のプロジェクトは、Mavenのビルドを使用しています）、この設定を使用してターゲット/ UIから静的/ UIフォルダにコンパイルAngular2リソースを追加している

EDIT

唯一の問題は、/ui/home/settingsのようにブラウザにURLを入力すると、Springが要求をインターセプトしてエラーをスローすることです。私は喜んで/ uiに、そして/ home/settingsにAngularコンテクストでうまく行くことができます。

Answer 1

いくつかの試行錯誤の末、私は最終的に私が望むことをすることができました。最終的な解決策は、このような@Controllerで@RequestMappingを作成することでした@EpicPandaforceのuseful commentとthis StackOverflow post

に感謝：

@RequestMapping(value = "/ui/**/{[path:[^\\.]*}") 
public String redirectUi() { 
    return "forward:/ui/index.html"; 
} 

Answer 2

SpringHunterを追加して、スプリングブートで提供される静的コンテンツを構成できます。

例

@Configuration 
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter { 
    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry) { 
     registry.addResourceHandler("/ui").addResourceLocations("file:/path/to/your/angular/files"); 
    } 
} 

今https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content

を参照してください、あなたが言及したチュートリアルのステップ5は、これを行うためのクリーンな方法を持っている、あなたはそのステップをスキップしましたか？ （src/main/resources/static）

Answer 3

私はあなたが欲しいものを行うための最も簡単な方法があると思いますAngular Hash Location Strategyを使用します。私は助けることを願ってい

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

{ provide: LocationStrategy, useClass: HashLocationStrategy }

。