アンギュラ/ CLIで怠Stayなまま

node.jsサーバーでAngular 5アプリケーションを実行するには、次のものが必要です。


*サイトの推奨に従って、バージョン1.2がインストールされますが、私のようなナマケモノにはバージョン1.6が必要です*。

ネタバレの詳細
ng(angular / cli)が既にインストールされている場合。 バージョンを確認

ng -v 

バージョン<1.6の場合-更新

 npm uninstall -g @angular/cli npm cache npm cache verify npm i -g @angular/cli@latest 

結果を確認する

 ng -v 

バージョン> 1.6の場合-目標は達成されました。

**オプションですが、それで高速

ステップ1.新しいアプリケーションをデプロイする


一般的に、タイトルは必要なアクションには大きすぎます。

yarn取り付けられている場合は推奨

 ng set --global packageManager=yarn 

その後、 ng yarnを使用して、必要なプロジェクトの依存関係をすべてインストールします。

だから

 ng new my-project cd my-project 

my-projectフォルダーにmy-projectを作成しmy-projectこのフォルダーに移動します。

プロジェクトフォルダーにnode_modulesフォルダーがない場合、 ng通常のパッケージマネージャーでのyarnインストールに関する推奨事項は無視されました。 または何かがうまくいかなかった。

それから

 npm install 

これで、小さなアプリケーションの準備がほぼ整いました。 開発モードで実行できます

 npm run build 

http:// localhost:4200のサンプルページをお楽しみください
しかし、これはすべて開始されたのです。 次のステップに進むことをお勧めします

ステップ2. node.jsサーバーの構成


そして、ここではng > 1.6が必要です

 ng g universal universal 

universalという2番目の単語はタイプミスではありません。 この場合、これはモジュールの名前です。 コピー&ペーストモードが好きなら、そのままにしておくことをお勧めします。 その後、いつでも修正できます。

このコマンドは、必要なファイルを奇跡的に作成し、既存のファイルの構成を変更します。

サーバーのパッケージをインストールします

 yarn add @angular/platform-server express @nguniversal/express-engine 

NPMの愛好家が演じることができます

 npm i @angular/platform-server express @nguniversal/express-engine 

server.jsファイルは、小さなプロジェクトのルートでのみ作成できます

server.js
 'use strict'; /*  Zone.js   */ require('zone.js/dist/zone-node'); const express = require('express'); const ngUniversal = require('@nguniversal/express-engine'); const appServer = require('./dist-server/main.bundle'); /*     */ function angularRouter(req, res) { res.render('index', { req, res }); } const app = express(); /*      */ app.get('/', angularRouter); /*     CLI (index.html, CSS? JS, assets...) */ app.use(express.static(`${__dirname}/dist`)); /*  Angular Express */ app.engine('html', ngUniversal.ngExpressEngine({ bootstrap: appServer.AppServerModuleNgFactory })); app.set('view engine', 'html'); app.set('views', 'dist'); /* Direct all routes to index.html, where Angular will take care of routing */ app.get('*', angularRouter); app.post('*', angularRouter); app.listen(3000, () => { console.log(`Listening on http://localhost:3000`); }); 


そして、 package.jsonファイルで「build」スクリプトを追加または置換します

 "sctipts": { // -  .       "build": "ng build --prod && ng build --prod --app universal --output-hashing=none" }, 

最終フェーズ。 サーバーを収集して起動します

 npm run build node server.js 

この場合、アプリケーションの使い慣れたウェルカムページは、 http:// localhost:3000で見ることができます

特に信じられない人は、ブラウザでJavaScriptを無効にして、すべてがサーバー側でレンダリングされるようにすることができます。

かなり怠け者はここで完成したプロジェクトを取得できます

好奇心people盛な人は、このチュートリアルの基礎となる記事を読むことができます。

Source: https://habr.com/ru/post/J344832/


All Articles