Error message:
ERROR NullInjectorError: R3InjectorError(AppModule)[AlertPanelComponent -> AlertPanelComponent -> AlertPanelComponent]: NullInjectorError: No provider for AlertPanelComponent! Angular
I'm having trouble understanding this issue as I am trying to import the AlertPanelComponent from the alert-panel.component.
This error appears to be quite common when researching on stackOverflow. I have already added it in my app.module.
app.component.ts
import {AlertClass} from './models/alert-class.model';
...
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, DoCheck {
...
constructor( private restService:RestService,
private sanitizer: DomSanitizer,
private router:Router,
private alertPanelComponent:AlertPanelComponent ){
}
...
}
app.module.ts
import { AlertPanelComponent } from './alert-panel/alert-panel.component';
...
@NgModule({
declarations: [
AlertPanelComponent,
...
],
...
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule,
Routes,
PreloadAllModules} from '@angular/router';
import {LoginComponent} from './login/login.component';
import {AlertPanelComponent} from './alert-panel/alert-panel.component';
import {WebCamComponent} from './web-cam/web-cam.component';
const routes: Routes = [
{path: '',component: LoginComponent},
{path: 'alert-panel',component: AlertPanelComponent},
{path: 'webcam', component: WebCamComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }