2017-09-29 3 views
0

ジャージーを持つJavaでは、Angular2のフロントエンド用とバックエンド用の2つの異なるプロジェクトがあります。ジャージーウェブアプリケーション内でAngular2アプリを実行

私が達成したいのは、フロントエンドアプリケーションをバックエンドにサービスするサーバーが提供するようにすることです(CORSヘッダーの設定を避ける)。

ただし、コマンドng build --output-path PATH/TO/WEBAPP-FOLDERで角型アプリケーションを構築する際に問題があります。

サーバーが起動してPATH/TO/WEBAPP-FOLDER/index.html(私の角型アプリケーションが開始される場所)に行くと、フォルダ構造には含まれていますが、ブラウザがインデックスページに含まれるJSファイルを要求すると、404エラーが発生します。

JSファイルを正しく配信できるように、角度設定で何かする必要がありますか?

マイwebappのフォルダ構造は次のとおりです。

-assets/ 
-favicon.ico 
-index.html 
-inline.bundle.js 
-inline.bundle.js.map 
-main.bundle.js 
-main.bundle.js.map 
-polyfills.bundle.map 
-polyfills.bundle.js.map 
-styles.bundle.js 
-styles.bundle.js.map 
-vendor.bundle.js 
-vendor.bundle.js.map 
-WEB-INF 
    web.xml (this is for Jersey) 

マイ生成index.htmlページは次のようになります。また、

<!DOCTYPE html> 
<html> 

<head> 
    <base href="/"> 
    <title>Angular QuickStart</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 
    crossorigin="anonymous"> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 

    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
    System.import('main.js').catch(function (err) { console.error(err); }); 
    </script> 
</head> 

<body> 
    <my-app>Loading AppComponent content here ...</my-app> 
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body> 

</html> 

systemjs.config.jsファイルがどこにも見つからないです。ビルドコマンドを正しく実行していませんか?

答えて

0

index.htmlにbase hrefを使用することをおすすめします。ベースタグのhrefは、ページ内のすべての相対URLのベースURLを指定します。したがって、出力パス "PATH/TO/WEBAPP-FOLDER"を使用してビルドした場合は、ベースhref = "PATH/TO/WEBAPP-FOLDER"を指定するとよいでしょう。これは "domain-name/PATH/TO/WEBAPP-FOLDER"のアプリを提供します。

0

私はAngular(4)とJava/Springと同様の状況でした。 OPと同様に、CORS設定を行うために、Angularアプリケーションのコンテンツ(CLIで生成されたフォルダ/ my-appから)をJava Mavenプロジェクトのルートにある/ angularという新しいフォルダにコピーしました。私は

ng build --base-href /my-java-project/ 

を実行するために、カスタムビルドファイルを作った後、mavenのビルド時に、$ {project.build.directory}/my-に角度/ DIST /から/ distの内容を移動するためのmaven-リソースプラグインを使用しましたjava-project。既定では、angleは展開のルート内のリソースを検索しようとします。

関連する問題