Issue
error NG8001 in angular even after importing shared module in other modules and exporting components in shared module
Error I am getting:
Error: src/app/public/home/home.component.html:3:1 - error NG8001: 'app-footer' is not a known element:
1. If 'app-footer' is an Angular component, then verify that it is part of this module.
2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
'@NgModule.schemas' of this component to suppress this message.
3 <app-footer></app-footer>
~~~~~~~~~~~~
src/app/public/home/home.component.ts:5:16
5 templateUrl: './home.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component HomeComponent.
I created a shared module. Inside that I have header and footer component.In shared module.ts, under declaration and exports array I mentioned the header and footer components. In public module.ts file, in imports array, mentioned the shared module but then also getting error. Just wanted to know, is shared module no longer supported in angular 14?
Shared module.ts
import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({
declarations: [
HeaderComponent,
FooterComponent
],
imports: [
],
exports:[
HeaderComponent,
FooterComponent
]
})
export class SharedModule { }
Public module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicRoutingModule } from './public-routing.module';
import { HomeComponent } from './home/home.component';
import { SharedModule } from '../shared/shared.module';
import { PublicComponent } from './public.component';
@NgModule({
declarations: [
HomeComponent,
PublicComponent
],
imports: [
CommonModule,
PublicRoutingModule,
SharedModule
]
})
export class PublicModule { }
In home component.html which is under public module
<p>home works!</p>
<app-footer></app-footer>
Most important thing in vscode no problems showing but I am running using cmd there errors are showing
Footer component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Solution
Hi I've made a pull request here, check this link below https://github.com/ganeshapmb/Angular14/pull/1
Answered By - Afif Alfiano
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.