I'm having trouble displaying the elements after installing Material Design in Angular 9 - any suggestions?

I'm facing an issue with my Angular 9 project where I'm trying to integrate the Material library. Despite my efforts, none of the elements are displaying and I keep encountering this error:

core.js:14613 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I've tried adjusting dependencies versions and importing all necessary modules, but no luck so far. Any assistance would be highly appreciated!

Below is a snippet from my app.module:

import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
// other imports...
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    MatButtonModule,
    MatProgressSpinnerModule,  
    // more imports...
  ],
  exports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitializer,
      multi: true,
      deps: [AppConfigService]
    },
    FormBuilder,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here are some dependency versions from my package.json:

    "@angular/animations": "^9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "^9.1.0",
    "@angular/compiler": "^9.1.0",
    "@angular/core": "^9.1.0",
    "@angular/forms": "^9.1.0",
    "@angular/material": "^9.2.0",
    // other dependencies...
angulartypescriptangular-material

Answer №1

In Angular 9 versions and higher

Don't forget to add MatIconModule to your app.module.ts file. It's important for the correct functioning of your application.

import { MatIconModule } from '@angular/material/icon'

Ensure you include it in the imports array of your app.module.ts file like this :

import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppConfigService } from './services/app-config.service';
import { AppInitializer } from './services/app-initializer.service';
import { BrowserModule } from '@angular/platform-browser';
import { DeviceModule } from './device/device.module';
import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { GatewayModule } from './gateway/gateway.module';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LogoModule } from './logo/logo.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import {  MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    MatIconModule, // <-- Include it here
    MatButtonModule,
    MatProgressSpinnerModule,
    MatFormFieldModule,
    DeviceModule,
    GatewayModule,
    FormsModule,
    HttpClientModule,
    LogoModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    RouterModule.forRoot([]),
  ],
  exports: [
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitializer,
      multi: true,
      deps: [AppConfigService]
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    FormBuilder,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on automatically changing the background image every few seconds

As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...

htmlangulartypescriptsetinterval

Utilizing Angular 7 to implement table and pagination as separate entities, with distinct components

After referencing the link at https://material.angular.io/components/table/overview, I successfully implemented pagination, sort, and filter properties on a table. Now, I am looking to create a separate component specifically for pagination that will int ...

angularpagination

Attempting to design the appearance of the form fields within a Mat-Card

As someone new to UI development and lacking in-depth knowledge of css, I have been searching for examples to style a login page using Angular Material. My main struggle right now is getting the form fields to expand the width of the card (minus the paddin ...

cssangularangular-material

I'm encountering issues with undefined parameters in my component while using generateStaticParams in Next.js 13. What is the correct way to pass them

Hey there, I'm currently utilizing the App router from nextjs 13 along with typescript. My aim is to create dynamic pages and generate their paths using generateStaticParams(). While the generateStaticParams() function appears to be functioning corre ...

reactjstypescriptnext.jsnext.js13nextjs-dynamic-routing

Having issues with D3js chart rendering: Unable to display bars or pie chart properly, only shows as

I've been delving into D3js and I'm encountering an issue with the script below. It's only generating an SVG with a vertical line, and I'm struggling to figure out why. Within my data item called Fight, there is a property that gathers ...

angulard3.jsdata-visualization

Creating a responsive button within a dialog, independent of any form, upon pressing the Enter key

I'm trying to make a button inside a dialog respond to the key.enter event. I've looked around and all the examples I found had buttons inside a <form>, which is not my case. Do I have to put the button inside a "dummy form" for this to w ...

angular

Retrieving data from a service and passing it between components in Angular 7

I have a variable called testgetinfos that holds an array of objects returned from a service. I need to access this variable in another component. Here is the function where I am retrieving the object array from a service. When I print the output of the t ...

angular

Is there compatibility between SSO in Winforms(.Net) and a SPA Application developed in Angular?

Is there a way to enable single sign on(SSO) between a winforms application and SPA app? The winforms app is utilizing hybrid flow, and I am interested in launching the SPA app from the winforms app without requiring the user to enter credentials again. T ...

angularwinformsoauth-2.0openid-connectidentityserver3

Steps to globally modify the font in Ionic

In my Ionic app running version 3.9.2, I am attempting to customize the default font to a specific custom one. After researching, I discovered that I need to set the font face in the app.scss file located within the app folder. Here is the code snippet I ...

angulartypescriptionic2ionic3google-font-api

How can I send a specific property of an object to a function in Angular?

I currently have a interface set up for employees that looks like this: export interface IEmployee { name: string; id: number; annualSalary: number; calculateMonthlySalary(annualSalary: number): number; } Now, I have a component that is ...

angulartypescript

Ways to retrieve data types from the values of a different interface

Imagine having an interface called TableHeader: interface TableHeader{ key: string, value: string, } Next, we need to create an interface for TableData, where: interface TableData{ // ???? } In this table data, the key should be of the type that ma ...

typescript

Ways to adjust the font size of mat-menu-item?

I came across a query regarding this matter on another platform: How can the font size of mat-menu-item be changed to small in Angular? Unfortunately, the solution provided did not work for me. I attempted to implement the suggested code in my Angular a ...

cssangular

Tips for implementing a CSS class for the present day

I want to create my own calendar using Angular 5. Here is a preview: https://i.sstatic.net/S5r71.png My goal is to style the current day with a different color in CSS. Below is my component: @Component({ selector: 'ca-month-header', ...

angular

What is the best method for resetting the user state to null?

I'm currently utilizing VueX in Nuxt with Typescript. My goal is to set the initial state of my user to null. When I try setting state.authenticatedUser:null, everything works smoothly. However, when I attempt to assign an IAuthenticatedUser type to i ...

typescriptvue.jsvuexnuxt.js

Transitioning from Javascript to Typescript with the integration of Knockout and DevExtreme interfaces

Currently facing challenges with transitioning from Javascript to Typescript, especially when it comes to creating a devextreme control. In the past, I would set up an object in my viewmodel for devextreme controls like this: self.myButton = { text: &a ...

typescriptknockout.jsdevextreme

Create duplicates of both the array and its individual elements by value

I'm having trouble figuring out how to properly copy an array along with all its elements. In my model, I have a name and options, both of which are strings. This is what I currently have: const myArrayToDuplicate = [myModel, myModel, myModel] My ...

angulartypescript

Building an Angular docker file is quite time-consuming

I am currently using a Dockerfile to build and run my project. The process of building the Docker image takes around 10-15 minutes, which seems quite long compared to the npm run build command that only takes 2-3 minutes. Do you have any suggestions on h ...

angulardocker

Looking to adjust the API response to fit the necessary JSON format for an Angular project?

A modification is needed in the API response to align with the required JSON format provided below. The current responses and the desired format are detailed for reference. Assistance is appreciated. The current representation of individual's data ne ...

javascriptnode.jsangulartypescript

Executing functions before the data is loaded in an Angular application

Hey there, I'm relatively new to Angular and I've been facing some difficulties when it comes to loading data. In the code snippet below, you'll notice that I have two services being called. Each service logs something to the console. After ...

angularhttplifecycle

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

cssreactjstypescriptnext.jsclassname