Question

我有一个在共享Web服务器上运行的Angular Universal Web应用程序。我使用DirectAdmin中的一个名为NodeJS Selector的工具来运行它。这样我就可以npm install和server：ssr server.js文件。它正在运行，我可以浏览到所有页面，然后看到所有内容。

问题，但是在页面源中。当我访问基本URL（www.example.com/）并右键单击=>'view page source'时，我可以看到主页的内容，就像Universal应该做的一样。但是，当我转到其他任何页面时，都看不到页面源中的内容，只有app-root标记。

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

我也尝试在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 { }

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添加更多配置，以便其他页面在服务器端呈现？

Answer 1

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

Angular Universal仅显示首页的页面来源

1 个答案: