error NG8001 in angular even after importing shared module in other modules and exporting components-CodePudding

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 {
}

}

CodePudding user response：

Hi I've made a pull request here, check this link below https://github.com/ganeshapmb/Angular14/pull/1

CodePudding user response：

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // Add here: PublicModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

public.module.ts

@NgModule({
  declarations: [
    HomeComponent,
    PublicComponent
  ],
  imports: [
    CommonModule,
    PublicRoutingModule,
    SharedModule
  ]
})
export class PublicModule { }

You are importing HomeComponent in PublicModule but the AppModule (your root module) doesn't know that PublicModule exists because you don't import SharedModule in AppModule. And then, it doesn't matter that you have imported SharedModule in PublicModule where the HomeComponent is imported/exported. I would really recommend to improve your folder/component/module structure because like this, it is very confusing.

But to answer your question: Import PublicModule in AppModule and it will work.