Маршруты в Node / Express и развернутые Angular не работают - PullRequest
Новая
       2

Маршруты в Node / Express и развернутые Angular не работают

0 голосов
/ 13 февраля 2019

Маршруты в развернутом приложении Angular не работают, если их обслуживает узел с Express.Я знаю, что об этом уже спрашивали, но есть кое-что, что я, вероятно, упускаю, что сводит меня с ума.

Структура файла в папке «express», в которой запускается Node, примерно следующая: 

express
├── controller.js
├── index.js
├── ngForm 
│   ...see below...
├── node_modules
│   ...
├── package.json
├── public
│   ├── file.json
│   └── rubric.html
├── router.js
├── ssl
    ├── cert.pem
    └── key.pem

, а проект Angular находится в ngForm: 

ngForm 
├── angular.json
├── dist
│  └── rubric
│       ├── assets
│       ├── favicon.ico
│       ├── index.html
│       ├── main.js
│       ├── main.js.map
│       ├── polyfills.js
│       ├── polyfills.js.map
│       ├── runtime.js
│       ├── runtime.js.map
│       ├── styles.js
│       ├── styles.js.map
│       ├── vendor.js
│       └── vendor.js.map
├── e2e
├── node_modules
├── package.json
├── src
├── tsconfig.json
└── tslint.json

Некоторые релевантныеУгловой код:

app.module.ts: 

const appRoutes: Routes = [
  {path: '', redirectTo: '/rubric', pathMatch: 'full' }, 
  {path: 'rubric', component: RubricComponent},
  {path: 'rubricbuilder', component: RubricbuilderComponent},
  {path: '**', component: PageNotFoundComponent}
]

app.component.ts: 

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.scss'],
  template: `<router-outlet></router-outlet>`
})

Соответствующий код Node.js:

server.js: 

app.use(express.static("ngForm/dist/rubric"));
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

Я запустил ng build из проекта Angular в ngForm, а вывод - в ngForm / dist.

При запуске ng serve в AngularProject я могу перейти к https://localhost:4200/rubric и https://localhost:4200/rubricbuilder.

С узла я могу добраться только до https://localhost:8000/, который перенаправляет / изменяет URL-адрес на https://localhost:8000/rubric, но я не могу запустить https://localhost:8000/rubric сам по себе или https://localhost:8000/rubricbuilder. Изучая угловые маршруты и перезапуская сборку, я могу сделать экспресс-шоу rubricbuilder на / route, который изменяет URL-адрес на https://localhost:8000/rubricbuilder. Чего мне не хватает?

1 Ответ

0 голосов
/ 14 февраля 2019

Я не очень знаком с angular, но этот вопрос связан с VueRouter .

Поскольку вы не определили маршрутизатор /rubric в промежуточном ПО Express, поэтому вы можете получить ошибку вроде404 NOT FOUND.

При использовании SPA-маршрутизатора в режиме истории HTML5 вам потребуются дополнительные конфигурации для вашего сервера, например,

, отправляйте SPA на каждом маршруте: 

app.use(express.static("ngForm/dist/rubric"));
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

Это может быть не лучшим решением для экспресса, вы можете искать другие решения, например, например, VueRouter предлагает использовать connect-history-api-fallback с экспрессом.

...