Angular 通用: Splitting project [solution for old or complex project]

Question

我从事一个相当古老的 Angular 项目，我们从 2.0 版本开始研究它，并在发布后对其进行升级。我们现在是 4.3

现在，这个项目非常复杂，有很多特性，还有很多(旧的)对等依赖，其中一些不再维护。

我试图在这个项目上实现angular universal，以改善SEO，但我遇到了一个接一个的错误，而且似乎没有尽头。

所以我的问题是:

• 有没有一种方法可以在不重构所有内容的情况下在旧项目上实现 Angular Universal？
• 如果不是，有没有办法只在项目的一部分上实现 Angular 通用，比如在静态非复杂页面上？

欢迎所有的回答和提示!

Answer 1

在旧项目上实现 Angular universal 可能真的非常痛苦:

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

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

• angular old-dependent 部分，具有复杂的代码/功能
• 需要 SEO 友好的静态页面 => 而且，好消息，这是给您带来最多 SEO juice

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

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

1. 正在创建一个新的 app-universal文件夹，带有 app-universal.module.ts
2. 从初始项目中导入我需要的东西(比如一些助手/接口(interface)/服务)
3. 使用 SEO 友好的内容构建我的静态页面
4. 在项目中实现 Angular 通用，感谢本指南:Angular Universal guide
5. 更改 <base href="">简化应用程序到 <base href="/content">
6. 在我的 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",
  ...
}
],

1. 在我的 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编译您的简化应用程序并使用通用渲染它。

1. 使用 Apache Location和 ReverseProxy在我的服务器上启动我的主应用程序 /路径，以及我在 /content 上的简化应用程序或 /blog或 /whatever路径:

---

在/etc/apache2/site-availables/your-project.conf 文件中(在 <VirtualHost:.80> block 上，例如 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/*网址 SEO 友好

帮助您克服当前的普遍错误:Angular with universal does not work