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!
Related
So this persistent problem in Angular Nativesript environment where I have declared component in only auth.module.tns.ts files.
The error:
Error: Type LoginComponent is part of the declarations of 2 modules: AuthModule and AuthModule! Please consider moving LoginComponent to a higher module that imports AuthModule and AuthModule. You can also create a new NgModule that exports and includes LoginComponent then import that NgModule in AuthModule and AuthModule.
auth.module.ts file:
import {NgModule} from '#angular/core';
import {CommonModule} from '#angular/common';
import {AuthRoutingModule} from '../../views/auth/auth-routing.module';
#NgModule({
declarations: [],
imports: [
CommonModule,
AuthRoutingModule
]
})
export class AuthModule {
}
auth.module.tns.ts file:
import {NgModule, NO_ERRORS_SCHEMA} from '#angular/core';
import {NativeScriptCommonModule} from 'nativescript-angular/common';
import {AuthRoutingModule} from '../../views/auth/auth-routing.module';
import {LoginComponent} from '#src/app/views/auth/login/login.component';
import {SignupComponent} from '#src/app/views/auth/signup/signup.component';
#NgModule({
declarations: [
LoginComponent,
SignupComponent
],
imports: [
AuthRoutingModule,
NativeScriptCommonModule,
],
exports: [],
schemas: [NO_ERRORS_SCHEMA]
})
export class AuthModule {
}
Any suggestions on what the cause might be?
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 ],
...
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.
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]);
}
}
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