Angular Universal 仅显示第一页的页面源答案

【问题标题】：Angular Universal only showing page source for first pageAngular Universal 仅显示第一页的页面源
【发布时间】：2020-02-22 12:01:57
【问题描述】：

我有一个在共享网络服务器上运行的 Angular 通用网络应用程序。我使用 DirectAdmin 中名为 NodeJS Selector 的工具运行它。有了这个，我可以 npm install 和 server:ssr server.js 文件。它正在工作，我可以浏览到我的所有页面，并且可以看到所有内容。

问题在页面源中。当我转到基本 url (www.example.com/) 并右键单击 => '查看页面源代码'时，我可以看到主页的内容，就像 Universal 应该做的那样。但是当我转到我的任何其他页面时，我看不到页面源中的内容，只有 app-root 标记。

我觉得这与路由器模块、我的 server.ts 中的某些东西或什至可能与运行服务器的 Apache 中的配置有关，但我不知道它是什么。

我也尝试过使用 pm2 运行我的应用，但根本没有加载通用。使用 pm2 我只在页面源代码中看到了 app-root 标记。此外，我运行的 pm2 实例每天都会消失，即使在正在运行的实例上执行“pm2 save”也是如此。当我第二天进入 SSH 并执行 'pm2 list' 时，那里什么都没有......所以这就是为什么我切换到 NodeJS 选择器工具，它现在可以正常工作了。

这是我的 app-routing.module.ts（为简洁起见，留下了一些路径和导入）：

const routes: Routes = [
  { path: 'generators', component: GeneratorComponent },
  { path: 'about', component: AboutComponent},
  { path: 'disclaimer', component: DisclaimerComponent},
  { path: 'privacy-policy', component: PrivacyPolicyComponent},
  { path: '', component: HomeComponent },

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled', scrollPositionRestoration: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

server.ts:

import 'zone.js/dist/zone-node';

import * as express from 'express';
import {join} from 'path';

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

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

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

有谁知道为什么只有主页在浏览器的页面源中显示内容，而所有其他页面只有 app-root 标记？

更新

这是我的 .htaccess 文件，如果有帮助的话：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

我让我的网络主机编辑 Apache 的 httpd.conf 文件，并将代理设置为端口 4000，并将文档根目录设置为我的索引文件所在的位置：

 DocumentRoot "/domains/appname.com/public_html/browser"

 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/

我是否应该向 Apache 添加更多配置以使其他页面在服务器端呈现？

【问题讨论】：

因此，如果您在内部页面上进行硬浏览器刷新，您不会在视图源上看到呈现的内容？
刚刚尝试过，但仍然看不到源中的内容。我还尝试使用 curl 调用该页面，但我也没有在那里获得内容。只有 app-root 标签。
这是在外部服务器上吗？还是本地主机？如果在本地主机上，你会去端口 4000 对吗？
使用正常构建的应用程序 - 同意。但是，节点应该服务于这个权利吗？节点服务器可以提供实际路径。我还要解释为什么只有你的索引渲染了内容。
@MikeOne 所以我删除了 .htaccess 文件，就是这样！路线仍在工作，我没有像您怀疑的那样在刷新时收到任何 404 错误。如果您想添加您的解决方案作为答案，我可以接受它并投票反对它！我花了一段时间才让我的网站完全正常运行。谢谢！

标签： node.js angular angular-universal

【解决方案1】：

如果你使用 Angular Universal 在服务器端渲染，你需要移除 index.html 的 .htaccess 重写规则。节点服务器现在将处理所有传入路由的请求，因此不应再进行重写。

【讨论】：