组件HomeComponent的模板中发生Angular 10错误 [英] Angular 10 Error occurs in the template of component HomeComponent

问题描述

大家好，我最近将我的角度项目更新为版本10.0.1 并且在更新此处的图片

hi guys i recently update my angular project to version num 10.0.1 and i face this problem after update image here

我在app.module.ts中导入FormsModule 并将其放在导入数组中

i import FormsModule in app.module.ts and put it in imports array

有什么帮助吗?

我导入ngmodule，commonmodule，formsmodule和material模块 材质模块是一个自定义模块，我将其构建为将所有有角度的材料放入其中

i import ngmodule,commonmodule,formsmodule and material module material module is a custome module that i build it to put all angular material inside it

import { MaterialModule } from './../material';
import { CookieService } from 'ngx-cookie-service';
import { LoginComponent } from './login/login.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ProductComponent } from './product/product.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { CrudService } from './crud.service';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { FilterPipeModule } from 'ngx-filter-pipe';
import { FilterPipe } from "./Pipes";
import { MarketsComponent } from './markets/markets.component';
import { CustomFormsModule } from 'ng2-validation';
import { OrdersComponent } from './orders/orders.component'
import { FilterByStatePipe } from './FilterByState.pipe';
import { PointsComponent } from './points/points.component';
import { UsersComponent } from './users/users.component';
import { CatComponent } from './cat/cat.component';
import { OffersComponent } from './offers/offers.component';
import { CitiesComponent } from './cities/cities.component';
import { FAQComponent } from './faq/faq.component';
import { NgxLoadingModule, ngxLoadingAnimationTypes } from 'ngx-loading';
import { NgxUiLoaderModule, NgxUiLoaderHttpModule, NgxUiLoaderRouterModule, NgxUiLoaderConfig } from 'ngx-ui-loader';
import { FontAwesomeModule } from '@fortawesome/fontawesome-free';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { StatComponent } from './stat/stat.component';
import { ChartsModule } from 'ng2-charts';
import { ChartModule } from 'angular2-chartjs';
import { OrderSearchComponent } from './order-search/order-search.component';
import { CustomLableComponent } from './custom-lable/custom-lable.component';
import { OverlayModule } from '@angular/cdk/overlay';
import { ScrollingModule, ScrollDispatcher } from '@angular/cdk/scrolling';
import { ChatComponent } from './chat/chat.component';
import { DatePipe, CommonModule } from '@angular/common';
import { CouponComponent } from './coupon/coupon.component';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
import {
  MatTooltipModule
} from '@angular/material/tooltip';

const ngxUiLoaderConfig: NgxUiLoaderConfig = {
  bgsColor: "#00a79d",
  bgsOpacity: 0.5,
  bgsPosition: "bottom-right",
  bgsSize: 60,
  bgsType: "ball-spin-clockwise",
  blur: 6,
  delay: 0,
  fgsColor: "#00a79d",
  fgsPosition: "center-center",
  fgsSize: 60,
  fgsType: "ball-spin-clockwise",
  gap: 24,
  logoPosition: "center-center",
  logoSize: 120,
  logoUrl: "",
  masterLoaderId: "master",
  overlayBorderRadius: "0",
  overlayColor: "rgba(40, 40, 40, 0.8)",
  pbColor: "red",
  pbDirection: "ltr",
  pbThickness: 3,
  hasProgressBar: true,
  text: "",
  textColor: "#FFFFFF",
  textPosition: "center-center",
  maxTime: -1,
  minTime: 500
};

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductComponent,
    LoginComponent,
    FilterPipe,
    MarketsComponent,
    OrdersComponent,
    PointsComponent,
    UsersComponent,
    CatComponent,
    OffersComponent,
    CitiesComponent,
    FAQComponent,
    StatComponent,
    OrderSearchComponent,
    CustomLableComponent,
    ChatComponent,
    CouponComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    MatTooltipModule,
    BrowserModule,
    AppRoutingModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    FilterPipeModule,
    CustomFormsModule,
    NgxLoadingModule.forRoot({
      animationType: ngxLoadingAnimationTypes.cubeGrid,
      backdropBackgroundColour: 'rgba(0,0,0,0)',
      backdropBorderRadius: '4px',
      primaryColour: '#00a79d',
      secondaryColour: '#ffffff',
      tertiaryColour: '#ffffff'
    }),
    NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
    NgxUiLoaderHttpModule.forRoot({ showForeground: true }),
    NgxUiLoaderRouterModule,
    FontAwesomeModule,
    MDBBootstrapModule.forRoot(),
    ChartsModule,
    ChartModule,
    ReactiveFormsModule,
    ScrollingModule,
    OverlayModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    NgxMatDatetimePickerModule
  ],
  providers: [CookieService, FilterByStatePipe, CrudService, ScrollDispatcher, MaterialModule, DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

material.ts

import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule } from '@angular/material/card';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatDialogModule } from '@angular/material/dialog';
import { MatListModule } from '@angular/material/list';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatRadioModule } from '@angular/material/radio';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatTreeModule } from '@angular/material/tree';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { LayoutModule } from '@angular/cdk/layout';
import { ScrollingModule, ScrollDispatcher } from '@angular/cdk/scrolling'
import { NgModule } from '@angular/core';
import { from } from 'rxjs';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule, MatTabsModule, MatToolbarModule,
    MatIconModule, MatMenuModule, MatProgressBarModule, MatInputModule,
    LayoutModule, MatDialogModule, MatTreeModule, MatListModule, MatTableModule, MatFormFieldModule, MatCardModule, MatBadgeModule, MatSnackBarModule,
    MatExpansionModule, MatBottomSheetModule, ScrollingModule, MatPaginatorModule, MatSelectModule, MatAutocompleteModule, MatRadioModule, MatDatepickerModule
    , MatTooltipModule],

  exports: [MatButtonModule, MatCheckboxModule, MatTabsModule, MatToolbarModule,
    MatIconModule, MatMenuModule, MatProgressBarModule, MatInputModule,
    LayoutModule, MatDialogModule, MatTreeModule, MatListModule, MatTableModule, MatFormFieldModule, MatCardModule, MatBadgeModule, MatSnackBarModule,
    MatExpansionModule, MatBottomSheetModule, ScrollingModule, MatPaginatorModule, MatSelectModule, MatAutocompleteModule, MatRadioModule, MatDatepickerModule
    , MatTooltipModule],
  providers: [
    ScrollDispatcher
  ]
})
export class MaterialModule { }

推荐答案

您的错误明确指出，如果您正在使用mpm-npm模块，则未定义mdb-icon，请将其添加到应用程序模块的imports部分中

Your error clearly states that mdb-icon is not defined if its an npm module you are using, add it in imports section of your app module

这篇关于组件HomeComponent的模板中发生Angular 10错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！