У меня очень простое c MVC решение, в котором есть кнопка для запуска запроса AJAX на мой Angular сайт. Это запрос GET для компонента, который находится на моих маршрутах. Этот Angular сайт размещен в IIS, и я могу получить доступ к этому приложению и ко всем маршрутам из браузера. Моя цель - нажать эту кнопку, получить доступ к приложению Angular и загрузить результат в модальном режиме, то есть отправить запрос GET в MyAngularApp / editItemPage / ItemID.
Это должно вернуть форму редактирования и ее функциональность. , который я могу вставить в модал. Однако постоянно происходит то, что Angular пытается маршрутизировать исходный URL, то есть URL моего MVC решения. Очевидно, что этот URL отсутствует в списке Angular маршрутов, поэтому он возвращает ошибку, открывает модальное окно и ничего не делает:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'MVCAngular'
Странно, однако, что после того, как я нажал кнопку второй раз, модал открывается и загружает приложение - root в модал, который я даже не запрашиваю. Приложение - root работает во всем своем функционале; каждая его часть функционирует, но я не хочу загружать это приложение - root, я хочу загрузить другой компонент.
Есть ли что-то, что я могу сделать, чтобы убедиться, что маршрут, который я указываю это то, что загружается, и Angular не пытается перенаправить URL моего MVC решения?
РЕДАКТИРОВАТЬ: AJAX вызов:
$.ajax({
url: '/AngularApp/edit/1',
type: 'GET',
error: function (xhr, status) {
console.log('error');
},
success: function (data) {
console.log('Success!');
console.log(data);
$('#addModalSolo').modal('toggle');
$('.modalbody').html(data);
}
});
app.module. ts:
@NgModule({
declarations: [
AppComponent,
EditLocationSoloComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'edit/:id', component: EditLocationSoloComponent }
])
],
providers: [{
provide: APP_BASE_HREF,
useValue: '/AngularApp/'
}],
bootstrap: [AppComponent],
entryComponents: [EditLocationSoloComponent]
})
export class AppModule { }
index. html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestAngular</title>
<base href="/AngularApp/">
<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>