Как обрабатывать маршрут маршрута угловой2 в Nodejs

Question

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

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

Я не знаю Как обрабатывать это в приложении узла?

Answer 1

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

Navigated to http://localhost:3000/search 

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

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

RouterModule.forRoot(routes), ... 

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

Вы, вероятно, были с помощью "Hash Местоположение стратегии", как это:

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

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

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

Шаг 1. - Требовать express-history-api-fallback module.

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) 

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

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

* Удостоверьтесь, что это прежде, чем вы будете обрабатывать 404 или sth. как это .

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