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'？ –