Angular Universal only showing page source for first page

问题

I have an Angular Universal web app running on a shared web server. I ran it with a tool that is in my DirectAdmin called NodeJS Selector. With this I could npm install and server:ssr the server.js file. It's working, I can browse to all my pages and I see all the content.

The problem however is in the page source. When I go the base url (www.example.com/) and I right-click => 'view page source', I can see the content of the home page just like Universal is supposed to do. But when I go to any of my other pages I don't see the content in the page source, only the app-root tag.

I feel like this has something to do with either the router module, something in my server.ts or perhaps even a configuration in Apache, which the server is running on, but I can't figure out what it is.

I also tried running my app with pm2, but that didn't load universal at all. With pm2 I only saw the app-root tag in the page source. Also the pm2 instance I had running disappeared every day, even when doing 'pm2 save' on the running instance. When I entered SSH the next day and did 'pm2 list' there was nothing there... So that's why I switched to the NodeJS Selector tool which got it working halfway now.

This is my app-routing.module.ts (left some paths and imports out for brevity):

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}`);
});

Does anyone know why only the homepage is showing content in the page source of the browser and all other pages only the app-root tag?

Update

Here is my .htaccess file, if it helps:

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

I had my web host edit Apache's httpd.conf file with a proxy setting to port 4000 and set the document root to where my index file is located:

 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/

Should I add more configuration to Apache for the other pages to be server-side rendered?

回答1:

If you use Angular Universal to render on the server-side, you need to remove the .htaccess rewrite rule to index.html. The node server will handle the requests of all incoming routes now so rewriting should no longer be done.

来源：https://stackoverflow.com/questions/58570296/angular-universal-only-showing-page-source-for-first-page

标签

node.js

angular

angular-universal