将 Angular 4 网络应用程序转换为 Angular 通用应用程序答案

【问题标题】：Convert Angular 4 web app to Angular Universal app将 Angular 4 网络应用程序转换为 Angular 通用应用程序
【发布时间】：2017-09-13 16:57:42
【问题描述】：

我需要将 Angular 4 网络应用程序转换为 Angular Universal。目前，该网络应用程序无法被 Google 正确索引（以及 Facebook 社交预览缩略图），因为它是一个单页应用程序并在客户端渲染。所以现在我需要实现 Angular Universal，服务器端渲染。

我了解了如何使用 this great video series 创建新的 Angular Universal 应用程序。

问题：您能否告诉我将现有应用程序转换为 Angular Universal 应用程序的方向。也许是一个不错的 URL 或步骤，或者任何方向都会受到高度赞赏。

注意：这里的角度版本不是问题。2 或4。

【问题讨论】：

abandoned 是什么意思？我们不能进一步使用它还是什么？ @estus
它是用黑色大写字母github.com/angular/universal 写的。 Universal 不支持 A4。 A4 有不同的 API 用于服务器端渲染。
好的。我有 A4 网络应用程序。那么我可以将其作为 Angular 通用应用程序 (4) 吗？ @estus
上面有4个链接。他们解释了一切。
嗯..看起来这些网址很重要。那么你能为这篇文章构建一个小答案吗？希望对大家有所帮助。 @estus

标签： angular server-side-rendering angular-universal

【解决方案1】：

来自this blog (web archive backup)

第一个npm install --save @angular/platform-server @angular/animations

编辑 /src/app/app.module.ts 并将 BrowserModule 导入更改为 BrowserModule.withServerTransition({appId: 'your-app-name'}),

创建文件/src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
imports: [
    ServerModule,
    AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }

创建文件/src/server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

编辑/src/tsconfig.app.json 并将server.ts 添加到exclude 数组中

编辑/tsconfig.json 并在"compilerOptions" 节点后添加以下内容

"angularCompilerOptions": {
    "genDir": "./dist/ngfactory",
    "entryModule": "./src/app/app.module#AppModule"
}

编辑package.json 并通过添加"prestart" 和更改"start" 来更改"scripts" 部分

"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"

您现在可以在控制台/终端窗口中输入npm run start，它将构建所有内容并开始在端口 4000 上提供服务。

它不会查看源代码或进行热模块替换等，但是一旦服务器运行，您也可以在另一个窗口中输入ng serve（假设您使用的是@angular/cli npm 包）并进行编辑像往常一样使用您的单页应用程序，并且仅在重建或更改服务器代码时使用npm run start。

【讨论】：

【解决方案2】：

就更好的 SEO 索引而言，Angular Universal 是一个更好的选择。您对将当前 Angular 4 项目迁移到 Universal 提出了非常好的担忧。然而，随着 Angular 4 的发布，他们已经将其打包成通用的。我会写一篇关于它的教程并很快与你分享。

不过，你可以试试ng-universal-cli? https://www.npmjs.com/package/ng-universal-cli

有了这个，你可以用一个命令ngu new <project-name>设置你的新Angular 4 Universal项目

然后您可以将现有的项目文件移动到这个新创建的项目中。

【讨论】：

你写教程了吗？