node.js - Angular Universal 仅显示第一页的页面源
问题描述
我有一个在共享 Web 服务器上运行的 Angular Universal Web 应用程序。我使用 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 Selector 工具的原因,它现在可以正常工作了。
这是我的 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 { }
服务器.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 添加更多配置以使其他页面在服务器端呈现?
解决方案
如果你使用 Angular Universal 在服务端渲染,你需要把 index.html 的 .htaccess 重写规则去掉。节点服务器现在将处理所有传入路由的请求,因此不应再进行重写。
推荐阅读
- windows - 在末尾回显文件换行符
- javascript - 根据下拉选项对表格进行排序
- aurelia - Aurelia-Permission 在需要两个权限时显示
- python - 当保持客户端套接字打开以发送多个消息时,为什么当消息延迟很大时程序会出错?
- polymer - 聚合物测试失败,“铬未能最大化”
- javascript - 如何正确修复节点中的渲染 ejs
- angular - 使用 Ng 模型选择下拉菜单不反映 Internet Explorer 11 中的更改
- php - 如何通过 Laravel 为 S3 实现 Amazon V4 签名?
- linq - MVC 多对多仅在代码中首先获取具有某种类型的实体
- php - laravel 多表单路由