JeanMeche
commented
2 weeks ago Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.
If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.
Hi , I am beginner Angular18.2 and I tried to use toolbar on angular page but it throwing some error as below:
Can someone please help to fix this issue :
--Error--------------------------- PS D:\Project\angular\emailgui> ng serve Application bundle generation failed. [1.514 seconds]
X [ERROR] NG8001: 'mat-toolbar' is not a known element:
If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/components/navbar/navbar.component.html:0:0:
0 │ ╵ ^
Error occurs in the template of component NavbarComponent.
src/app/components/navbar/navbar.component.ts:7:15: 7 │ templateUrl: './navbar.component.html', ╵
~~~~~Watch mode enabled. Watching for file changes...
I am sharing you my code :
-------------------------app.component.ts-------------- import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { NavbarComponent } from "./components/navbar/navbar.component"; import { HomeComponent } from "./components/home/home.component"; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatToolbarModule} from '@angular/material/toolbar';
@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, NavbarComponent, HomeComponent,MatSnackBarModule,MatToolbarModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'emailgui'; }
------------------------------------navbar.component.html----------------- import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router';
import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import {MatButtonModule} from '@angular/material/button'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon';
export const appConfig: ApplicationConfig = { providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(), MatButtonModule,MatSnackBarModule,MatToolbarModule,MatIconModule, provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync()] };
------------------------app.config.ts-------------------------------- import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router';
import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import {MatButtonModule} from '@angular/material/button'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon';
export const appConfig: ApplicationConfig = { providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(), MatButtonModule,MatSnackBarModule,MatToolbarModule,MatIconModule, provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync(), provideAnimationsAsync()] };