Как обращаться с маршрутом маршрута angular2 в Nodejs

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

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

Я не знаю Как это сделать в node приложении?

Ответ 1

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

Navigated to http://localhost:3000/search

Если вы запускаете полностью статический сервер, это создает ошибку, поскольку страница поиска не существует на сервере. Например, экспресс, вы можете поймать эти запросы и вернуть файл index.html. Загрузочный бутстрап angular2, и активируется маршрут/поиск, описанный в вашем @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);
});

Ответ 2

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

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

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

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

Ответ 3

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

Попробуйте этот модуль node: express-history-api-fallback

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

RouterModule.forRoot(routes), ...

Это так называется: "Стратегия местоположения"

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

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

[Экспресс и node] В основном вы должны правильно обрабатывать URL-адрес, поэтому, если вы хотите называть "api/datas" и т.д., Что не противоречит стратегии размещения HTML5.

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

Шаг 1. - Требовать модуль express-history-api-fallback.

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

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

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)