Javascript 角度6'；应用程序操作按钮'；不是已知元素

我正在尝试添加模块之间共享的组件。我唯一得到的是这个错误

我一直在寻找类似问题的答案，但毫无帮助，我不断地犯下这个错误

也尝试在app.module中声明，但结果相同

代码：

组件

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'app-action-button',
    templateUrl: './action-button.component.html',
    styleUrls: ['./action-button.component.scss'],
})

export class ActionButtonComponent {

    private _className = '';
    private _buttonText = '';

    @Input()
    set className(className: string) {
        this._className = (className && className.trim() || 'default');
    }
    get className(): string { return this._className; }

    @Input()
    set buttonText(buttonText: string) {
        this._buttonText = (buttonText && buttonText.trim() || 'n/n');
    }
    get buttonText(): string { return this._buttonText; }

    @Output() buttonActionEvent = new EventEmitter();


    constructor() { }

    buttonAction() {
        this.buttonActionEvent.emit(true);
    }
}

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material.module';
import { ActionButtonComponent } from '../../shared/action-button/action-button.component';
import { ActionButtonModule } from '../../shared/action-button/action-button.module';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, ActionButtonModule],
    declarations: [LoginComponent],
    entryComponents: [ActionButtonComponent],
    providers: [LoginService]
})

export class LoginModule {}

我在其中声明此组件的模块

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'app-action-button',
    templateUrl: './action-button.component.html',
    styleUrls: ['./action-button.component.scss'],
})

export class ActionButtonComponent {

    private _className = '';
    private _buttonText = '';

    @Input()
    set className(className: string) {
        this._className = (className && className.trim() || 'default');
    }
    get className(): string { return this._className; }

    @Input()
    set buttonText(buttonText: string) {
        this._buttonText = (buttonText && buttonText.trim() || 'n/n');
    }
    get buttonText(): string { return this._buttonText; }

    @Output() buttonActionEvent = new EventEmitter();


    constructor() { }

    buttonAction() {
        this.buttonActionEvent.emit(true);
    }
}

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material.module';
import { ActionButtonComponent } from '../../shared/action-button/action-button.component';
import { ActionButtonModule } from '../../shared/action-button/action-button.module';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, ActionButtonModule],
    declarations: [LoginComponent],
    entryComponents: [ActionButtonComponent],
    providers: [LoginService]
})

export class LoginModule {}

html模板

    <div class="login-wrapper">
    <ng-container *ngIf="isLoading">
        <mat-spinner class="loading" diameter="32"></mat-spinner>
    </ng-container>
    <ng-container *ngIf="!isLoading">
        <h2>Zaloguj się za pomocą czytnika</h2>
        <form [formGroup]="operator">
            <mat-form-field appearance="outline">
                <mat-label>ID Operatora *</mat-label>
                <input type="text" matInput placeholder="Zeskanuj kod kreskowy" formControlName="id">
            </mat-form-field>
            <mat-form-field appearance="outline">
                <mat-label>Wybór maszyny *</mat-label>
                <mat-select formControlName="machine">
                    <mat-option *ngFor="let machine of machinesList" [value]="machine.externalId">
                        {{ machine.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </form>
        <!-- <div class="buttons-wrapper">
            <button (click)="getUrl()" mat-raised-button>maszyna Bullmer</button>
            <button mat-raised-button color="primary">maszyna nieBullmer</button>
        </div> -->
        <app-action-button [className]="logout-button" (buttonActionEvent)="test()"></app-action-button>
        <button [disabled]="!operator.valid" (click)="loginAndSetMachine()" mat-raised-button>
            <mat-icon color="primary" fontSet="fas" fontIcon="fa-check" class="material-icons"></mat-icon>
        </button>
    </ng-container>
</div>

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material.module';

import { ActionButtonComponent } from './action-button.component';


@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [ActionButtonComponent],
    exports : [ActionButtonComponent],
    entryComponents: [],
    providers: []
})

export class ActionButtonModule {}

---

如果要在模块之间共享它，必须将它添加到您声明它的模块的导出中，并将该模块导入到要使用

ActionButtonComponent

的模块中

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [LoginComponent, ActionButtonComponent],
    entryComponents: [],
    providers: [LoginService],
    exports:[ActionButtonComponent]
})
export class LoginModule {}

您的其他模块：

---

现在，您可以在

OtherModule

中声明的任何组件中使用

ActionButtonComponent

，如果您想在模块之间共享它，您必须将它添加到您声明它的模块的导出中，并将该模块导入到您想要使用

ActionButtonComponent

的模块中

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [LoginComponent, ActionButtonComponent],
    entryComponents: [],
    providers: [LoginService],
    exports:[ActionButtonComponent]
})
export class LoginModule {}

您的其他模块：

---

现在，您可以在

OtherModule

中声明的任何组件中使用

ActionButtonComponent

，您需要确保

ActionButtonComponent

由其模块导出。导出后，您可以在任何位置导入此

LoginModule

，并使用组件：

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [LoginComponent, ActionButtonComponent],
    exports: [ActionButtonComponent],  // This exports the shared component
    entryComponents: [],
    providers: [LoginService]
})

export class LoginModule {}

---

您需要确保

ActionButtonComponent

由其模块导出。导出后，您可以在任何位置导入此

LoginModule

，并使用组件：

@NgModule({
    imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
    declarations: [LoginComponent, ActionButtonComponent],
    exports: [ActionButtonComponent],  // This exports the shared component
    entryComponents: [],
    providers: [LoginService]
})

export class LoginModule {}

---

问题是在其他模板文件中，我试图使用此组件声明

问题出在另一个模板文件中，我试图使用此组件声明

它没有帮助，仍然出现相同的错误，我更新了我的问题。您是否尝试停止ng serve，然后重新启动它？您是否检查了是否存在另一个模板文件，您在其中使用该组件并忘记导入新模块？它没有帮助，仍然出现相同的错误，我更新了我的问题。您是否尝试停止ng serve，然后重新启动？您是否检查过是否存在另一个模板文件，您在其中使用该组件时忘记导入新模块？