web-dev-qa-db-ja.com

静的な事前レンダリングをng add @ nguniversal / express-engineに追加します

Angularドキュメンテーション here に従って、Angularプロジェクトにサーバー側レンダリングを追加しました。

静的プリレンダリングを実行するコマンドnpm run build:prerenderおよびnpm run serve:prerenderは、CLIコマンドを使用した後、ここにありませんでした：

ng add @nguniversal/express-engine --clientProject [angular.projet]

静的な事前レンダリングがユニバーサルでまだサポートされているかどうか疑問に思っていますか？生成されるコードはすべて動的SSRに関するものです。

niversal-starter でこれらのコマンドを見つけたので、それは奇妙です。

誰かそれについての情報がありますか？また、angularプロジェクトに静的プリレンダリングを追加するにはどうすればよいですか？

再現するには、ターミナルで実行します：

  • ng new foo新しいプロジェクトを開始するには
  • ng add @nguniversal/express-engine --clientProject fooユニバーサルを追加する

手伝ってくれてありがとう。

angularangular-universal
9
Johan Rin

静的プリレンダリングを手動で追加する方法を見つけました。

興味のある方のために、静的プリレンダリングをng add @nguniversal/express-engineに手動で追加するすべての手順：

  1. ng add @nguniversal/express-engine --clientProject [your project name]：サーバー側のアプリモジュールapp.server.module.tsを初期化します

  2. プロジェクトのルートレベルでprerender.tsの横にファイルstatic.paths.tsおよびserver.tsを作成します

  3. https://github.com/angular/universal-starter/blob/master/prerender.ts の内容をprerender.tsファイルにコピーします

  4. 次の例に従ってstatic.paths.tsにルートを作成します https://github.com/angular/universal-starter/blob/master/static.paths.ts

  5. webpack.server.config.jsに事前レンダリングエントリを追加します。

    module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts',
    prerender: './prerender.ts'
  },

  6. package.jsonに事前レンダリングスクリプトを追加します。

    "scripts": {
    ...
    "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
    "generate:prerender": "cd dist && node prerender",
    "serve:prerender": "cd dist/browser && http-server"
  }

  7. prerender.tsの17行目を編集

    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

  8. パッケージhttp-serverをインストールして、プリレンダービルドを提供します。

    npm install http-server --save-dev`

  9. これで準備が整いました！

    npm run build:prerender && npm run serve:prerender


Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.10:8080
Hit CTRL-C to stop the server
1
Johan Rin

[編集]バージョン0.9.0へのダウングレードが実際に最良のオプションのようです。

http-serverエラーが発生する可能性がありますバージョン.0.11.0を使用しています。バージョン0.11.0のecstaticにはバグがあります。問題がある場合は、スレッド here を読み、いくつかの解決策を確認してください。この問題があり、http-serverをアップグレードしたくない場合は、ecstaticのバージョンをダウングレードするか、明示的にindex.htmlに移動して、ページをレンダリングします。

私はSSRを起動して実行することに非常に興奮していましたが、この問題に遭遇し、実際にしばらく時間がかかりました。これがお役に立てば幸いです。

0
Willie