The element 'mat-toolbar' is unrecognized and not known:

Encountering an issue while executing karma tests - the error message indicates that 'mat-toolbar' is not a recognized element within the application. Here are some steps to troubleshoot this problem: 1. Confirm whether 'mat-toolbar' is an Angular component and ensure it is included in the current module. 2. If 'mat-toolbar' is a Web Component, consider adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress the error message.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { SearchComponent } from './search/search.component';

@NgModule({
  declarations: [AppComponent, HomeComponent, SearchComponent, MatToolbarModule],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,
    Ng2SearchPipeModule,
    FormsModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer №1

MatToolbarModule belongs in the imports section, not the declarations section.

Since it is a Module, it should be included in the imports.

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

Obtaining data from a BehaviorSubject for numerous dynamically generated components

As I work on developing a dynamic preview feature, I'm experimenting with drag-and-drop functionality to generate components in a canvas. These components can be duplicated within the same canvas, and upon dropping them, settings like styling are appl ...

Utilize your access token to send a message through Google Business Messages

Currently, I have successfully set up a method to send messages using the Google Business Messages API from an agent to a user through NodeJS. const bmApi = new businessmessages.businessmessages_v1.Businessmessages({}); This process requires authenticatio ...

An issue has arisen where Selenium Auth0 is unable to establish a connection with the server

I am using a protractor selenium test for an angular2 application that I execute with the command protractor conf.js --params.login.username=John --params.login.password=Doe. The purpose of the test is to attempt to log in to the backend and intentionally ...

Successfully generated files, now patiently awaiting typecheck results... encountering an issue with importing SASS modules

Issue Encountering a problem where adding SASS variables to TypeScript files causes the browser tab with an open devserver to hang, displaying Files successfully emitted, waiting for typecheck results.... Trying to figure out what's causing this iss ...

Initiating a GET request to retrieve the file generated by the server

I am currently delving into the Mean stack and have encountered a challenge with downloading a file from my server-side application using the Angular front end. Despite successfully generating the file on the back end, clicking the download button on the f ...

Leveraging Ignorable Fields in Angular 2 Reactive Forms

Can Angular 2's reactive forms support adding ignorable fields? For example, consider the following Form: this.form = new FormGroup({ subTasks: new FormArray([]), }); Each subTask requires user input and the solution is stored in the FormArray. ...

Tips for adjusting the color of the snackbar in Angular

When a user logs out, I am using snackBar to display a message. I want to change the color of the panel from dark grey to another color and tried using the following solution: panelClass: ['danger'] supposed to change the panel color to red ( ...

Leveraging JSON data in subsequent GET request in Ionic 3

My application receives input, concatenates it to a string, and then requests JSON data. The response includes the following first two lines: Now, I need to update my code to be asynchronous. It should make the initial call, wait for a response, retrieve ...

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...

Why isn't the Angular2 ngIf directive updating the DOM?

I am encountering issues with finding the right expression for ngIf to evaluate properly. After following a basic Angularfire2 example, I have successfully managed to log in and out. import { Component } from '@angular/core'; import { AngularFi ...

What is the most effective method to retrieve the current browser URL in Angular 2 with TypeScript?

Is there a way for me to retrieve the current URL from the browser within my Angular 2 application? Usually in JavaScript, we would use the window object for this task. Can anyone guide me on how to achieve this in Angular 2 using TypeScript? Appreciate a ...

Solve the error "Property 'container' of null is not accessible" in musickit.js while running an Angular application on a server

I am currently developing an application that combines Angular and MusicKit to offer users the ability to listen to music simultaneously. However, I encountered a challenging error when trying to run the application using ng serve --host x.x.x.x instead of ...

navigation trail click feature

I'm currently working on an Angular application using Chart.js to display dynamic pie charts. I want to include a breadcrumb navigation above the pie charts to show users the hierarchy of the data they are viewing. I also need to enable click functio ...

Array updating using the foreach method in Angular

Hey everyone, I've encountered an error that seems to be related to scope and I could use some advice. I'm currently looping through an array and trying to push the results to another array. However, when I attempt to push the results to public m ...

Encountering an undisclosed CORS error on all requests from Angular frontend to NodeJS Express Server during preflight 200

After thorough testing with Postman, my backend server is functioning properly and generating the desired responses for all requests. However, my Angular app is encountering an unknown CORS error on every request despite receiving a 200 Preflight response ...

Encountering a type mismatch error in Typescript while working with Redux state in a store file

It appears that I have correctly identified all the types, but could there be a different type of Reducer missing? 'IinitialAssetsState' is not assignable to type 'Reducer' The complete error message: Type '(state: { assets: n ...

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Is there a way to determine if an Error object thrown by the jwt.verify function in the jsonwebtoken library is of type TokenExpiredError using Typescript's instanceof? For example: import jwt from "jsonwebtoken"; function someFunction() { try { ...

I am looking to incorporate serial numbers into two distinct loops within an Angular application

I need help adding a serial number using two separate ngFor loops. Here is the code: <table> <tr> <th>Sr</th> <th>Name</th> </tr> <ng-container #atvalue> <tr *ngFor="let item of items; l ...

Tips for displaying HTML content from a JSON web template

Currently, I am working with a JSON web template that consists of nested elements. My goal is to render HTML based on the content of this JSON web template. I attempted using ngx-schema-form, however my JSON does not contain properties variables. I also t ...

Mistakenly importing the incorrect version of Angular

While working on my Angular 1 app in typescript, I faced an issue when importing angular using the following syntax: import * as angular from 'angular'; Instead of importing angular from angular, it was being imported from angular-mocks. Thi ...