Develop Reference

Uncaught Error: Unexpected directive 'NavComponent' imported by the module 'AppModule'. Please add a #NgModule annotation

I've a custom component (nav) inside.
When I use it , webpack compilation ends successfully but chrome throws the following error:
Uncaught Error: Unexpected directive 'NavComponent' imported by the module 'AppModule'. Please add a #NgModule annotation.
Here is my AppModule:
>
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 { NavComponent } from './nav/nav.component';
#NgModule({
declarations: [AppComponent ],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NavComponent],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

If your NavComponent is a #Component or a #Directive, you need to add it into the declarations, instead of imports
...
declarations: [ AppComponent, NavComponent ],
...

Ionic 4 fails to load on mobile once i add Google Firebase to the project

My ionic 4 project works great on chrome, devapp and even after compiling to apk.
But once I add firebase config it fails to load using both devapp or even after compiling to apk.
here is how I add firebase:
first of all, I install it using npm install #angular/fire firebase --save
My environments.ts it looks like:
export const environment = {
production: false,
firebase: {
apiKey: 'xxxxxxxxxxxxxxx',
authDomain: 'xxxxxxxxxxxx.firebaseapp.com',
databaseURL: 'https://xxxxxxxxxxxxxx.firebaseio.com',
projectId: 'xxxxxxxxxxxxxxx',
storageBucket: 'xxxxxxxxxxxxxx.appspot.com',
messagingSenderId: 'xxxxxxxxxxxxxxx'
}
};
then I add these lines with trailing <<<< to my app.module.ts :
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 { environment } from '../environments/environment'; <<<<
import { AngularFireModule } from '#angular/fire'; <<<<<
import { AngularFirestoreModule } from '#angular/fire/firestore'; <<<<
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase), <<<<
AngularFirestoreModule <<<<
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
once I finish this, the app is no longer working on mobile ( white death screen)
And that is what I get when I use the chrome remote dev. tools:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Ng2-translate and webpack

Good afternoon guys, I'm using ng2-translate to do the translation of the app and run perfectly with the command: tns run ios | Android
        But I'm having an error while running with webpack with the following parameters: tns run ios --bundle --env.uglify --env.aot
Error:
CONSOLE LOG file:///app/vendor.js:1:1200993:
CONSOLE ERROR file:///app/vendor.js:1:28276: ERROR TypeError: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: ERROR BOOTSTRAPPING ANGULAR
CONSOLE ERROR file:///app/vendor.js:1:1125775: bootstrap: this.http.get(this.prefix+"/"+e+this.suffix).map is not a function. (In 'this.http.get(this.prefix+"/"+e+this.suffix).map(function(e){return e.json()})', 'this.http.get(this.prefix+"/"+e+this.suffix).map' is undefined)
getTranslation#file:///app/vendor.js:1:886381
getTranslation#file:///app/vendor.js:1:887491
retrieveTranslations#file:///app/vendor.js:1:887380
setDefaultLang#file:///app/vendor.js:1:886824
n#file:///app/bundle.js:1:88782
ka#file:///app/vendor.js:1:110925
Repository to test: https://github.com/gustavost26/teste-ng2-translate

Good that you provided a example project, I was able to quickly review it and looks like you are using latest version of Angular and rxjs but your translate module is completely outdated.
Replace it with the refactored latest version of same package
npm install --save #ngx-translate/core #ngx-translate/http-loader
Updated app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader } from "#ngx-translate/core";
import { TranslateHttpLoader } from "#ngx-translate/http-loader";
import { ItemService } from "./pages/item/item.service";
import { ItemsComponent } from "./pages/item/items.component";
import { ItemDetailComponent } from "./pages/item/item-detail.component";
import { HttpClient } from "#angular/common/http";
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptFormsModule,
NativeScriptHttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
Updated app.component.ts
import { Component } from "#angular/core";
import { TranslateService } from '#ngx-translate/core';
import * as Platform from "platform";
#Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private translate: TranslateService) {
this.translate.setDefaultLang('en'); //chage pt
//this.translate.use(Platform.device.language.split('-')[0]);
}
}

unable to make .apk using ionic codova

I am very new in ionic framework.I want a side menu using ionic 3 framework.I make already that app.It run in ionic lab but when I build for android as apk an error comes.
typescript error
Type QrPage in /Users/arpan/Desktop/rad/src/pages/qr/qr.ts is part of the declarations of 2 modules:
AppModule in /Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts! Please consider moving QrPage in
/Users/arpan/Desktop/rad/src/pages/qr/qr.ts to a higher module that imports AppModule in
/Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts. You can also create a new NgModule that exports and
includes QrPage in /Users/arpan/Desktop/rad/src/pages/qr/qr.ts then import that NgModule in AppModule in
/Users/arpan/Desktop/rad/src/app/app.module.ts and QrPageModule in
/Users/arpan/Desktop/rad/src/pages/qr/qr.module.ts.
this the error
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { QrPage } from '../pages/qr/qr';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
QrPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
NgxQRCodeModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
QrPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BarcodeScanner
]
})
export class AppModule {}
qr.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { QrPage } from './qr';
#NgModule({
declarations: [
QrPage,
],
imports: [
IonicPageModule.forChild(QrPage),
],
exports: [
QrPage,
]
})
export class QrPageModule {}
This is a side menu ionic app.and i add a page their have a qr code generator.i use ngx-qrcode2.
please help me how i do that?

