Я относительно новичок в выражении, но у меня есть одностраничное приложение Angular, которое я пытаюсь развернуть в Heroku здесь:
https://jabooda -heroku.herokuapp.com /
К сожалению, он отображается как пустой экран. Он делает это также, когда я запускаю свой файл server.js на порту 8000 (хотя я верю, что если я смогу это исправить в этом случае, это исправит и в Heroku). Однако, когда я запускаю 'ng serve -open' в своем терминале и просматриваю порт 4200, я могу видеть все просто отлично. Я убежден, что есть проблема с моим файлом server.js, который заботится о маршрутизации, но вот все соответствующие файлы:
server.js
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 8000;
const server = require('http').Server(app);
app.use(express.static(__dirname + '/src'));
server.listen(port, function() {
console.log("App running on port " + port);
})
// PathLocationStrategy
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/src/index.html'));
})
мой файл index.html (заботится о маршрутизации)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jabooda</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Одно из решений, которое я видел при поиске, - это импортировать HashLocationStrategy и LocationStrategy в мой файл app.module.ts (фрагмент ниже):
app.module.ts
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
providers: [
ProjectService,
CareerService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
И о маршрутизации позаботятся в следующих двух файлах (они находятся в одном каталоге), но это не сработало, поэтому я сейчас запутался:
routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ProjectsComponent } from '../projects/projects.component';
import { ProjectdetailComponent } from '../projectdetail/projectdetail.component';
import { ProjectDialogComponent } from '../project-dialog/project-dialog.component';
import { SubcontractingComponent } from '../subcontracting/subcontracting.component';
import { CareersComponent } from '../careers/careers.component';
import { ContactusComponent } from '../contactus/contactus.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'projects', component: ProjectsComponent },
{ path: 'projectdetail/:id', component: ProjectdetailComponent },
{ path: 'project/:id', component: ProjectDialogComponent },
{ path: 'subcontracting', component: SubcontractingComponent },
{ path: 'careers', component: CareersComponent },
{ path: 'contactus', component: ContactusComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
приложение-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
Как бы я поступил так? Мой первоначальный подход путем добавления провайдеров HashLocationStrategy и LocationStrategy в мой файл модуля, похоже, не работает, и я думаю, что сервер должен быть в состоянии заставить мою текущую маршрутизацию работать, но я не уверен, как подойти. Любая помощь приветствуется!