I've seen a lot of questions on this but doesn't seem to be the same issue Im encountering. I have just created my 2nd angular project. I have a new component under src/app/employees where I am trying to use in employees.component.html . The error I am getting is:
Uncaught Error: Template parse errors:
'mat-card' is not a known element:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-card> </mat-card>
Now, in app.module.ts I have:
import { BrowserModule } from "#angular/platform-browser";
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "#angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "#angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
} from "#angular/material";
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatListModule,
MatInputModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
],....
})
export class AppModule {}
And there aren't any errors if I use mat-card in app.component.html.
What am I missing here?
I can not see your EmployeesComponent in your list of declarations. The EmployeesComponent need to be declared in the same module as where you import the MatCardModule, like:
declarations: [
EmployeesComponent
],
imports: [
MatCardModule
]
I am guessing either that you have forgotten to declare the EmployeesComponent in your app module, or that you have another module, perhaps Employees module, where you have to import the MatCardModule.
You can import MatCardModule as
import { MatCardModule } from '#angular/material/card';
ASSUMING:
your component is EmployeeAddComponent (already included html (with mat-card, mat-form-field etc))
SOLUTION:
open app.module.ts
first: check import 'area', make sure EmployeeAddComponent is imported.
second: check #NgModule at declarations 'area', make sure EmployeeAddComponent is written there.
At times, error of types "....is not a known element in Angular 7" is also specific to Visual Studio Code. If you've already tried below steps :
npm install --save #angular/material
ng add #angular/material
and still getting the above error message in Visual Studio editor, then close the project in editor and re-open.
In your app.module.ts file add below lines:
import { CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
schemas: [CUSTOM_ELEMENTS_SCHEMA],
You need to import you component on the app.module declarations. it should fix it
I had the same problem with my Angular project. Once after I installed the material and importing them into the project. I restarted the VSCode. It solved the issue.
Related
I'm trying to create a reusable Angular form in an Ionic app. After following several tutorials and Stack posts I no longer have any errors but the content isn't showing on the parent page.
My reusable component:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-profile-form',
templateUrl: './profile-form.component.html',
styleUrls: ['./profile-form.component.scss'],
})
export class ProfileFormComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
<p>
profile-form works! BLAH!!!!!
</p>
After reading a stack post I manually created a module for the component because Ionic doesn't generate modules when you create a component via the CLI.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { ProfileFormComponent } from './profile-form.component';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
],
exports: [ProfileFormComponent],
declarations: [ProfileFormComponent]
})
export class ProfileFormModule {}
Then I added it to the module of the parent page:
import { ProfileFormComponent } from 'src/app/forms/profile-form/profile-form.component';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ProfilePageRoutingModule
],
declarations: [ProfilePage, ProfileFormComponent]
})
<div>
<app-profile-form></app-profile-form>
</div>
I'm not getting any errors but I'm unable to see the content of the reusable component on the parent page.
Angular CLI: 14.0.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: darwin x64
Angular: 14.0.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
#angular-devkit/architect 0.1400.2
#angular-devkit/build-angular 14.0.2
#angular-devkit/core 14.0.2
#angular-devkit/schematics 14.0.2
#angular/fire 7.4.1
#schematics/angular 14.0.2
rxjs 6.6.7
typescript 4.7.4
Any help would be greatly appreciated.
What's weird is if I inspect the page I can see the element:
You do not need to create a module for ProfileFormComponent you just need to declare ProfileFormComponent in a specific module for example in app.module.ts
But if you want to use this component or any reusable component in other modules you should put it on the shared module or create your own module and import it to the specific module you want
Open app-profile-form more in the html inspector, what's the contents? Anyway ProfileFormComponent should be in declarations of #NgModule no need to export it. Remove ProfileFormModule entirely and add ProfileFormComponent to declarations of AppModule
So im making my own angular library.
I followed the steps listed here: https://angular.io/guide/creating-libraries
So i created the library and published it to npmjs.com.
My issue is, whenever I tried making a new component inside the library,
It seems like the intellisense recognizes that the component is there however when i try to run my angular application i get faced with this error:
ERROR in No NgModule metadata found for 'AppModule'.
Here is a snippet of the librarys module:
import { NgModule } from '#angular/core';
import { SlEcommComponent } from './sl-ecomm.component';
import { SlCatalogComponent } from './sl-catalog/sl-catalog.component';
#NgModule({
declarations: [SlEcommComponent, SlCatalogComponent],
imports: [
],
exports: [SlEcommComponent, SlCatalogComponent]
})
export class SlEcommModule { }
The component im trying to use is SlCatalogComponent. The other component, SlEcommComponent, seems to work but this is the component that was auto generated by the angular CLI.
So heres a snippet of the consuming projects appmodule:
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { CommonDataService } from './_services/common-data.service';
import { SignInComponent } from './sign-in/sign-in.component';
import { SlEcommModule } from 'sl-test';
#NgModule({
declarations: [
AppComponent,
SignInComponent,
],
imports: [
SlEcommModule
],
providers: [CommonDataService],
bootstrap: [AppComponent]
})
export class AppModule { }
And finally on the signin components template, im using a component from the library i made like this:
<sl-catalog></sl-catalog>
Im not sure what else im missing since the default component in the library works, and mine does not.
--Edit--
So ive narrowed down the problem to my npm package not having the a certain folder included when its being published.
After adding the "files": ["lib"] to the package.json everything seems to be working ok except the intellisense here is screwed up:
What seemed to fix my issue is adding "files": ["./src/lib"] to my package.json
Problem
In my application I'm having a SharedModule which declares all components and directives used in multiple modules throught the whole app.
As I decided to use reactive forms (instead of template-driven forms) in all my forms throught the whole application, I decided to import ReactiveFormsModule in SharedModule to import it only once and make it available to all my feature modules. The interesting part is that I don't re-export ReactiveFormsModule.
shared.module.ts
(...)
import { ReactiveFormsModule } from '#angular/forms';
(...)
#NgModule({
imports: [
(...),
ReactiveFormsModule,
(...)
],
declarations: [
(...)
],
exports: [
// ReactiveFormsModule is not re-exported here!
(...)
],
}
export class SharedModule {}
In my app I have a UsersModule which imports SharedModule and declares UsersAddComponent:
users.module.ts
#NgModule({
imports: [
CommonModule,
SharedModule,
UsersRoutingModule,
],
declarations: [
UsersRootComponent,
UsersAddComponent,
UsersIndexComponent,
],
})
export class UsersModule {}
users-add.component.html
(...)
<!-- Name -->
<npc-form-control-text
[label]="'name' | translate"
[formControl]="name"
>
</npc-form-control-text>
(...)
It works. And that surprises me! Quoting Angular NgModules documentation:
Declarations are private by default. If this module does not export
UserComponent, then only the components within this module can use
UserComponent.
Importing a module does not automatically re-export the imported
module's imports. Module 'B' can't use ngIf just because it imported
module 'A' which imported CommonModule. Module 'B' must import
CommonModule itself.
So as UsersModule doesn't import ReactiveFormsModule directly - it only imports SharedModule which imports ReactiveFormsModule but does not export it - it shouldn't have access to FormControlDirective. But it does, it all works. And as soon as I remove ReactiveFormsModule from SharedModule imports array, it stops working producing error:
Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("
<input
[type]="type"
[ERROR ->][formControl]="formControl"
class="FormControl-input"
/>
"): ng:///SharedModule/FormControlTextComponent.html#10:4
Question
Why I don't need to re-export ReactiveFormsModules in SharedModule for UsersModule components being able to use FormControlDirective?
Angular always shows a hint of what is going on:
ng:///SharedModule/FormControlTextComponent.html#10:4
^^^^^^^^^^^^
As we can see your FormControlTextComponent is declared in SharedModule and that's why removing ReactiveFormsModule from SharedModule breaks this component.
I am redesigning my app as to be more modular with the UI side of things, separating things out to have:
App header
Nav panel to the left
Main content to the right of the nav panel
I have managed to work out how to import a single component into the Angular way of things, importing the component into the app.module.ts and setting it in the declarations area. This way I can simply call from the HTML and have my app header appear!
However I am having difficulty when trying to do a batch of these at once...
I am seeing an error message such as:
Error: Unexpected module 'ComponentExportModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
app.module.ts
//More imports are above...
import {ComponentExportModule} from '../UI-Components/component-export.module';
#NgModule({
imports: [
//Imports are here
],
declarations: [
AppComponent,
ComponentExportModule
],
providers:[
//Stuff is here
],
bootstrap: [ AppComponent]
})
export class AppModule { }
component-export.module.ts
import { NgModule } from '#angular/core';
import {AppHeaderComponent} from './app-header.component';
import {PageContentComponent} from './page-content.component';
import {SideNavComponent} from './side-nav.component';
#NgModule({
imports: [
AppHeaderComponent,
PageContentComponent,
SideNavLinkListComponent
],
exports: [
AppHeaderComponent,
PageContentComponent,
SideNavComponent
]
})
export class ComponentExportModule {}
I am then wanting to utilise my components in the usual way within the app.module.html file such as:
<app-header/>
<nav-bar/>
<page-content/>
Your app.module.ts is wrong. ComponentExportModule needs to be added to the imports array in your app.module.ts, not declared. Modules are always imported. Components, directives, and pipes are declared.
Also when you add the shared components to your apps template (app.component.html) you will want to use the standard element notation such as: <app-header></app-header> instead of </app-header> as only void and foreign elements can be self closed
I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.
How do I get the style to show? AFAIK I have imported all modules as required and properly set up each part of Angular Material including the themes.
my-dialog.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
my-dialog.component.html:
<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
...
</div>
<button mat-button mat-dialog-close>Close</button>
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '#angular/material'
import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
MyDialogComponent
]
})
export class AppModule { }
Newly imported modules need to be added to imports:
import { MatButtonModule } from '#angular/material/button'
#NgModule{
...
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule,
MatButtonModule
],
...
})
Worth noting that the new angular 9 build system requires you stop the "ng serve" script and run it again after adding a material module
can also be missing a line in styles.css
#import '#angular/material/prebuilt-themes/indigo-pink.css';
TL;DRIf you have other things working but not a specific component, make sure that component's module is imported & imported
correctly as modules have to be added to the imports:
#NgModule{
imports: [
MatCardModule,
MatButtonModule
]
})
Note:
Remember to stop the "ng serve" script and run it again after adding the material module as the new angular 9 build system requires to do so.
Explanation:I had the same issue where I had a CustomMaterialModule where I was importing all the Material Modules I needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule & not in exports array.
Note: my CustomMaterialModule hosts all the Material Modules I need in
my app so modules like MatButtonModule will go in my
CustomMaterialModule imports and exports array and later I would only
use my CustomMaterialModule in other places of my app. I did this to
keep the code clean and easy for editing. So for example, if one month
down the road I don't need a Material Module I can just remove it from
my CustomMaterialModule and not worry about it.
Some issue that i noticed are -
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '#angular/material' in your my-dialog.component.ts
constructor(public dialog: MatDialog) {} is missing
MatButtonModule is not imported inside app.module.ts file
You can also follow this(https://material.angular.io/components/dialog/overview) example
In my case i have 2 extra modules, 1 for the mat-stuff, and another for components.
Initially i added both modules to the app-module but that didnt work.
i moved the mat-module import into the components-module (discarding from app-module, not must) and it worked, i guess its because the DI.
Add your dialog in the declarations of AppModule. It works for me.
#NgModule({
declarations: [
AppComponent,
...,
YourDialogComponent
],
You need to import this package in your app.modoule.ts file
import { MatButtonModule } from '#angular/material/button'
and then in imports add this
imports: [MatButtonModule,...]