Angular элементы не известны

Question

У меня проблема с тем, что основные функции c angular не распознаются. Я приложил скриншот, показывающий ошибку. Эта проблема возникала в других вопросах переполнения стека, однако эти решения не были эффективными. Специфическим примером c является создание диалогового окна. Тем не менее, я получаю похожую ошибку при реализации matDatepicker. Еще одна вещь, которую стоит отметить, - у меня есть почти идентичный компонент диалогового окна, который не вызывает эту ошибку. Я знаю, что ошибка должна быть с моими утверждениями импорта, я просто не уверен, где и что изменить. Я полагаю, что правильно импортировал их в свой файл app-module.ts, но все еще получаю сообщение об ошибке.
Ошибка

, вот компонент диалогового окна .ts file

import { Component, OnInit, Inject, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Attendance} from 'src/app/models/attendance';

@Component({
  selector: 'app-dialog-box_attendance',
  templateUrl: './dialog-box_attendance.component.html',
  styleUrls: ['./dialog-box_attendance.component.scss']
})
export class DialogBoxComponent implements OnInit {

  action:string;
  local_data:any;

  constructor( public dialogRef: MatDialogRef<DialogBoxComponent>,
    //@Optional() is used to prevent error if no data is passed
    @Optional() @Inject(MAT_DIALOG_DATA) public data: Attendance) {
    console.log(data);
    this.local_data = {...data};
    this.action = this.local_data.action; }

  ngOnInit(): void {
  }

  doAction(){
    this.dialogRef.close({event:this.action,data:this.local_data});
  }

  closeDialog(){
    this.dialogRef.close({event:'Cancel'});
  }

}

вот файл html

<!-- dialog-box_attendance.component.html -->
<h1 mat-dialog-title>Row Action :: <strong>{{action}}</strong></h1>
<div mat-dialog-content>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Name" matInput [(ngModel)]="local_data.code_id">

    <input placeholder="{{action}} Name" matInput [(ngModel)]="local_data.hours_missed">

  </mat-form-field>
  <ng-template #elseTemplate>
    Sure to delete <b>{{local_data.typeName}}</b>?
  </ng-template>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="doAction()">{{action}}</button>
  <button mat-button (click)="closeDialog()" mat-flat-button color="warn">Cancel</button>
</div>

вот файл app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DefaultModule } from './layouts/default/default.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AlertComponent } from './components/alert/alert.component';
import { LoginComponent } from './components/login/login/login.component';
import { RegisterComponent } from './components/register/register/register.component';
import { ReactiveFormsModule } from '@angular/forms';
import { JwtInterceptor } from './helpers/jwt.interceptor';
import { ErrorInterceptor } from './helpers/error.interceptor';
import { fakeBackendProvider } from './helpers/fake-backend';
import { MatNativeDateModule } from '@angular/material/core';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';


@NgModule({
  declarations: [
    AppComponent,
    AlertComponent,
    LoginComponent,
    RegisterComponent,

  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    DefaultModule,
    HttpClientModule,
    MatDatepickerModule,
    MatNativeDateModule, 
    MatFormFieldModule,

  ],
  exports: [
    MatDatepickerModule, 
    MatNativeDateModule,
    MatFormFieldModule 
],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    fakeBackendProvider],
  bootstrap: [AppComponent]
})
export class AppModule { }

РЕДАКТИРОВАТЬ: Формат файла проекта

Answer 1

Я наконец-то понял, что у меня есть два «модуля по умолчанию», один из которых называется AppModule, хотя я по умолчанию являлся модулем по умолчанию, а также DefaultModule, в котором хранятся нужные мне импортные данные. Объявление моих компонентов в DefaultModuel устранило мою проблему.

Answer 2

Колби, «экспорт» предназначен для экспорта Компоненты , а не модуль (он используется, когда мы хотим использовать компонент, определенный в этом модуле, в другом компоненте, который НЕ находится в модуле), например,

@NgModule({
declarations: [
    CustomComponent
],
 exports: [CustomComponent]
})
export class AuxModule { }

@NgModule({
import:[AuxModule],
declarations: [
    AppComponent //<--AppComponent use CustomComponent
]
})
export class AppModule { }

Вам необходимо импортировать модули MatFormFieldModule и FormsModule (FormModule предназначен для использования [(ngModel)] в каждый Модуль, в котором есть компонент, использующий этот модуль - не только в AppModule-