🤱 👨🏽 ⏹️ アンギュラ/ 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盛な人は、このチュートリアルの基礎となる記事を読むことができます。

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

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

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

More articles: