Стек - Angular7, NodeJS с Express. Мое приложение Angular должно работать только на части моего сайта и маршрутизировать только под domain.com/finance, остальное все просто HTML, CSS и JS.
Ожидаемое поведение - Мое приложение и все его страницы должны направляться по базовой ссылке, которую я указал в заголовке индекса. html и в опциях сборки, но оно работает только на целевой странице приложения.
Фактическое поведение- Мое приложение правильно перенаправляет на свою домашнюю страницу, но при маршрутизации на другую страницу, похоже, игнорируется атрибут base href. Например, я ожидаю, что приложение будет перенаправлять на страницу domain.com/finance/budget, но вместо этого оно будет перенаправляться на domain.com/budget, когда я покидаю свою целевую страницу. Ручная навигация к / finance / budget перенаправляет на целевую страницу.
Устранение неполадок выполнено до сих пор - Тройной проверил, что мой базовый тег href установлен в скомпилированном индексе. html, попробовал --base-href / finance / option включался и выключался, пробовал --deploy-url / finance / option, включался и выключался, обслуживал папку «finance-app» статически и выключался (обслуживает только домашнюю страницу, когда она включена), смотрел видео где другие go прошли те же самые шаги, что и у меня, и имели успех там, где у меня нет.
Другие симптомы - В видео, посвященном устранению неисправностей, которое я смотрел, я заметил, что --base Опция -href / finance / option должна была создать папку / finance в моей директории скомпилированного проекта, но это не так. Если я покидаю свой проект, поскольку он компилируется, все заканчивается неудачей, потому что он не может загрузить файлы JS. Если я вручную переместу файлы JS в подкаталог / finance, я смогу попасть на мою домашнюю страницу, но она не будет правильно маршрутизироваться.
Скорее всего проблемы - Мой сервер неправильно настроен на справиться с приложением Angular на этом маршруте.
Код:
- Мой сервер: (соответствующие маршруты и опции)
const express = require('express');
const app = express();
const PORT = 3000;
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/projects/finance-app'));
app.get('/finance*', (req, res) => {
res.sendFile('/projects/finance-app/index.html', { root: __dirname });
});
app.get('*', (req, res) => {
res.sendFile('/projects/finance-app/index.html', { root: __dirname });
});
app.listen(PORT, () => console.log('Server listening on port ' + PORT));
Индекс моего приложения. html: <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Finance App</title>
<base href="/finance/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Команда построения с параметрами ng build --prod --base-href /finance/
Структура папок сайта: (соответствующие части)
portfolio/
├── node_modules/
│ └── ......
├── projects/
│ ├── finance-app/
| | ├── finance/
| | | └── (angular javascript and css files)
| | └── index.html
├── public/
| ├── (other project public assets folders)
| ├── views/
| | └── home.html
| ├── scripts/
| └── styles/
├── app.js
├── package.json
└── package-lock.json
Angular маршруты проекта (соответствующие части)
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'beginner-guide', component: GuideComponent},
{path: 'retirement', component: RetirementCalcComponent},
{path: 'loan', component: LoanComponent},
{path: 'budget', component: BudgetCalcComponent},
{path: 'budget/results', component: BudgetResultsComponent}
];
@NgModule({
declarations: [
AppComponent,
RetirementCalcComponent,
GuideComponent,
HeaderComponent,
HomeComponent,
FooterComponent,
BudgetCalcComponent,
BudgetResultsComponent,
LoanComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(
appRoutes
),
],
providers: [
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]
})