We Keep Coding

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

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';

Ionic2 uncaught promise

I am currently learning the ropes around Angular2 in Ionic2.
I am going through a tutorial that is a bit outdated, and since i'm not 100% familiar with Angular2 environments, I can't debug this error:
Uncaught (in promise): Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? at noComponentFactoryError
These are the files I've changed from a clean ionic2 install:
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { UsersPage } from '../pages/users/users';
import { ReposPage } from '../pages/repos/repos';
import { OrganisationsPage } from '../pages/organisations/organisations';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Users', component: UsersPage },
{ title: 'Repos', component: ReposPage },
{ title: 'Organisations', component: OrganisationsPage },
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I have also created 3 pages through the ionic g page command.
any help on this issue would be grateful.

You need to include ReposPage in ngModule in app.module.ts .
It should be present in both declarations and entryComponents array.
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],

as the error message clearly saying, you need to add 'ReposPage' to the entryComponents array in app.modules.ts file. Also you would need to add it as a declaration.
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]

Typescript compilation error TS2307: Cannot find module with angular2 rc5 and ngModule

I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?

I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.