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.

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!

ionic3/angular4 Lazy loading Don't work

CLI:
node -v 6.11.2
cordova -v 6.5.0
ionic -v 3.9.2
Create an ionic tabs project with only the homepage(Manually deleted):
ionic start demo1 tabs
then create two pages use the cmd:
ionic g page Oneself
ionic g page Setting
this is app.module.ts code:
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
//import { SettingPage } from "../pages/setting/setting";
//import { OneselfPage } from "../pages/oneself/oneself";
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
this is oneself.module.ts like this:
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OneselfPage } from './oneself';
#NgModule({
declarations: [
OneselfPage,
],
imports: [
IonicPageModule.forChild(OneselfPage),
],
exports:[
OneselfPage
]
})
export class OneselfPageModule {}
this is oneself.ts File Code like this:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the OneselfPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-oneself',
templateUrl: 'oneself.html',
})
export class OneselfPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad OneselfPage');
}
}
SettingPage Same as above；
this is tabs.ts code :
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = "OneselfPage";//class name
tab3Root = "SettingPage";//class name
constructor() {
}
}
I know that lazy loading has several key points, such as declaring #ionicpage (), #ngmodule, IonicPageModule. ForChild (pageName)... I have such declarations in my code, but lazy loads don't work and the errors are as follows:
This is the first line error, and I don't know if it's related to lazy loading
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
The following error must have something to do with lazy loading :
Error {rejection: Error, promise: t, zone: r, task: t, stack: <accessor>, …}
message: "Uncaught (in promise): Error: Cannot find module '../pages/oneself/oneself.module'.
Error: Cannot find module '../pages/oneself/oneself.module'
at file:///android_asset/www/build/main.js:65357:9
at t.invoke
See screen capture :
https://i.stack.imgur.com/AGTVN.jpg
Can someone help me answer this question?

Problem solved, the cordova ionic installed with cnpm has the problem,dont use cnpm install , use npm install ,the lazy load is run.

CLI:
node -v 8.2.1
cordova -v 7.0.1
ionic -v 3.9.2
I have followed what you have described
ionic start demo1 tabs
ionic g page Oneself
ionic g page Setting
I was unable to reproduce any of the errors that you were stating
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
or
Error {rejection: Error, promise: t, zone: r, task: t, stack: <accessor>, …}
message: "Uncaught (in promise): Error: Cannot find module '../pages/oneself/oneself.module'.
Error: Cannot find module '../pages/oneself/oneself.module'
at file:///android_asset/www/build/main.js:65357:9
at t.invoke
If you want to compare against my reproduction of your scenario you can do so, hope this helps

Nativescript Http Module Error Connection Refused

I am getting the following error while trying to implement the Nativescript tutorial code found here
"originalStack": "Error: java.net.ConnectException: Connection refused\n
at ZoneAwareError (file:///data/data/org.nativescript.NotecardRestaurants/
files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:993:33)\n...
Here is the source for app.module
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { UserService } from './shared/user/user.service';
import { LoginComponent } from "./login/login.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
UserService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
Here is the source for user.service that is causing the issue
import { Injectable } from "#angular/core";
import { Http, Headers, Response } from "#angular/http";
import { Observable } from "rxjs/Rx";
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
import { User } from "./user";
import { Config } from "../config";
#Injectable()
export class UserService {
constructor(private http: Http) {}
register(user: User) {
let headers = new Headers();
headers.append("Content-Type", "application/json");
return this.http.post(
Config.apiUrl + "/user/register",
JSON.stringify({
name: user.name,
email: user.email,
password: user.password
}),
{ headers: headers }
)
.map(response => response.json().token)
.catch(this.handleErrors);
}
login(user: User) {
let headers = new Headers();
headers.append("Content-Type", "application/json");
return this.http.post(
Config.apiUrl + "user/login",
JSON.stringify({
email: user.email,
password: user.password
}),
{ headers: headers }
)
.map(response => response.json().token)
.catch(this.handleErrors);
}
handleErrors(error: Response) {
console.dir(error.json());
return Observable.throw(error);
}
}
I have independently verified the integrity of the api I am using. The routes given do work. I am running the nativescript project using
tns run android --emulator

if you are running your application on IOS simulator or Android emulator, which is basically virtual machine and if you are referring 'localhost' or '127.0.0.1' these are IP of virtual machine not your development machine. you can solve your problem by providing IP of your development machine or in android you can use 10.0.2.2 IP for your development machine. sample of your api url is
https://10.0.2.2:5001/api/news/getnews