服务器端渲染。网络 API 和 Angular 2

Question

我开发了一个使用 ASP.NET Core Web API 和 Angular 4 构建的 Web 应用程序。我的模块打包器是 Web Pack 2。

我想让我的应用程序可抓取或 link 可由 Facebook、Twitter、Google 共享。当某些用户尝试 post 我在 Facebook 的新闻时， url 必须相同。例如，Jon 想在 Facebook 上与 url - http://myappl.com/#/hellopage 分享一个页面，然后 Jon 将这个 link 插入 Facebook：http://myappl.com/#/hellopage.

看过Angular Universal server side rendering without tag helper的教程，想做服务端渲染。因为我使用 ASP.NET Core Web API 并且我的 Angular 4 应用程序没有任何 .cshtml 视图，所以我无法从控制器发送数据以通过 ViewData["SpaHtml"] 从我的控制器查看：

ViewData["SpaHtml"] = prerenderResult.Html;

此外，我看到 this google tutorial of Angular Universal，但他们使用 NodeJS 服务器，而不是 ASP.NET Core。

我想使用服务器端预渲染。我通过这种方式添加元标签：

import { Meta } from '@angular/platform-browser';

constructor(
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this page at social nets
    this.metaService.addTags([
        // Open Graph data
        { property: 'og:title', content: newText },
        { property: 'og:description', content: newText },        { 
        { property: "og:url", content: window.location.href },        
        { property: 'og:image', content: "http://www.freeimageslive.co.uk/files
                                /images004/Italy_Venice_Canal_Grande.jpg" }]);

当我在浏览器中检查这个元素时，它看起来像这样：

<head>    
    <meta property="og:title" content="Foo data. This is test data!:)">    
    <meta property="og:description" content="Foo data. This is test data!:)">
    <meta name="og:url" content="http://foourl.com">
    <meta property="og:image" content="http://www.freeimageslive.co.uk/files
/images004/Italy_Venice_Canal_Grande.jpg"">    
</head>

我正在以常规方式引导应用程序：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

我的 webpack.config.js 配置如下所示：

var path = require('path');

var webpack = require('webpack');

var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var WebpackNotifierPlugin = require('webpack-notifier');

var isProd = (process.env.NODE_ENV === 'production');

function getPlugins() {
    var plugins = [];

    // Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    plugins.push(new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
    }));

    plugins.push(new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    }));
    plugins.push(new CleanWebpackPlugin(
        [
            './wwwroot/js',
            './wwwroot/fonts',
            './wwwroot/assets'
        ]
    ));

    return plugins;
}


module.exports = {

    devtool: 'source-map',

    entry: {
        app: './persons-app/main.ts' // 
    },

    output: {
        path: "./wwwroot/",
        filename: 'js/[name]-[hash:8].bundle.js',
        publicPath: "/"
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        outputPath: path.join(__dirname, 'wwwroot/')
    },

    module: {
        rules: [{
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: 'tslint-loader',
                enforce: 'pre'
            },
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',

                    'angular-router-loader',

                    'source-map-loader'
                ]
            },
            {
                test: /\.js/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.(png|jpg|gif|ico)$/,
                exclude: /node_modules/,
                loader: "file?name=img/[name].[ext]"
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,                
                use: ['to-string-loader', 'style-loader', 'css-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.html$/,
                loader: 'raw'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                loader: 'file?name=fonts/[name].[ext]'
            }
        ],
        exprContextCritical: false
    },
    plugins: getPlugins()

};

是否可以在没有 ViewData 的情况下进行服务器端渲染？在 ASP.NET Core Web API 和 Angular 2 中是否有另一种方法来进行服务器端渲染？

我已经上传an example to a github repository.

Answer 1

根据您的链接教程，您可以直接从控制器 return HTML。

预呈现页面将在 http://<host>:

可用

[Route("")]
public class PrerenderController : Controller
{
    [HttpGet]
    [Produces("text/html")]
    public async Task<string> Get()
    {
        var requestFeature = Request.HttpContext.Features.Get<IHttpRequestFeature>();
        var unencodedPathAndQuery = requestFeature.RawTarget;
        var unencodedAbsoluteUrl = $"{Request.Scheme}://{Request.Host}{unencodedPathAndQuery}";
        var prerenderResult = await Prerenderer.RenderToString(
            hostEnv.ContentRootPath,
            nodeServices,
            new JavaScriptModuleExport("ClientApp/dist/main-server"),
            unencodedAbsoluteUrl,
            unencodedPathAndQuery,
            /* custom data parameter */ null,
            /* timeout milliseconds */ 15 * 1000,
            Request.PathBase.ToString()
        );
        return @"<html>..." + prerenderResult.Html + @"</html>";
    }
}

注意 Produces 属性，它允许 return HTML 内容。请参阅 this 问题。

Answer 2

Angular 中有一个选项可以使用 HTML5 样式的 url（没有哈希）：LocationStrategy and browser URL styles。你应该选择这种 URL 风格。对于每个要在 Facebook 上共享的 URL，您需要呈现整个页面，如您引用的教程中所示。在服务器上拥有完整的 URL 您可以呈现相应的视图和 return HTML.

@DávidMolnár 提供的代码可能非常适合这个目的，但我还没有尝试过。

更新：

首先，要使服务器预呈现正常工作，您不应使用 useHash: true，因为它会阻止向服务器发送路由信息。

在您引用的 GitHub 问题中提到的演示 ASP.NET Core + Angular 2 universal app 中，ASP.NET 核心 MVC 控制器和视图仅用于服务器预渲染 HTML 来自 Angular 以更方便的方式。对于应用程序的其余部分，仅使用 WebAPI 来自 .NET Core 世界，其他所有内容都是 Angular 和相关的 Web 技术。

使用 Razor 视图很方便，但如果您严格反对，可以直接将 HTML 硬编码到控制器操作中：

[Produces("text/html")]
public async Task<string> Index()
{
    var nodeServices = Request.HttpContext.RequestServices.GetRequiredService<INodeServices>();
    var hostEnv = Request.HttpContext.RequestServices.GetRequiredService<IHostingEnvironment>();

    var applicationBasePath = hostEnv.ContentRootPath;
    var requestFeature = Request.HttpContext.Features.Get<IHttpRequestFeature>();
    var unencodedPathAndQuery = requestFeature.RawTarget;
    var unencodedAbsoluteUrl = $"{Request.Scheme}://{Request.Host}{unencodedPathAndQuery}";

    TransferData transferData = new TransferData();
    transferData.request = AbstractHttpContextRequestInfo(Request);
    transferData.thisCameFromDotNET = "Hi Angular it's asp.net :)";

    var prerenderResult = await Prerenderer.RenderToString(
        "/",
        nodeServices,
        new JavaScriptModuleExport(applicationBasePath + "/Client/dist/main-server"),
        unencodedAbsoluteUrl,
        unencodedPathAndQuery,
        transferData,
        30000,
        Request.PathBase.ToString()
    );

    string html = prerenderResult.Html; // our <app> from Angular
    var title = prerenderResult.Globals["title"]; // set our <title> from Angular
    var styles = prerenderResult.Globals["styles"]; // put styles in the correct place
    var meta = prerenderResult.Globals["meta"]; // set our <meta> SEO tags
    var links = prerenderResult.Globals["links"]; // set our <link rel="canonical"> etc SEO tags

    return $@"<!DOCTYPE html>
<html>
<head>
<base href=""/"" />
<title>{title}</title>

<meta charset=""utf-8"" />
<meta name=""viewport"" content=""width=device-width, initial-scale=1.0"" />
{meta}
{links}

<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"" />

{styles}

</head>
<body>
{html}

<!-- remove if you're not going to use SignalR -->
<script src=""https://code.jquery.com/jquery-2.2.4.min.js""
        integrity=""sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=""
        crossorigin=""anonymous""></script>

<script src=""http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js""></script>

<script src=""/dist/main-browser.js""></script>
</body>
</html>";   
}

请注意回退 URL 用于处理 HomeController 中的所有路由并呈现相应的 angular 路由：

builder.UseMvc(routes =>
{
  routes.MapSpaFallbackRoute(
      name: "spa-fallback",
      defaults: new { controller = "Home", action = "Index" });
});

为了更容易开始考虑采用该演示项目并对其进行修改以适合您的应用程序。

更新 2：

如果您不需要使用 ASP.NET MVC 中的任何东西，比如带有 NodeServices 的 Razor，我觉得在 Node.js 服务器上托管带有服务器预渲染的通用 Angular 应用程序更自然.并独立托管 ASP.NET Web Api 以便 Angular UI 可以访问不同服务器上的 API。我认为从 API.

独立托管静态文件（并在情况下利用服务器预渲染）是一种非常常见的方法

这是在 Node.js 上托管的 Universal Angular 的入门回购：https://github.com/angular/universal-starter。

这里是 UI 和网络 API 如何托管在不同服务器上的示例：https://github.com/thinktecture/nodejs-aspnetcore-webapi。注意 API URL 在 urlService.ts.

中是如何配置的

您还可以考虑将 UI 和 API 服务器都隐藏在反向代理后面，以便可以通过相同的 public 域和主机访问两者，而您不必处理 CORS 以使其在浏览器中工作。

服务器端渲染。网络 API 和 Angular 2

Server side rendering. Web API and Angular 2

c#

asp.net-core

angular-universal

asp.net-core-webapi

angular