Angular Universal только показывает источник страницы для первой страницы - PullRequest
Новая
       47

Angular Universal только показывает источник страницы для первой страницы

0 голосов
/ 26 октября 2019

У меня есть веб-приложение Angular Universal, работающее на общем веб-сервере. Я запустил его с помощью инструмента, который есть в моем DirectAdmin и называется NodeJS Selector. С этим я мог установить npm и 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 tool , который теперь работает наполовину.

Этомой 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 для отображения других страниц на стороне сервера?

1 Ответ

1 голос
/ 28 октября 2019

Если вы используете Angular Universal для рендеринга на стороне сервера, вам нужно удалить правило перезаписи .htaccess в index.html. Сервер узла теперь будет обрабатывать запросы всех входящих маршрутов, поэтому перезапись больше не должна выполняться.

...