Angular 通用：拆分项目 [旧项目或复杂项目的解决方案]

Question

我在一个相当古老的 angular 项目上工作，我们从 2.0 版本开始处理它，并在发布后对其进行升级。我们现在使用 4.3

现在，这个项目非常复杂，有很多功能，还有很多（旧的）对等依赖，其中一些不再维护。

我试图在这个项目上实现angular通用，以改善搜索引擎优化，但我遇到了一个又一个错误，而且似乎没有尽头。

所以我的问题是：

有没有办法在旧项目上实现 angular 通用，而无需重构所有内容？
如果不是，有没有办法只在项目的一部分上实现 angular 通用，比如在静态非复杂页面上？

欢迎所有回答和提示！

Answer 1

在旧项目上实现 Angular 通用可能真的非常痛苦：

你使用 vanilla javascript => 它无法编译
你使用了一个使用 vanilla 的 peer dep javascript => 它无法编译，并且有很多旧的 dep 是这样编码的

我也必须在一个旧项目上实现它，和你一样，我有很多编译错误。所以我决定将我的应用分成两个部分，两个项目：

angularold-dependent部分，复杂code/feature
需要 SEO 友好的静态页面 => 而且，好消息，这是给你带来最多的东西 SEO juice

不好的是这两个项目是相互独立的，所以你不能使用像localStorage、routerLink之类的东西。但是它们连接到同一个API，因此您可以随时在他们之间共享数据

从技术上讲，我是这样做的：

正在创建一个新的 app-universal 文件夹，app-universal.module.ts
从初始项目中导入我需要的东西（比如一些 helpers/interface/services）
使用 SEO 友好的内容构建我的静态页面
在项目中实施 Angular 通用，感谢本指南：Angular Universal guide
将简化应用程序的 <base href=""> 更改为 <base href="/content">
正在我的 angular-cli.json 中创建 3 个项目：

 "apps": [
{
  "name": "app",
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "app/main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  ...
},
{
  "name": "universal",
  "root": "src",
  "outDir": "dist-universal",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "app-universal/index.html",
  "main": "app-universal/main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app-universal",
  "...
},
{
  "name": "server",
  "platform": "server",
  "root": "src",
  "outDir": "src/app-universal/dist-universal-server",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "app-universal/index.html",
  "main": "app-universal/main.server.ts",
  "test": "test.ts",
  "tsconfig": "app-universal/tsconfig.server.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app-universal",
  ...
}
],

在我的 package.json 上添加构建命令快捷方式：

"scripts": {
  "prebuild-server": "ng build --prod --aot --app server && ngc -p src/app-universal/tsconfig.server.json",
  "build-server": "ts-node src/server.ts",
  ...
},

和运行宁npm run build-server编译你的简化应用程序并用通用渲染它。

在我的服务器上使用 Apache Location 和 ReverseProxy 在 / 路径上启动我的主应用程序，在 /content 或 [=26= 上启动我的简化应用程序] 或 /whatever 路径：

在 /etc/apache2/site-availables/your-project.conf 文件中（在 <VirtualHost:.80> 块上，例如 DocumentRoot 之后）：

  ProxyRequests Off
  ProxyPreserveHost On
  ProxyVia Full
  <Proxy *>
    Require all granted
  </Proxy>
  <Location /content>
    ProxyPass http://127.0.0.1:4000
    ProxyPassReverse http://1127.0.0.1:4000
  </Location>

然后您可以使用 pm2 让您的 Node.js 应用程序在后台运行：How To Set Up a Node.js Application for Production on Ubuntu 16.04

然后 waq 完成了。我将我的项目拆分为两个相互独立的子项目，并且运行它们在同一个域中，所有 /content/* url SEO 友好

帮助您克服当前普遍存在的错误：

Answer 2

现在有一个命令可以让你的生活变得更轻松：

ng add @nguniversal/express-engine --clientProject <project-name>

您可以在此处阅读更多相关信息：

https://angular.io/guide/universal

Angular 通用：拆分项目 [旧项目或复杂项目的解决方案]

Angular universal : Splitting project [solution for old or complex project]

angular-universal

angular