We Keep Coding

'<selector>' is not a known element

Before I continue with the question: I have checked the other questions with the same title and I have followed given advices. None of it helped so I decided to open a new question.
I have angular project with one module and multiple components. Dashboard component uses welcome component that is apparently not recognized.
The module has the following code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FrameComponent } from './frame/frame.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { CardComponent } from './card/card.component';
import { AlertComponent } from './alert/alert.component';
#NgModule({
declarations: [
FrameComponent,
HomeComponent,
CardComponent,
WelcomeComponent,
AlertComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
])
],
exports: [CardComponent, WelcomeComponent, AlertComponent],
providers: [],
bootstrap: [FrameComponent]
})
export class AppModule { }
As you can see, I have imported WelcomeComponent, declared it and exported it.
WelcomeComponent contains the following code:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
#Input()
message: string;
welcomeMessage: string;
constructor() { }
ngOnInit(): void {
}
}
Here you can see app-welcome as a selector. It appears to be connected correctly. But when I use it in dashboard.component.html as given from the example
<app-welcome [message]="message" [welcomeMessage]="welcomeMessage"></app-welcome>
I get the following error:
Error: src/app/dashboard/dashboard.component.html:18:5 - error NG8001: 'app-welcome' is not a known element:
1. If 'app-welcome' is an Angular component, then verify that it is part of this module.
2. If 'app-welcome' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Other errors are related to welcome and welcomeMessage not existing since component is not recognized.
I tried restarting server, running it as --prod. I tried everything that I found. Does anyone know what could this cause?

Dashboard component is not declared in your AppModule, that's the problem.
Also you don't need to export the components in that case, just declare them.

Problem filtering data from firestore to ionic application

I am trying to create a search bar in an ionic application to filter through a collection in Firebase Cloud firestore database. I cannot seem however to establish a connection. I have placed credentials in environment.ts and environment.prod.ts and then injected firebase key into app module.ts
The code for the search bar works fine and the search bar loads however no results from the collection are being printed. The collection is simply called 'name'
I will attach the code below, if anyone sees any issues please let me know.
HomePage.html- this is used to create search bar and list to filter through
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of goalList">
<ion-label>{{item.goalName}} </ion-label>
</ion-item>
</ion-list>
</ion-content>
homepage.ts
import { Component,OnInit } from '#angular/core';
import {AngularFirestore} from '#angular/fire/firestore';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
public searchList: any[];
public loadedsearchList: any[];
constructor(private firestore:AngularFirestore) {}
ngOnInit(){
this.firestore.collection(`name`).valueChanges().subscribe(searchList => {
this.searchList = searchList;
this.loadedsearchList = searchList;
});
}
initializeItems():void {
this.searchList= this.loadedsearchList;
}
filterList(evt){
this.initializeItems();
const searchTerm = evt.srcElement.value;
if(!searchTerm){
return;
}
this.searchList= this.searchList.filter(currentGoal =>{
if(currentGoal.goalName && searchTerm){
if(currentGoal.goalName.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
return true;
}
return false;
}
});
}
}
environment.ts
export const environment = {
production: false,
firebaseConfig:{ credentials are in here
app.module.ts page where calling firebaseconfig from environment.ts with credentials.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AngularFireModule } from '#angular/fire';
import { AngularFireAuthModule } from '#angular/fire/auth';
import { AngularFireDatabaseModule } from '#angular/fire/database';
import { AngularFireStorageModule } from '#angular/fire/storage';
import { environment } from '../environments/environment';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireDatabaseModule,
AngularFireStorageModule ],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

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
]

Creating a Master/Detail app in Plunker with Ionic 2

