We Keep Coding

Error trying to use a shared module in Angular 9 make my components cant recognise my material module

I have created a shared module to modularize my app so in case i want to use for example a Material component i can have it in other module by import it, the problem is when i do that give this kind of error If 'mat-menu' is an Angular component, then verify that it is part of this module. How can i solve it?.In the past without the shared module it worked perfectly but now no, and Its required to be with the shared module because its for homework
Below i will let my three modules
App Module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '#angular/router';
import { HttpClientModule} from '#angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AdminDashboardComponent,
UsersDashboardComponent,
HomeAdminComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
RouterModule,
HttpClientModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Auth Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';
#NgModule({
declarations: [HomeComponent,HomeAdminComponent],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule,
],
})
export class AuthModule { }
Shared module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [],
imports: [
CommonModule,
MaterialModule,
ReactiveFormsModule
],
exports: [
MaterialModule,
ReactiveFormsModule
]
})
export class SharedModule { }

To avoid this problem you need to Add SharedModule as an import in all the FeatureModules where your components reside as declarations. Same like you have done in AuthModule. And also all the material modules imported into the MaterialModule should be exported in exports.

I solve it putting the SharedModule into the imports of the AppModule

I would recommend to create your own custom Components build on top whatever module you are using (in your case it is angular material) inside the shared module and then export these components and import your shared module in any other modules then, use these components, this will help you in the future if you decided to use another library instead of angular material or if you want to build some custom design.

The selector " did not match any elements

I’m using Angular 8 with ASP.NET Core 2.2.
I have two pages Index.cshtml and Job newlist.cshtml
In page index.cshtml I use tag <app-job-newlist></app-job-newlist>.
Then in page newlist.cshtml I use tag <app-jobpicload></app-jobpicload>
When loading page newlist.cshtml, I see error:
ERROR Error: "The selector "app-job-newlist" did not match any elements"
this my code app-modules.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
//import { CommnetComponent } from './commnet/commnet.component';
import { CommentComponent } from './comment/comment.component';
import { JobListComponent } from './job-list/job-list.component';
import { JobServiceService } from './services/job-service.service';
import { JobLoadFileComponent } from './job-load-file/job-load-file.component';
#NgModule({
declarations: [
CommentComponent,
JobListComponent,
JobLoadFileComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [JobServiceService],
bootstrap: [ JobListComponent]
})
export class AppModule { }

Explain:
Every component you want to use in your angular app have to explicit
import in correct module or else you will see that error because
angular cant find selector tag for that component
Fix
Make sure to import your app-job-newlist to your module

Function calls are not supported in decorators but

Description
I wrote an angular library SxfedModule and use it in a different angular applications. when I packaged my application with the library, evenything works fine without --prod.
Reproduction Steps
Use this library in a new angular application which is generated by the angular cli by calling SxfedModule .forRoot() in the app.module.ts.
NgModule of the library:
import { NgModule, ModuleWithProviders } from '#angular/core';
import { SxfedformModule } from './component/sxfedform/sxfedform.module';
export const ElChildModules: any = {
SxfedformModule,
}
export const ELMODULES_GROUP: any[] = [
SxfedformModule,
]
#NgModule({
imports: [
SxfedformModule.forRoot(),
],
exports: ELMODULES_GROUP,
})
class SxfedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SxfedModule,
providers: [],
};
}
}
export {
SxfedModule,
};
NgModule of the application:
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ElModule } from 'element-angular';
import { SxfedModule } from 'sxfed-angular-ui';
import { RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { appRoutes } from './app.routes';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
ElModule.forRoot(),
SxfedModule.forRoot(),
RouterModule,
RouterModule.forRoot(appRoutes),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Try ng build --prod
Error
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'SxfedModule' was called.
🌍 Your Environment
Angular CLI: 7.2.3
Node: 8.11.1
OS: win32 x64
Angular: 7.2.2
Thank you for reading my problem.
Please help me, thank you.

Angular6 json schema form loads Bootstrap module

I'm using angular6-json-schema-form in Angular v6 project. I installed it with command:
$ yarn add angular6-json-schema-form
I imported Bootstrap4FrameworkModule like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form';
import { AppComponent } from './app.component';
#NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule
Bootstrap4FrameworkModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my component is like the following:
<json-schema-form
loadExternalAssets="true"
[schema]="schema"
(onSubmit)="submit($event)">
</json-schema-form>
The generated forms works fine but the Bootstrap4 styling doesn't work. I have no styling only plain html.

Never mind I found the solution in Documentation. I need to specify the template/framwork in the component HTML:
<json-schema-form
loadExternalAssets="true"
[schema]="schema"
framework="bootstrap-4"
(onSubmit)="submit($event)">
</json-schema-form>

Angular 2 provider is not accessible in components

I am new on angular 2. I was following the legacy quick-start application, Tour of Heroes.
I created services as mentioned in the application.
I have a service HeroService. Which is used to pull all the heroes data.
I have included the HeroService at the app.module file as provider to be able to access it through out the application for all application.
My app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my Component File where I want to Access the HeroService to get data is:
export class HeroesComponent implements OnInit {
constructor(private heroService: HeroService) { }
}
The problem is I am getting an error like this, when i build the project :
Cannot find name 'HeroService'.
I have followed all the steps correctly. If I import the HeroService in my HeroesComponent, it seems to work. But fails when not imported.
Am I missing some step. As far as I understood declaring the provider on app.module will register it to use throughout the application/components without need of importing it each time.
Please correct me If I am wrong somewhere.

You need to import inside the component as well
import { HeroService } from './hero.service';