web-dev-qa-db-ja.com

Angular4（Angular Universal）を使用したサーバーサイドレンダリング

サーバーサイドレンダリングを可能にするために追加したいAngular4webpackプロジェクトに取り組んでいます AngularUniversal しかし、ほとんどのチュートリアルではangular cli。統合したいwebpackでユニバーサル。私はこれに従ってみました チュートリアル 運が悪かったです。誰か助けてくれませんか。

angularwebpackangular-universal
15
RemyaJ

これ Angular Universal はAngular 2.のみです。最初から始めたい場合は、これを使用できます Angular 4 Universal Seed 次のような機能：

  • Angular 4
  • WebPack
  • 開発/製品モード
  • SCSSコンパイル
  • i18n、SEO、TSLint/codelyzer
  • 遅延読み込み、構成、キャッシュ

または、すでにAngular 4プロジェクトを実行している場合は、コードで次の設定を行うことでユニバーサルを統合できます。

これらのパッケージをインストールします：
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest TypeScript@latest --save

npm install express @types/express --save-dev

これをapp.module.tsファイルに追加します

import { BrowserModule } from '@angular/platform-browser';
BrowserModule.withServerTransition({
  appId: 'my-app-id'   // withServerTransition is available only in Angular 4
}),

次のファイルを作成します

src/uni/app.server.ts

import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from '../app/app';
import { AppModule } from '../app/app.module';
import 'reflect-metadata';
import 'zone.js';
@NgModule({
  imports: [
    ServerModule,
    AppModule
  ],
  bootstrap: [
    AppComponent
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'}
  ]
})
export class AppServerModule {
}


src/uni/server-uni.ts

import 'zone.js/dist/zone-node';
import 'zone.js';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from  '../../aot/src/uni/app.server.ngfactory';
import * as express from 'express';
import { ngUniversalEngine } from './universal-engine';
enableProdMode();
const server = express();
// set our angular engine as the handler for html files, so it will be used to render them.
server.engine('html', ngUniversalEngine({
    bootstrap: [AppServerModuleNgFactory]
}));
// set default view directory
server.set('views', 'src');
// handle requests for routes in the app.  ngExpressEngine does the rendering.
server.get(['/', '/dashboard', '/heroes', '/detail/:id'], (req:any, res:any) => {
    res.render('index.html', {req});
});
// handle requests for static files
server.get(['/*.js', '/*.css'], (req:any, res:any, next:any) => {
    let fileName: string = req.originalUrl;
    console.log(fileName);
    let root = fileName.startsWith('/node_modules/') ? '.' : 'src';
    res.sendFile(fileName, { root: root }, function (err:any) {
        if (err) {
            next(err);
        }
    });
});
// start the server
server.listen(3200, () => {
    console.log('listening on port 3200...');
});

src/uni/Universal-engine.ts

import * as fs from 'fs';
import { renderModuleFactory } from '@angular/platform-server';
const templateCache = {}; // cache for page templates
const outputCache = {};   // cache for rendered pages
export function ngUniversalEngine(setupOptions: any) {
  return function (filePath: string, options: { req: Request }, callback: (err: Error, html: string) => void) {
    let url: string = options.req.url;
    let html: string = outputCache[url];
    if (html) {
      // return already-built page for this url
      console.log('from cache: ' + url);
      callback(null, html);
      return;
    }
    console.log('building: ' + url);
    if (!templateCache[filePath]) {
      let file = fs.readFileSync(filePath);
      templateCache[filePath] = file.toString();
    }
    // render the page via angular platform-server
    let appModuleFactory = setupOptions.bootstrap[0];
    renderModuleFactory(appModuleFactory, {
      document: templateCache[filePath],
      url: url
    }).then(str => {
      outputCache[url] = str;
      callback(null, str);
    });
  };
}

ルートディレクトリにあると思われるtsconfig.tsファイルに以下の構成を追加します