Building on from some good standard Ionic 2 plunkers here http://plnkr.co/edit/ZsoPeE?p=preview and
http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview
Can you help tweak my Master/Detail Plunker? I thought I had all the parts in place but missing something as it produces a white screen.
Here is my attempt at a Master/Detail plunk
http://plnkr.co/edit/7NHIYMA3TUdd5nOkoXyF?p=preview
import { NgModule } from '#angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { AppComponent } from './app.component';
import { HomePage } from '../pages/home/home';
import { MasterPage } from '../pages/master/master';
import { DetailPage } from '../pages/detail/detail';
import { Sheetsu } from '../providers/sheetsu';
#NgModule({
imports: [ IonicModule.forRoot(AppComponent) ],
declarations: [ AppComponent, HomePage, MasterPage, DetailPage],
entryComponents: [ HomePage, MasterPage, DetailPage ],
bootstrap: [ IonicApp ],
providers: [ Sheetsu ]
})
export class AppModule { }

Fixed Plunker: http://plnkr.co/edit/5V36C9QHYDGBIqSIfBUl?p=preview
You had several mistakes
1) import { Sheetsu } from '../providers/sheetsu'; <- your file is called Sheetsu, with a capital S
2) Your relative paths are wrong, you've made it complicated for yourself by putting pages: 'pages', inside your config, and for example:
import { MasterPage } from '../pages/master/master';
inside HomePage should be
import { MasterPage } from '../master/master';
3) You are using "module": "commonjs", but not taking advantage of relative html urls:
templateUrl: 'pages/master/master.html', -> `templateUrl: './master.html',`
with moduleId: module.id inside your #Component
4) Your button click return this.http.get('../assets/sheetsu.json') should be return this.http.get('./assets/sheetsu.json')

Angular 2 - routing inside a component

Yesterday I asked a question about an another specific thing of angular 2 routing and the answer was satisfying for me Angular 2 — navigate through web pages without reloading a component that is common for those pages . But when I got back to examining these things, I encountered a problem again. Here's the new version of the app: http://ivan-khludov.com/ . What if I want the pages of the private section to have a shared component (a counter in my example), don't reload it each time I navigate withing the section and at the same time display different components at different pages - the dashboard component at private/dashboard and the inbox component at private/inbox? Is it possible to do without reloading the counter and without storing the last value of the counter in memory? This is the entry point of the application and the root module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { ROUTES } from './routes';
import { AppWrapper } from './components/app-wrapper';
import { PublicSection } from './components/public';
import { PrivateSection } from './components/private';
import { Counter } from './components/counter';
import { Dashboard } from './components/private/dashboard';
import { Inbox } from './components/private/inbox';
#NgModule({
imports: [
BrowserModule,
CommonModule,
HttpModule,
RouterModule.forRoot(ROUTES)
],
declarations: [
AppWrapper,
PublicSection,
PrivateSection,
Counter,
Dashboard,
Inbox
],
providers: [
],
bootstrap: [
AppWrapper
]
})
class RootModule {}
platformBrowserDynamic().bootstrapModule(RootModule);
Routing:
import { Routes } from '#angular/router';
import { AppWrapper } from '../components/app-wrapper';
import { PublicSection } from '../components/public';
import { PrivateSection } from '../components/private';
export const ROUTES: Routes = [
{
path: '',
redirectTo: '/public/1',
pathMatch: 'full'
},
{
path: 'section-1',
redirectTo: '/public/1',
pathMatch: 'full'
},
{
path: 'public/:page',
component: PublicSection
},
{
path: 'private',
redirectTo: '/private/dashboard',
pathMatch: 'full'
},
{
path: 'private/:page',
component: PrivateSection
}
];
The private section component:
import { Component } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'private',
template: `
<h2>Private section — {{page}}</h2>
<counter></counter>
<dashboard></dashboard>
<inbox></inbox>
`
})
export class PrivateSection {
private page: string;
private sub: any;
constructor(
private route: ActivatedRoute
) {
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.page = params['page'];
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
The dashboard component:
import { Component } from '#angular/core';
#Component({
selector: 'dashboard',
template: `
<div>dashboard text: lorem ipsum</div>
`
})
export class Dashboard {
}
The inbox component:
import { Component } from '#angular/core';
#Component({
selector: 'inbox',
template: `
<div>inbox text: dolor sit amet</div>
`
})
export class Inbox {
}
Thanks in advance for your answers.