Angular 2 Webpack Productionビルド＆ノード：直接URLを取得できません

私は、angular.ioサイトからWebpackビルド環境を作成する手順に従いました：https://angular.io/docs/ts/latest/guide/webpack.html、それを動作させました。その後、私は働いているTour of Heroesチュートリアルを取って、Webpack環境に移行しました。Angular 2 Webpack Productionビルド＆ノード：直接URLを取得できません

webpack開発環境（npm start）を使用してTour of Heroesを実行すると、素晴らしい結果が得られます。私がプロダクションビルド（npm run build）を作成し、ノードで結果ファイルを提供すると、URLに直接アクセスしようとすると、サーバーが応答することはありません。以下では、環境と問題を段階的に作成する手順を概説します。解決策はserver.jsファイルを変更することだと思いますが、何が必要なのか分かりません。

どのように再作成するには：

は、ウェブサイト上の指示に従ってWebPACKのビルド環境（上記のリンク）を作成します。
は、コメントアウト（または削除）polyfillsと設定SystemJSためのすべてのスクリプトのWebPACK環境のindex.htmlの中WebPACKの環境

のsrcフォルダにliteserver環境英雄のツアーからappフォルダをコピーします。 index.htmlには、次のようになります。

<html> 
    <head> 
    <base href="/"> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- 
    <link rel="stylesheet" href="styles.css"> 
    <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/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    --> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

それは両方の環境から必要なものを持っているので、package.jsonを変更します。

{ 
    "name": "angular2-webpack", 
    "version": "1.0.0", 
    "description": "A webpack starter for Angular", 
    "scripts": { 
    "start": "webpack-dev-server --inline --progress --port 8080", 
    "test": "karma start", 
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" 
    }, 
    "licenses": [ 
    { 
     "type": "MIT", 
     "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 
    } 
    ], 
    "dependencies": { 
    "@angular/common": "~2.1.1", 
    "@angular/compiler": "~2.1.1", 
    "@angular/core": "~2.1.1", 
    "@angular/forms": "~2.1.1", 
    "@angular/http": "~2.1.1", 
    "@angular/platform-browser": "~2.1.1", 
    "@angular/platform-browser-dynamic": "~2.1.1", 
    "@angular/router": "~3.1.1", 
    "angular2-cool-storage": "^1.1.0", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
    "@types/core-js": "^0.9.34", 
    "@types/node": "^6.0.45", 
    "@types/jasmine": "^2.5.35", 
    "angular2-template-loader": "^0.4.0", 
    "awesome-typescript-loader": "^2.2.4", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-loader": "^0.4.3", 
    "html-webpack-plugin": "^2.15.0", 
    "jasmine-core": "^2.4.1", 
    "karma": "^1.2.0", 
    "karma-jasmine": "^1.0.2", 
    "karma-phantomjs-launcher": "^1.0.2", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "^1.8.0", 
    "null-loader": "^0.1.1", 
    "phantomjs-prebuilt": "^2.1.7", 
    "raw-loader": "^0.5.1", 
    "rimraf": "^2.5.2", 
    "style-loader": "^0.13.1", 
    "typescript": "^2.0.3", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.14.0" 
    } 
}

WebPACKのフォルダから、ファイルを構築PRODを作成するnpm run buildを実行し、WebPACKのフォルダからnpm install
を実行します。鉱山はこのようになります。これはwebpackチュートリアルで何をすべきかを示しています。
ノードサーバー環境を作成します。

次のようになりますルートにserver.jsファイルを作成します。ノード環境で

var express = require("express"); 

var app = express(); 

app.use(function(req, res, next) { 
    console.log("Request recieved for:", req.url); 
    next(); 
}); 

app.use(express.static('public')); 

app.use(function(req, res, next) { 
    res.status(404); 
    res.send('404 file not found'); 
}); 

app.listen(4040, function() { 
    console.log("yes: 4040"); 
});

、publicフォルダを作成し、ステップで作成されたdistフォルダから全てのファイルを置きます6をパブリックフォルダに追加します。
ノードサーバーを実行するnode server.js
ローカルホスト：4040に移動します。このようにアクセスするとすべて正常に動作します。
直接このURLを入力してください：http://localhost:4040/heroes
404エラーを取得してください。
npm startを実行するとwebpack環境から直接URL http://localhost:4040/heroesにアクセスできますが、正常に動作します。

あなたは、このためのすべてのコードを見たい場合は、ここではgithubのレポは次のとおりです。https://github.com/joshuaforman/heroeswebpack

出典

2016-10-31 Josh F

''を 'に変更してみてください。 –

'http：// localhost：4040 /＃/ heroes'はどうなりますか？ – Searching

@Searching：「http：// localhost：4040」（この場合はダッシュボードページ）だけを入力すると、読み込まれたページに送られます。 URLに表示されるのは 'http：// localhost：4040/dashboard＃/ heroes'です。これは私が「ヒーローズ」の代わりに何を置いても同じです。例えば、私は 'http：// localhost：4040/blah'と言うことができ、' http：// localhost：4040/dashboard＃/ blah'というURLにこれと一緒にロードされているデフォルトのページに行きます。だから、私が必要とするものに近いが、まだそこにはない。それは何ですか？ –

私はそれを考え出したんです。問題はserver.jsにありました。より多くの研究の後、私はこれを発見した：https://expressjs.com/en/starter/static-files.html。 express.staticミドルウェア：app.use('/heroes', express.static('public'));の後にミドルウェアを追加する必要があります。ダイレクトURLは、このサーバーで必要に応じて動作します。JSファイル：

var express = require("express"); 

var app = express(); 

app.use(function(req, res, next) { 
    console.log("Request recieved for:", req.url); 
    next(); 
}); 

app.use(express.static('public')); 
app.use('/heroes', express.static('public')); 
app.use('/dashboard', express.static('public')); 

app.use(function(req, res, next) { 
    res.status(404); 
    res.send('404 file not found'); 
}); 

app.listen(4040, function() { 
    console.log("yes: 4040"); 
});

私が働いているアプリはまた、あなたがそれを行うために必要がある場合、あなたはこの形式のミドルウェアが必要になりますので、のparamsを渡す必要があります。このスタックに

app.get('/peopledetails/:uid', function(req, res){ 
    var uid = req.params.uid, 
     path = req.params[0] ? req.params[0] : 'index.html'; 
    res.sendFile(path, {root: './public'}); 
});

感謝上記の質問：Serve Static Files on a Dynamic Route using Express

ご協力ありがとうございます。

出典

2016-11-01 07:18:54

Angular 2 Webpack Productionビルド＆ノード：直接URLを取得できません

答えて

関連する問題