Angular 6 'app-action-button' не известен элемент

Question

Я пытаюсь добавить компонент, совместно используемый модулями. Единственное, что я получаю, это эту ошибку.

Я искал ответ на похожие вопросы, но это не помогло, и я постоянно получаю эту ошибку.

Пытался объявить ее в приложении. модуль тоже, но это приводит к той же ошибке.

Код:

Компонент

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>

@ Редактировать Я сделал модуль ActionButton и импортировал его в LoginModule. По-прежнему появляется та же ошибка.

Модуль ActionButton

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

Answer 1

Вы должны убедиться, что ActionButtonComponent экспортируется его модулем. После экспорта вы можете импортировать этот LoginModule куда угодно и использовать компонент:

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

export class LoginModule {}

Answer 2

Если вы хотите поделиться им между модулями, вы должны добавить его в экспорт модуля, в котором вы его объявили, и импортировать этот модуль в модуль, где вы хотите использовать ActionButtonComponent.

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

Ваш другой модуль:

@NgModule({
    imports: [...,LoginModule],
    declarations: [],
    exports:[]
})
export class OtherModule {}

Теперь вы можете использовать ActionButtonComponent в любом компоненте, который объявлен в OtherModule

Answer 3

Проблема была в другом файле шаблона, я пытался использовать это объявление компонента ...