Ошибка маршрута в Angular 6 / Express

Я разрабатываю приложение nodeJS / Angular 6 / Express. В экспрессе всего 1 маршрут для "бэк-энда" и много маршрутов для угловых.

У меня нет проблем с запуском этого локально, но когда я пытаюсь развернуть его в Azure, маршруты Angular работают нормально, но не внутренние маршруты (которые перенаправляют меня на корневой url).

Я думаю, что Angular имеет приоритет на внутренних маршрутах.

Вот несколько файлов:

server.js:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const fetch = require('node-fetch');
const publicweb = './dist/forms';
const app = express();
app.use(express.static(publicweb));


app.use('/api/test', (req, res) => {
   res.send("test");
});

app.get('*', (req, res) => {
  res.sendFile('index.html', { root: publicweb });
});

const port = '1337';
app.listen(port, () => console.info(`API running on localhost:${port}`));

web.config:

<configuration>
<system.webServer>
<handlers>
<add name = "iisnode" path = "server.js" verb = "*" modules = "iisnode" />
</handlers>
  <rewrite>
    <rules>
            <rule name = "Express.js URIs">
      <match url = "api/*" />
      <action type = "Rewrite" url = "server.js" />
    </rule>
      <rule name = "Angular" stopProcessing = "true">
        <match url = "/*" />
        <conditions logicalGrouping = "MatchAll">
          <add input = "{REQUEST_FILENAME}" matchType = "IsFile" negate = "true" />
          <add input = "{REQUEST_FILENAME}" matchType = "IsDirectory" 
         negate = "true" />
        </conditions>
        <action type = "Rewrite" url = "/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

package.json:

"start" : "node src/server.js"

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RetailComponent } from './retail/form/retail.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/',
    pathMatch: 'full'
  },

 {
    path: 'retail',
    component: RetailComponent
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

Когда я развертываю это приложение в Azure и пытаюсь получить доступ к / api / test

Мое определение сборки в Azure

Большое спасибо за ответ!

вы звоните api/test из http-вызова? или от маршрутного звонка?

mast3rd3mon 14.06.2018 13:32

я называю это из http

Smiloh 14.06.2018 13:37

если вы вызываете это из http, вы не можете получить ошибку на фотографии, эта ошибка связана только с маршрутизацией

mast3rd3mon 14.06.2018 13:39

Да, ты прав. когда я звоню (api / test) в почтальон, я получаю код своего файла index.html в качестве ответа

Smiloh 14.06.2018 13:42
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
4
874
1

Ответы 1

Я думаю, что все ваши запросы на получение сопоставляются с этим фрагментом кода.

app.get('*', (req, res) => {
    enter code here`res.sendFile('index.html', { root: publicweb });
});

вот почему вы получаете index.html в своих запросах к вашему серверу.

И app.use() должен использоваться для применения промежуточного программного обеспечения, поэтому после завершения работы промежуточного программного обеспечения выполняется метод app.get(), и вы получаете index.html.

Другие вопросы по теме