Как обрабатывать маршрут маршрута angular2 в Nodejs?

Question

Я работаю над приложением NodeJS с Angular2. В моем приложении у меня есть домашняя страница и страница поиска. Для домашней страницы у меня есть HTML-страница, которая будет отображаться для localhost:3000/, и от пользователя домашней страницы перейдите к поиску, то есть localhost:3000/ страница поиска, которую я обработал маршрутами angular2.

У меня нет страницы для страницы поиска, ее вид отрисовывается с помощью angular2. Но когда я напрямую нажимаю localhost:3000/search, так как у меня нет этой маршрутизации в моем приложении узла, это выдает ошибку.

Я не знаю, как справиться с этим в приложении узла?

Answer 1

Если вы введете localhost:3000/search непосредственно в панели навигации браузера ваш браузер отправляет запрос "/search" на ваш сервер, который можно увидеть в консоли (убедитесь, что вы отметили кнопку "Preserve Log").

Navigated to http://localhost:3000/search

Если вы запускаете полностью статический сервер, это приводит к ошибке, поскольку страница поиска не существует на сервере. Используя экспресс, например, вы можете перехватить эти запросы и вернуть файл index.html. Запускается загрузчик angular2, и активируется маршрут /search, описанный в вашем @RouteConfig.

// example of express()
let app = express();
app.use(express.static(static_dir));

// Additional web services goes here
...

// 404 catch 
app.all('*', (req: any, res: any) => {
  console.log(`[TRACE] Server 404 request: ${req.originalUrl}`);
  res.status(200).sendFile(index_file);
});

Answer 2

Вам нужно использовать HashLocationStrategy

import { LocationStrategy, HashLocationStrategy } from "angular2/router";
bootstrap(AppComponent, [
 ROUTER_PROVIDERS,
 provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

В вашем файле начальной загрузки.

Если вы хотите использовать PathLocationStrategy (без #), вы должны настроить стратегию перезаписи для своего сервера.

Answer 3

Я долго копался в этой теме и пробовал много методов, которые не работают. Если вы используете angular-cli и express, я нашел решение, если выбранный вами ответ не работает.

Попробуйте этот модуль узла: https://www.npmjs.com/package/express-history-api-fallback

[Angular] Измените файл app.module.ts в разделе @NgModule > import следующим образом:

RouterModule.forRoot(routes), ...

Это так называемая "Стратегия размещения"

Вы, вероятно, использовали "Стратегию определения местоположения хэша" следующим образом:

RouterModule.forRoot(routes, { useHash: true }) , ...

[Express & Node] По сути, вы должны правильно обрабатывать URL, поэтому, если вы хотите вызвать "api/datas" и т. Д., Что не противоречит стратегии расположения HTML5.

В вашем файле server.js (если вы использовали экспресс-генератор, для ясности я переименовал его в middleware.js)

Шаг 1. - Требуется http://the%20express-history-api-fallback.

const fallback = require('express-history-api-fallback');

Шаг 2. У вас может быть много модулей маршрутов, что-н. лайк:

app.use('/api/users, userRoutes);
app.use('/api/books, bookRoutes); ......
app.use('/', index); // Where you render your Angular 4 (dist/index.html) 

Обратите внимание на порядок, который вы пишете, в моем случае я вызываю модуль прямо под app.use ('/', index);

app.use(fallback(__dirname + '/dist/index.html'));

* Убедитесь, что это раньше, где вы обрабатываете 404 или STH. как это.

Этот подход работает для меня:) Я использую стек EAN (Angular4 с cli, Express, Node)