使用Angular4（Angular Universal）进行服务器端渲染

时间：2017-06-20 04:55:06

标签： angular webpack angular-universal

我正在开发一个Angular4 webpack项目，我想添加AngularUniversal以使服务器端呈现成为可能。但是大多数教程都使用了角度cli。我想将Universal与webpack集成。我尝试了这个{ {3}}没有运气。有人可以帮忙。

4 个答案:

答案 0 :(得分：13)

此Angular Universal仅适用于Angular 2.如果您想从头开始，可以使用具有以下所有功能的Angular 4 Universal Seed：

  • Angular 4
  • 的WebPack
  • dev / prod modes
  • SCSS编译
  • i18n，SEO和TSLint / codelyzer
  • 延迟加载，配置，缓存

或者，如果您已经运行了Angular 4项目，则可以通过在代码中进行以下设置来集成Universal：

安装这些软件包：
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 /服务器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 /万向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中找到一些选项。

答案 1 :(得分：5)

角度通用仅用于角度2.x. Angular 4.x您需要使用平台服务器。示例如下：

适用于角度2.X.X：

使用express / universal

的AngularClass种子项目

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

适用于角度4.X.X 使用角平台服务器

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

还有其他一些例子：

答案 2 :(得分：3)

给定教程中提到的示例使用Angular Resources部分中提到的示例。他们最近更新了他们的文档，还没有提供实现@ angular / universal的详细文档。 This曾经是您要查找的页面，但它提到了一些问题here。也许这就是他们删除它并决定重写它的原因。

答案 3 :(得分：1)

您可以在this blog上找到有关Webpack的服务器端渲染的Angular 4教程。

特点：

  • 它建立在Angular 4
    • 之上
  • 它不依赖于Angular CLI
  • 它建立在Webpack上
  • 博客分三个阶段提供分步说明：
    • 第1阶段：在Docker容器上运行服务器端渲染的Hello World页面（为方便起见，我提供了预安装的Docker映像，但说明应该适用于您自己的Angular环境）
    • 阶段2：在主页面上创建新的功能链接
    • 阶段3（可选）：通过RESTful API动态插入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

我选择了上面的端口8002，因为我已经在端口8000和8001上运行了其他示例;如果Docker主机在Virtualbox上运行，则可能需要从Virtualbox主机的8002到Virtualbox VM的8002进行端口映射。

在浏览器上，导航至http://localhost:8002/blog。您将看到从Wordpress API下载的博客文章的内容。使用右键单击 - >查看源，您将看到HTML内容。这表明这是一个服务器端呈现页面。

PS：就像你试过的教程一样，本教程基于Git project that originally has been created by Rob Wormald，但是this fork by FrozenPandaz，我找到了一个升级到Angular 4的版本，并且在Webpack上运行得更好（有关详细信息，请参阅the blog的附录）。

相关问题
最新问题