{
    "compilerOptions": {
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2016", "dom"],
        "moduleResolution": "node",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "module": "commonjs",
        "types": ["node"],
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "files": [
        "src/uni/app.server.ts",
        "src/uni/server-uni.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "aot",
        "entryModule": "./src/app/app.module#AppModule",
        "skipMetadataEmit": true
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

ルートディレクトリでwebpack.config.uni.jsを最後に

const ngtools = require('@ngtools/webpack');
const webpack = require('webpack');
const path = require('path');
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
module.exports = {
    devtool: 'source-map',
    entry: {
        main: ['./src/uni/app.server.ts', './src/uni/server-uni.ts']
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    target: 'node',
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'server.js'
    },
    plugins: [
        new ngtools.AotPlugin({
            tsConfigPath: './tsconfig.json'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(scss|html|png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: 'raw-loader'
            },
            { test: /\.ts$/,  loader: require.resolve('@ngtools/webpack') },
            {
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
            },
            { test: /\.scss$/, use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }] }
        ]
    }
}

以下のスクリプトをpackage.jsonファイルに追加します。

"ngc-build": "ngc -p ./tsconfig.json", // To generate ngFactory file
"build:uni": "webpack --config webpack.config.uni.js",
"serve:uni": "node dist/server.js",

覚えておくべきことがいくつかあります。

  • window、document、navigator、およびその他のブラウザタイプ-サーバーには存在しない-したがって、それらを使用するか、それらを使用するライブラリ（jQueryなど）は使用しません作業。この機能のいくつかが本当に必要な場合は、この link にいくつかのオプションがあります。
13
mohit

Angularユニバーサルはangular 2.x。Angular 4.xプラットフォームサーバーを使用する必要があります。例は次のとおりです。

For angular 2.X.X：

Express/universalを使用したAngularClassのシードプロジェクト

https://github.com/angular/universal-starter

For angular 4.X.XUse angular platform server

https://github.com/ng-seed/universal

他にもいくつかの例があります。

5
Deepak Kumar

特定のチュートリアルで言及されている例は、Angularリソースセクションで言及されている例を使用しています。最近ドキュメントを更新し、@ angular/universalを実装するための詳細なドキュメントをまだ提供していません。-- This 以前は探していたページでしたが、いくつかの問題がありました here 。それが理由で、彼らはそれを削除し、書き直すことにしました。

3
Devesh Jadon

Angular 4チュートリアルのWebpackを使用したサーバーサイドレンダリング このブログ を見つけることができます。

特徴：

  • Angular 4に基づいて構築されています
  • Angular CLIに依存しません
  • webpack上に構築されています
  • ブログでは、次の3つのフェーズで段階的な説明を提供しています。
    • フェーズ1：Dockerコンテナでサーバー側でレンダリングされたHello Worldページを実行します（便宜上、プリインストールされたDockerイメージを提供していますが、手順は独自に機能するはずですAngular環境）
    • フェーズ2：メインページに新しい機能リンクを作成する
    • フェーズ3（オプション）：RESTfulAPIを介して動的にa WordPressブログPOST

最終結果は、次のようにDockerホストで簡単に表示できます。

(dockerhost)$ docker run -it -p 8002:8000 oveits/angular_hello_world:centos bash
(container)# git clone https://github.com/oveits/ng-universal-demo
(container)# cd ng-universal-demo
(container)# npm i
(container)# npm run start

すでにポート8000​​と8001で他の例を実行しているので、上記のポート8002を選択しました。 DockerホストがVirtualboxで実行されている場合は、Virtualboxホストの8002からVirtualboxVMの8002へのポートマッピングが必要になる場合があります。

ブラウザで、 http：// localhost：8002/blog に移動します。 Wordpress APIからダウンロードされたブログ投稿のコンテンツが表示されます。右クリック->ソースの表示HTMLコンテンツが表示されます。これは、これがサーバー側でレンダリングされたページであることを示しています。

PS：あなたが試したチュートリアルのように、チュートリアルは Rob Wormaldによって最初に作成されたGitプロジェクト に基づいていますが、 FrozenPandazによるこのフォーク で、私は持っていますAngular 4にアップグレードされ、Webpackでより適切に機能するバージョンが見つかりました（詳細については、 ブログ の付録を参照してください）。

1
Olli