this is an common error caused by the Lazy Load feature of ionic.
You need to import the QrPageModule in the App.Module IMPORTS and remove the QrPage in declarations and entryComponents.
Try that and see if it works!

Ionic App: SQLite doesn't work in emulator

Hello I am trying to follow a tutorial about implementing sqlite in an ionic app: https://www.youtube.com/watch?v=E6h8PFHMLIU
I did everything as proposed in the turoial but still when I run the application in the android emulator (ionic cordova build android; ionic cordova run android) it does not display the data from the database as in the video. What am I doing wrong? Below you can see the code
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IonicStorageModule } from '#ionic/storage';
import { HttpModule } from '#angular/http';
import { DatabaseProvider } from '../providers/database/database';
import { SQLitePorter } from '#ionic-native/sqlite-porter';
import { SQLite } from '#ionic-native/sqlite';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicStorageModule.forRoot(),
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DatabaseProvider,
SQLitePorter,
SQLite
]
})
export class AppModule {}
database.ts
import { Injectable } from '#angular/core';
import { Platform } from 'ionic-angular';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
import { SQLitePorter } from '#ionic-native/sqlite-porter';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import { BehaviorSubject } from 'rxjs/Rx';
import { Storage } from '#ionic/storage';
#Injectable()
export class DatabaseProvider {
database: SQLiteObject;
private databaseReady: BehaviorSubject<boolean>;
constructor(public sqlitePorter: SQLitePorter, private storage: Storage, private sqlite: SQLite, private platform: Platform, private http: Http) {
this.databaseReady = new BehaviorSubject(false);
this.platform.ready().then(() => {
this.sqlite.create({
name: 'developers.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.database = db;
this.storage.get('database_filled').then(val => {
if (val) {
this.databaseReady.next(true);
} else {
this.fillDatabase();
}
});
});
});
}
fillDatabase() {
this.http.get('assets/dummyDump.sql')
.map(res => res.text())
.subscribe(sql => {
this.sqlitePorter.importSqlToDb(this.database, sql)
.then(data => {
this.databaseReady.next(true);
this.storage.set('database_filled', true);
})
.catch(e => console.error(e));
});
}
addDeveloper(name, skill, years) {
let data = [name, skill, years]
return this.database.executeSql("INSERT INTO developer (name, skill, yearsOfExperience) VALUES (?, ?, ?)", data).then(data => {
return data;
}, err => {
console.log('Error: ', err);
return err;
});
}
getAllDevelopers() {
return this.database.executeSql("SELECT * FROM developer", []).then((data) => {
let developers = [];
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
developers.push({ name: data.rows.item(i).name, skill: data.rows.item(i).skill, yearsOfExperience: data.rows.item(i).yearsOfExperience });
}
}
return developers;
}, err => {
console.log('Error: ', err);
return [];
});
}
getDatabaseState() {
return this.databaseReady.asObservable();
}
}
home.ts
import { DatabaseProvider } from './../../providers/database/database';
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
developer = {};
developers = [];
constructor(public navCtrl: NavController, private databaseprovider: DatabaseProvider, private platform: Platform) {
this.databaseprovider.getDatabaseState().subscribe(rdy => {
if (rdy) {
this.loadDeveloperData();
}
})
}
loadDeveloperData() {
this.databaseprovider.getAllDevelopers().then(data => {
this.developers = data;
})
}
addDeveloper() {
this.databaseprovider.addDeveloper(this.developer['name'], this.developer['skill'], parseInt(this.developer['yearsOfExperience']))
.then(data => {
this.loadDeveloperData();
});
this.developer = {};
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Developer Data
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label stacked>What's your name?</ion-label>
<ion-input [(ngModel)]="developer.name" placeholder="Developer Name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>What's your special skill?</ion-label>
<ion-input [(ngModel)]="developer.skill" placeholder="Special Skill"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>How long have you been working?</ion-label>
<ion-input [(ngModel)]="developer.yearsOfExperience" placeholder="Years of experience"></ion-input>
</ion-item>
<button ion-button full (click)="addDeveloper()">Add Developer Info</button>
<ion-list>
<ion-item *ngFor="let dev of developers">
<h2>{{ dev.name }}</h2>
<p>{{ dev.yearsOfExperience }} years of {{ dev.skill }} Experience!</p>
</ion-item>
</ion-list>
</ion-content>