NullInjectorError: R3InjectorError Нет поставщика для AlertPanelComponent

Question

Сообщение об ошибке:

ERROR NullInjectorError:R3InjectorError(AppModule)[AlertPanelComponent -> AlertPanelComponent-> AlertPanelComponent]: NullInjectorError: Нет поставщика для AlertPanelComponent! Угловой

Я этого не понимаю, я просто пытаюсь импортировать свой AlertPanelComponent из компонента alert-panel.com.

Эта ошибка кажется очень общей при поиске в stackOverflow. Я поместил это в свой app.module.

app.component.ts

      import { Component ,OnInit, DoCheck} from '@angular/core';
import {Router} from '@angular/router';

import {AlertClass} from './models/alert-class.model';

import {AlertPanelComponent} from './alert-panel/alert-panel.component';

import {RestService} from './rest.service';
import {DomSanitizer} from '@angular/platform-browser';
import {timer} from 'rxjs';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, DoCheck {
    title = 'FallRiskDetectionWebApp';

    enableDialog: boolean = false;
    confidence: string = "";
    classification: string = "";
    dialogHeader: string = "";
    imageBinary:any = null;
    isImageLoading: boolean = false;
    timestamp: string = "";
    macAddress: string = "";

    isLoggedIn:boolean = false;

    constructor( private restService:RestService,
        private sanitizer: DomSanitizer,
        private router:Router, 
        private alertPanelComponent:AlertPanelComponent ){
    }

    ngOnInit(){
        const source = timer(300,300);
        const subscriber = source.subscribe(
            val => {
                this.getResponse();
            }
        );
        sessionStorage.setItem("isLoggedIn","false");
        this.router.navigate(['']);
    }
    ngDoCheck(){
        this.isLoggedIn = sessionStorage.getItem('isLoggedIn') == "true";
    } 
    createImageFromBlob(image:Blob){
        let reader = new FileReader();
        reader.addEventListener("load", () => {
            this.imageBinary = reader.result;
            console.log(this.imageBinary);
        },false);
        if (image){
            reader.readAsDataURL(image);
        }
    }
    getResponse(){
        this.restService.getAnyAlerts().subscribe(
            data => {
                if (data != null){
                    const jsonObject = JSON.parse(JSON.stringify(data));
                    this.classification = "" ;
                    this.dialogHeader = "";
                    this.confidence = "";
                    this.timestamp = "";
                    this.macAddress = "";
                    this.isImageLoading =true;
                    this.restService.getCorrespondingImage().subscribe( 
                        data1 => {
                            this.createImageFromBlob(data1);
                            this.isImageLoading = false;
                        },
                        error => {
                            this.isImageLoading = false;
                            console.log(error)
                        }
                    );

                    if (jsonObject.name=='person'){
                        this.classification = jsonObject.name;
                        this.dialogHeader = "Alert: "+this.classification[0].toUpperCase() +
                            this.classification.slice(1);
                        this.confidence= jsonObject['confidence'];
                        this.timestamp = jsonObject['timestamp'];
                        this.macAddress = jsonObject['MAC-address'];
                        this.enableDialog = true;
                    }
                }
            },
            error => {}
        );
    }

}

app.module.ts

      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import {MenuModule} from 'primeng/menu';
import {PasswordModule} from 'primeng/password';
import {ButtonModule} from 'primeng/button';
import {InputTextModule} from 'primeng/inputtext';
import {DialogModule} from 'primeng/dialog';
import {TableModule} from 'primeng/table';
import {FormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {SidePanelComponent} from './side-panel/side-panel.component';
import {LoginComponent} from './login/login.component';
import { AlertPanelComponent } from './alert-panel/alert-panel.component';

import {RestService} from './rest.service';
import { WebCamComponent } from './web-cam/web-cam.component';
@NgModule({
    declarations: [
        AppComponent,
        SidePanelComponent,
        LoginComponent,
        AlertPanelComponent,
        WebCamComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,

        AppRoutingModule,

        MenuModule,
        PasswordModule,
        ButtonModule,
        InputTextModule,
        DialogModule,
        TableModule
    ],
    providers: [RestService],
    bootstrap: [AppComponent]
})
export class AppModule { }

alert-panel.component.ts

      import { Component, OnInit} from '@angular/core';
import {LoginComponent} from '../login/login.component';

import {WebCamClass} from '../models/web-cam-class.model';
import {AlertClass} from '../models/alert-class.model';
@Component({
    selector: 'app-alert-panel',
    templateUrl: './alert-panel.component.html',
    styleUrls: ['./alert-panel.component.css']
})
export class AlertPanelComponent implements OnInit{

    alerts: AlertClass[] = [];
    cols: any[] = [];
    constructor(private loginComponent:LoginComponent,
    webCam: WebCamClass
    ) { 
        webCam = this.loginComponent.webCam;    }

    ngOnInit(): void {
        this.cols = [
            {field: 'class', header:"Class"},
            {field: 'confidence', header:'Confidence'},
            {field: 'mac address',header:'MAC Address'},
            {field: 'timestamp',header:'Timestamp'},
            {field: 'webcam',header:'WebCam'},
        ];
    }

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 { }

Answer 1

Во-первых, вы сгенерировали компонент через интерфейс командной строки? потому что это обычно делает некоторую работу по импорту, проверьте это.

Во-вторых, не могли бы вы показать мне свой app-routing.module.ts, это главный кандидат на nullInjectorError.

Добавление AlertPanelComponent в конструктор компонента приложения требует, чтобы вы добавили его в качестве поставщика в модуль приложения.

Компоненты не ведут себя таким образом, либо измените его на поставщика, либо в вашем случае, судя по вашему коду, вы фактически не используете AlertPanelComponent в своем компоненте приложения.

Answer 2

Вы также пытались добавить AlertPanelComponent в объявление в своем модуле компонента?