11
我开发了一个使用ASP.NET Core Web API和Angular 4构建的Web应用程序。我的模块捆绑器是Web Pack 2。服务器端渲染。 Web API和Angular 2
我想让我的应用程序可以通过Facebook，Twitter，Google进行抓取或链接共享。当某些用户试图在Facebook上发布我的消息时，url必须相同。例如，Jon想在Facebook分享一个页面 - http://myappl.com/#/hellopage，然后Jon将这个链接插入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。
你试过https://github.com/aspnet/JavaScriptServices了吗？ –
@AndriiLitvinov是的，这是需要使用'ViewData'发送HTML到'.cshtml'视图在本教程中，但我只用'.html'看法，并不'.cshtml'意见。 – StepUp
好吧，你为什么认为你需要cshtml视图？为什么不简单地从操作中返回'prerenderResult.Html'？ –