2017-01-25 23 views
1

私は角度2の初心者です。 私は1つの小さなプロジェクトを開発しました。パッケージはangular-cliを使って生成されます。それはdistフォルダを正常に生成します。角度2角型クリエイティブビルドプロジェクト

しかし、このアプリケーションをサーバーにインストールしてindex.htmlページを表示すると、ページcantはバンドルjsファイルにアクセスします。同梱の後

Index.htmlと::バンドルした後

<head> 
    <meta charset="utf-8"> 
    <title>MyApp</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="//rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 

<link href="styles.d41d8cd98f00b204e9800998ecf8427e.bundle.css" rel="stylesheet"></head> 
<body> 
    <app-root>Loading...</app-root> 
<script type="text/javascript" src="inline.d41d8cd98f00b204e980.bundle.js"></script><script type="text/javascript" src="styles.b2328beb0372c051d06d.bundle.js"></script><script type="text/javascript" src="main.83a76acd0c370402d4d0.bundle.js"></script></body> 

角度-cli.js

{ 
     "project": { 
     "version": "1.0.0-beta.21", 
     "name": "app-name" 
     }, 
     "apps": [ 
     { 
      "root": "src", 
      "outDir": "dist", 
      "assets": [ 
      "assets", 
      "favicon.ico" 
      ], 
      "index": "index.html", 
      "main": "main.ts", 
      "test": "test.ts", 
      "tsconfig": "tsconfig.json", 
      "prefix": "app", 
      "mobile": false, 
      "styles": [ 
      "styles.css" 
      ], 
      "scripts": [], 
      "environments": { 
      "source": "environments/environment.ts", 
      "dev": "environments/environment.ts", 
      "prod": "environments/environment.prod.ts" 
      } 
     } 
     ], 
     "addons": [], 
     "packages": [], 
     "e2e": { 
     "protractor": { 
      "config": "./protractor.conf.js" 
     } 
     }, 
     "test": { 
     "karma": { 
      "config": "./karma.conf.js" 
     } 
     }, 
     "defaults": { 
     "styleExt": "css", 
     "prefixInterfaces": false, 
     "inline": { 
      "style": false, 
      "template": false 
     }, 
     "spec": { 
      "class": false, 
      "component": true, 
      "directive": true, 
      "module": false, 
      "pipe": true, 
      "service": true 
     } 
     } 
    } 

フォルダ構造: enter image description here

だから私の質問どのようにすることができますindex.htmlファイルwのsrcタグにフォルダ名を追加する下のタグのようにAngular-CLIを使用してパッケージ化します。

<script type="text/javascript" src="/dist/inline.d41d8cd98f00b204e980.bundle.js"> 
+0

バンドルパスをカスタマイズする方法はありません。それは私のために正しく動作し、あなたの構造は大丈夫です。投稿にエラーメッセージを残してください。 –

+0

ブラウザのアプリケーションURLにヒットすると、js.https:// localhost:port/inline.d41d8cd98f00b204e980.bundle.jsの404が表示されます。-404.BパッケージJsは、パッケージ化後Myappフォルダにあります。私のアプリケーションURL https:// localhost:port/Myapp – Vaibs

+0

サーブを使用していますか? –

答えて

1

はあなたのhtmlファイルの先頭に

<base href="./dist/"> 

を追加しようとしたことがありますか?

+0

私にとってはうまくいかない!実際の問題はプロジェクトのビルド後です。すべてのjsとアセット(イメージ)ファイルが正しくマップされていません。 index.html内のすべてのスクリプトcssインラインで 'dist'を追加すると、ロードされて完全に実行されます。 – Vaibs

+0

最初に、スクリプトタグ付きの単純なhtmlファイルでsolを試してみて、生成されたURLを見てそれに応じて変更してください – vinayakj

+0

角のCLIプロジェクト内のapp/srcフォルダ内のすべての画像はありますか? ああ!それをに変更してみてください。私はapp/srcフォルダ内のいくつかの画像を使って新しいプロジェクトを作ってベースを "/"に設定し、それをうまくリンクしました。 これが役立つことを願っています! – OArnarsson