Angular 6 Ошибка "NullInjectorError: Нет провайдера для маршрутизатора!"
В настоящее время я работаю над проектом, в котором мне нужно, чтобы пользователь заполнил угловую форму, а затем отправил ее на маршрут в моем бэкэнде для обработки данных. Бэкэнд находится в ASP.NET, и у меня уже есть функциональная форма в HTML, которая работает:
<body>
<h2 style = "text-align:center">Push notification test</h2>
<form style = "align-content:center" action = "SendPushNotification" method = "post">
<div>
<fieldset>
<legend> Informations </legend>
<label> Notification name : </label>
<input name = "notificationName" id = "notificationName" type = "text" value = "Bonjour" />
</fieldset>
<br />
<fieldset>
<label> Server Key : </label>
<input name = "serverKey" id = "serverKey" type = "text" value = "AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA" />
</fieldset>
<br />
<fieldset>
<label> To mobile user : </label>
<select name = "selectMobile" id = "selectMobile" style = "width:400px" name = "mobileUser">
<option>Select Mobile User</option>
</select>
</fieldset>
<br />
<fieldset>
<label> To topic : </label>
<input name = "topicName" id = "topicName" type = "text" value = "news" />
</fieldset>
<br />
<fieldset>
<label> Message : </label>
<textarea name = "notificationMessage" id = "notificationMessage" cols = "40" rows = "5">Comment tu vas toi ?</textarea>
</fieldset>
<br />
<input type = "submit" value = "Send Notification" />
</div>
</form>
HTML-рендеринг
Итак, я пытаюсь сделать то же самое в Angular 6 с этим результатом, но когда я хочу назначить маршрут «SendNotification» моей кнопке «Отправить», я получаю следующую ошибку:
Угловой рендеринг + ошибка
notification-form.component.html
<button [routerLink] = "['SendNotification']" type = "submit" class = "btn btn-success" [disabled] = "!notificationForm.form.valid">Submit</button>
Ошибка возникает, как только я добавляю [routerLink] или добавляю приватный конструктор:
constructor(private router: Router) {}
на мой notification-form.component.ts.
Я уже пробовал несколько решений, таких как добавление HttpClientModule к моему app.module.ts, но ничего не работает.
Что-то я делаю не так?
Заранее благодарим за уделенное время!
ОБНОВИТЬ:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NotificationFormComponent } from './notification-form/notification-form.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
RouterModule
],
declarations: [
AppComponent,
NotificationFormComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Да, я обновлю позу с помощью app.module.ts
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Вам нужно добавить <router-outlet></router-outlet>
Тег <router-outlet></router-outlet> - это место, где ваше приложение будет отображать различные маршруты. Например, в app.component.html вы можете иметь:
<header>
<bt-toolbar></bt-toolbar>
</header>
<main>
<router-outlet></router-outlet>
</main>
В этом шаблоне у меня всегда видна верхняя панель, а под ней - содержимое различных маршрутов.
Добавьте в свой app.module.ts это в массив импорта:
RouterModule.forRoot([
{ path: 'SendNotification', component: YourComponent }
Привет ! Куда мне это добавить?
В случае, если кто-то использует ссылку (-ы) npm, следующую работу выполняет:
В .angular-cli.json добавить / заменить:
"defaults": {
"styleExt": "css",
"component": {},
"build": {
"preserveSymlinks": true
}
}
Первый импорт RouteModule в app.module.ts
import { RouterModule, Routes } from '@angular/router';
И используйте его, как показано ниже: (Вы импортируете только RouterModule, но также необходимо добавить forRoot([]).)
imports: [
RouterModule.forRoot([])
// other imports here
]
Если у вас есть маршруты, используйте их, как показано ниже. Этот пример кода из Угловой DOC
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
И в вашем основном компоненте (app.component.html) добавьте <router-outlet></router-outlet>
Надеюсь, что это поможет вам!
Привет ! Спасибо за ваше время, я попробовал ваше решение, но теперь получаю эту ошибку: zone.js: 665 Отклонение необработанного обещания: не задано базовое href. Укажите значение токена APP_BASE_HREF или добавьте в документ базовый элемент. ; Зона: <корень>; Задача: Promise.then; Значение: Ошибка: не задано базовое значение href. Укажите значение токена APP_BASE_HREF или добавьте в документ базовый элемент.
вы добавили <router-outlet></router-outlet> в app.component.html?
а также проверьте, что index.html имеет <base href = "/"> в теге head
Да, я добавил один, и в моем index.html есть один: /
Да, я добавил его в свой _Layout.cshtml! Спасибо !
Рад это слышать :)
Эй, ты спас мне день. Большое спасибо!
В моем случае я поставил только:
<base href = "/">
В моем теге head в файле index.html.
...
<head>
...
<title>Name of page</title>
<base href = "/">
</head>
...
Для тех, кто также борется с загадочными / бесполезными сообщениями об ошибках от компилятора Angular, убедитесь, что у вас где-то есть это:
RouterModule.forRoot([])
Я использовал только RouterModule.forChild([]), добавление forRoot () в один из модулей устранило ошибку.
Пожалуйста, проверьте эту ссылкуhttps://angular.io/api/router/RouterStateSnapshot
import { Component, OnInit } from '@angular/core';
import { RouterState, RouterStateSnapshot, Router } from '@angular/router';
@Component({
templateUrl:'template.html'
})
export class MyComponent {
constructor(router: Router) {
const state: RouterState = router.routerState;
const snapshot: RouterStateSnapshot = state.snapshot;
console.info(state);
console.info(snapshot);
//...
}
}
Если вы используете
RouterModule.forChild(routes)
попробуйте заменить на
RouterModule.forRoot(routes)
вы включили модуль маршрутизатора в app.module.ts?