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

Question

我在一个非常古老的角度项目上工作，我们在2.0版本上开始研究它，并在发布后升级它。我们现在在4.3

现在，该项目非常复杂，具有许多功能，以及许多（旧的）对等依赖项，而不再维护其中的一些。

我试图在这个项目中实现角度通用，以改善搜索引擎优化，但我一个接一个地遇到错误，看起来这没有尽头。

所以我的问题是：

• 有没有办法在旧项目上实现角度泛型，而不重构一切？
• 如果不是，有没有办法只在项目的一部分上实现角度通用，比如在静态非复杂页面上？

欢迎所有答案和提示！

Answer 1

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

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

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

• 角度旧的依赖部分，具有复杂的代码/特征
• 需要SEO友好的静态页面=>和好消息，这是带给你最多SEO汁液的东西

不好的部分是2个项目彼此独立，所以你不能使用像localStorage，routerLink等的东西。但它们连接到相同的API，所以你总是可以在它们之间共享数据

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

1. 使用app-universal创建一个新的app-universal.module.ts文件夹
2. 从初始项目导入我需要的东西（比如一些帮助器/接口/服务）
3. 使用SEO友好的内容构建我的静态页面
4. 通过本指南实现项目中的Angular universal：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",
  ...
}
],

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

8. 在我的服务器上使用Apache Location和ReverseProxy在/路径上启动我的主应用程序，以及我在/content或/blog或/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友好

为了帮助您解决当前的普遍错误：qazxsw poi

Answer 2

如今有一个命令可以让你的生活更轻松：

Angular with universal does not work

你可以在这里读更多关于它的内容：

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