I have a problem with IONIC, whenever I import a native plugin the application stops working.
Here I add the package.json:
{
"name": "noticias",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~11.2.0",
"#angular/core": "~11.2.0",
"#angular/forms": "~11.2.0",
"#angular/platform-browser": "~11.2.0",
"#angular/platform-browser-dynamic": "~11.2.0",
"#angular/router": "~11.2.0",
"#capacitor/core": "2.4.7",
"#ionic-native/in-app-browser": "^5.31.1",
"#ionic-native/social-sharing": "^5.31.1",
"#ionic/angular": "^5.5.2",
"cordova-plugin-inappbrowser": "^5.0.0",
"cordova-plugin-x-socialsharing": "^6.0.3",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1101.4",
"#angular/cli": "~11.1.4",
"#angular/compiler": "~11.2.0",
"#angular/compiler-cli": "~11.2.0",
"#angular/language-service": "~11.2.0",
"#capacitor/cli": "2.4.7",
"#ionic/angular-toolkit": "^3.1.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
},
"description": "An Ionic project"
}
I am trying to use this plugin cordova-plugin-x-socialsharing, but when importing it into the app.component.ts the application stops working.
This was the error displayed in the terminal:
Here is my app.component.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http'
import { SocialSharing } from '#ionic-native/social-sharing/ngx'; ****
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
],
providers: [
SocialSharing,****
{ provide: RouteReuseStrategy,
useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
As soon as I import the native plugin and update the application it stops working.
Hello is what you declared in your app.module.ts and add commands
ionic cordova plugin add cordova-plugin-x-socialsharing
and
npm install #ionic-native/social-sharing
#NgModule({
declarations: [
AppComponent,
...
],
entryComponents: [
...
],
imports: [
...
],
providers: [
// it must be declared here
Social-sharing,
StatusBar,
SplashScreen,
ScreenOrientation,
InAppBrowser,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Related
After doing the install using
npm install echarts -S
npm install ngx-echarts -S
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule } from '#angular/material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { PageHeaderComponent } from './components/page-header/page-header.component';
import { ChubbTableComponent } from './components/chubb-table/chubb-table.component';
import { StatusChipComponent } from './components/status-chip/status-chip.component';
import { NgxEchartsModule } from 'ngx-echarts';
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
PageHeaderComponent,
ChubbTableComponent,
StatusChipComponent,
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
AppRoutingModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatIconModule,
MatMenuModule,
NgxEchartsModule.forRoot({
/**
* This will import all modules from echarts.
* If you only need custom modules,
* please refer to [Custom Build] section.
*/
echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
})
],
exports: [
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this is what my app.module.ts looks like. But I get this error below when serving.
{
"name": "modular-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.2.12",
"#angular/cdk": "^7.3.7",
"#angular/common": "^14.0.0",
"#angular/compiler": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/forms": "^14.0.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"clone-deep": "^4.0.1",
"echarts": "^5.4.1",
"material-components-web": "^14.0.0",
"ngx-echarts": "^15.0.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.4",
"#angular/cli": "~14.0.4",
"#angular/compiler-cli": "^14.0.0",
"#types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.2"
}
}
this is my package.json
Error: node_modules/ngx-echarts/lib/ngx-echarts.directive.d.ts:90:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
90 static ɵdir: i0.ɵɵDirectiveDeclaration<NgxEchartsDirective, "echarts, [echarts]", ["echarts"], { "options": "options"; "theme": "theme"; "initOpts": "initOpts"; "merge": "merge"; "autoResize": "autoResize"; "loading": "loading"; "loadingType": "loadingType"; "loadingOpts": "loadingOpts"; }, { "chartInit": "chartInit"; "optionsError": "optionsError"; "chartClick": "chartClick"; "chartDblClick": "chartDblClick"; "chartMouseDown": "chartMouseDown"; "chartMouseMove": "chartMouseMove"; "chartMouseUp": "chartMouseUp"; "chartMouseOver": "chartMouseOver"; "chartMouseOut": "chartMouseOut"; "chartGlobalOut": "chartGlobalOut"; "chartContextMenu": "chartContextMenu"; "chartLegendSelectChanged": "chartLegendSelectChanged"; "chartLegendSelected": "chartLegendSelected"; "chartLegendUnselected": "chartLegendUnselected"; "chartLegendScroll": "chartLegendScroll"; "chartDataZoom": "chartDataZoom"; "chartDataRangeSelected": "chartDataRangeSelected"; "chartTimelineChanged": "chartTimelineChanged"; "chartTimelinePlayChanged": "chartTimelinePlayChanged"; "chartRestore": "chartRestore"; "chartDataViewChanged": "chartDataViewChanged"; "chartMagicTypeChanged": "chartMagicTypeChanged"; "chartPieSelectChanged": "chartPieSelectChanged"; "chartPieSelected": "chartPieSelected"; "chartPieUnselected": "chartPieUnselected"; "chartMapSelectChanged": "chartMapSelectChanged"; "chartMapSelected": "chartMapSelected"; "chartMapUnselected": "chartMapUnselected"; "chartAxisAreaSelected": "chartAxisAreaSelected"; "chartFocusNodeAdjacency": "chartFocusNodeAdjacency"; "chartUnfocusNodeAdjacency": "chartUnfocusNodeAdjacency"; "chartBrush": "chartBrush"; "chartBrushEnd": "chartBrushEnd"; "chartBrushSelected": "chartBrushSelected"; "chartRendered": "chartRendered"; "chartFinished": "chartFinished"; }, never, never, false, never>;
not sure what is wrong as I only followed the simple instructions
I am trying to deploy my ionic app to appstore. But I cant able to build this app to --prod. There is no error while deploying for test build. Please help me to fix this.
I was working with ionic 3 framework. I created a calendar app. This is my first app so I have no idea to fix this. I am getting error while running the following command
ionic cordova build ios --prod.
Here is my app module
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 { HttpClientModule } from '#angular/common/http';
import { IonicStorageModule, Storage } from '#ionic/storage';
import { JwtModule, JWT_OPTIONS, JwtHelperService } from '#auth0/angular-jwt';
import { HTTP } from '#ionic-native/http/ngx';
import { ReactiveFormsModule, FormsModule } from '#angular/forms';
import { CommonModule } from '#angular/common';
import { LoginPage } from './login/login.page';
import { HomePage } from './home/home.page';
import { UpdateEventPage } from './home/update-event/update-event.page';
import { AddMembersComponent } from './home/add-members/add-members.component';
import { ProfilePage } from './profile/profile.page';
import { NgCalendarModule } from 'ionic2-calendar';
import { IonicSelectableModule } from 'ionic-selectable';
export function jwtOptionsFactory(storage) {
return {
tokenGetter: () => {
return storage.get('access_token');
},
whitelistedDomains: ['82.165.76.209:57', 'localhost:8100']
}
}
#NgModule({
declarations: [AppComponent, LoginPage, HomePage, UpdateEventPage, AddMembersComponent, ProfilePage],
entryComponents: [UpdateEventPage, AddMembersComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
HttpClientModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
NgCalendarModule,
IonicSelectableModule,
JwtModule.forRoot({
jwtOptionsProvider: {
provide: JWT_OPTIONS,
useFactory: jwtOptionsFactory,
deps: [Storage],
}
}),
AppRoutingModule,
],
providers: [
StatusBar,
SplashScreen,
JwtHelperService,,
HTTP,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
This is my package json dependencies
"dependencies": {
"#angular/common": "^7.2.2",
"#angular/core": "^7.2.2",
"#angular/forms": "^7.2.2",
"#angular/http": "^7.2.2",
"#angular/platform-browser": "^7.2.2",
"#angular/platform-browser-dynamic": "^7.2.2",
"#angular/router": "^7.2.2",
"#auth0/angular-jwt": "^2.1.0",
"#capacitor/android": "^1.0.0-beta.19",
"#capacitor/cli": "1.0.0-beta.19",
"#capacitor/core": "1.0.0-beta.19",
"#ionic-native/core": "^5.0.0",
"#ionic-native/http": "^5.5.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.5.0",
"#ionic/angular": "^4.1.0",
"#ionic/pro": "2.0.4",
"#ionic/storage": "^2.2.0",
"cordova-android": "8.0.0",
"cordova-ios": "5.0.1",
"cordova-plugin-advanced-http": "2.0.9",
"cordova-plugin-file": "6.0.1",
"cordova-sqlite-storage": "3.2.0",
"core-js": "^2.5.4",
"ionic-selectable": "^4.4.0",
"ionic2-calendar": "^0.5.2",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.29"
},
"devDependencies": {
"#angular-devkit/architect": "~0.13.8",
"#angular-devkit/build-angular": "~0.13.8",
"#angular-devkit/core": "~7.3.8",
"#angular-devkit/schematics": "~7.3.8",
"#angular/cli": "~7.3.8",
"#angular/compiler": "~7.2.2",
"#angular/compiler-cli": "~7.2.2",
"#angular/language-service": "~7.2.2",
"#ionic/angular-toolkit": "~1.5.1",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~10.14.2",
"codelyzer": "~4.5.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.1.0",
"tslint": "~5.16.0",
"typescript": "~3.1.6"
},
I am getting the following error.
ERROR in src\app\app.module.ts(60,22): Error during template compile of 'AppModule'
Expression form not supported.
[ERROR] An error occurred while running subprocess ng.
On line 60 you have a typo:
JwtHelperService,,
Change this to:
JwtHelperService,
I'm getting the following error when injecting a basic provider into the home page component of a blank Ionic project:
columnNumber: 19752
fileName: "http://localhost:8100/build/polyfills.js"
lineNumber: 3
message: "Uncaught (in promise): Error: StaticInjectorError[TestProvider]: \n StaticInjectorError[TestProvider]: \n NullInjectorError: No provider for TestProvider!\n_NullInjector.prototype.get#http://localhost:8100/build/vendor.js:1276:19\nresolveToken#http://localhost:8100/build/vendor.js:1564:17\ntryResolveToken#http://localhost:8100/build/vendor.js:1506:16\nStaticInjector.prototype.get#http://localhost:8100/build/vendor.js:1377:20\nresolveToken#http://localhost:8100/build/vendor.js:1564:17\ntryResolveToken#http://localhost:8100/build/vendor.js:1506:16\nStaticInjector.prototype.get#http://localhost:8100/build/vendor.js:1377:20\nresolveNgModuleDep#http://localhost:8100/build/vendor.js:10938:12\nNgModuleRef_.prototype.get#http://localhost:8100/build/vendor.js:12159:16\nresolveDep#http://localhost:8100/build/vendor.js:12655:12\ncreateClass#http://localhost:8100/build/vendor.js:12519:85\ncreateDirectiveInstance#http://localhost:8100/build/vendor.js:12364:37\ncreateViewNodes#http://localhost:8100/build/vendor.js:13802:53\ncreateRootView#http://localhost:8100/build/vendor.js:13692:5\ncallWithDebugContext#http://localhost:8100/build/vendor.js:15093:39\ndebugCreateRootView#http://localhost:8100/build/vendor.js:14394:12\nComponentFactory_.prototype.create#http://localhost:8100/build/vendor.js:11313:37\nComponentFactoryBoundToModule.prototype.create#http://localhost:8100/build/vendor.js:4275:16\nNavControllerBase.prototype._viewInit#http://localhost:8100/build/vendor.js:48293:27\nNavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:48106:17\nF</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974\nonInvoke#http://localhost:8100/build/vendor.js:4982:24\nF</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901\nF</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124\nf/<#http://localhost:8100/build/polyfills.js:3:20240\nF</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649\nonInvokeTask#http://localhost:8100/build/vendor.js:4973:24\nF</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562\nF</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815\no#http://localhost:8100/build/polyfills.js:3:7887\n"
promise: Object { __zone_symbol__state: 0, __zone_symbol__value: Error }
rejection: Error: StaticInjectorError[TestProvider]:
StaticInjectorError[TestProvider]:
NullInjectorError: No provider for TestProvider!
Stack trace:
_NullInjector.prototype.get#http://localhost:8100/build/vendor.js:1276:19
resolveToken#http://localhost:8100/build/vendor.js:1564:17
tryResolveToken#http://localhost:8100/build/vendor.js:1506:16
StaticInjector.prototype.get#http://localhost:8100/build/vendor.js:1377:20
resolveToken#http://localhost:8100/build/vendor.js:1564:17
tryResolveToken#http://localhost:8100/build/vendor.js:1506:16
StaticInjector.prototype.get#http://localhost:8100/build/vendor.js:1377:20
resolveNgModuleDep#http://localhost:8100/build/vendor.js:10938:12
NgModuleRef_.prototype.get#http://localhost:8100/build/vendor.js:12159:16
resolveDep#http://localhost:8100/build/vendor.js:12655:12
createClass#http://localhost:8100/build/vendor.js:12519:85
createDirectiveInstance#http://localhost:8100/build/vendor.js:12364:37
createViewNodes#http://localhost:8100/build/vendor.js:13802:53
createRootView#http://localhost:8100/build/vendor.js:13692:5
callWithDebugContext#http://localhost:8100/build/vendor.js:15093:39
debugCreateRootView#http://localhost:8100/build/vendor.js:14394:12
ComponentFactory_.prototype.create#http://localhost:8100/build/vendor.js:11313:37
ComponentFactoryBoundToModule.prototype.create#http://localhost:8100/build/vendor.js:4275:16
NavControllerBase.prototype._viewInit#http://localhost:8100/build/vendor.js:48293:27
NavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:48106:17
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974
onInvoke#http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124
f/<#http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
stack: "c#http://localhost:8100/build/polyfills.js:3:19752\nu/<#http://localhost:8100/build/polyfills.js:3:19174\nNavControllerBase.prototype._fireError#http://localhost:8100/build/vendor.js:48075:13\nNavControllerBase.prototype._failed#http://localhost:8100/build/vendor.js:48068:9\nNavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:48115:53\nF</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974\nonInvoke#http://localhost:8100/build/vendor.js:4982:24\nF</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901\nF</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124\nf/<#http://localhost:8100/build/polyfills.js:3:20240\nF</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649\nonInvokeTask#http://localhost:8100/build/vendor.js:4973:24\nF</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562\nF</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815\no#http://localhost:8100/build/polyfills.js:3:7887\n"
task: Object { runCount: 0, _state: "notScheduled", type: "microTask", … }
zone: Object { _properties: {…}, _parent: {…}, _name: "angular", … }
__proto__: Object { … }
Steps to reproduce:
Create a test project. ionic start TestProject blank
Add a test provider. ionic generate provider TestProvider. The provider is added to the provider list in the app.module.
Inject the provider into the home page component, by importing TestProvider and injecting into the constructor.
Sometimes the error occurs; sometimes it doesn't. If it doesn't, create another provider and repeat the process until the error occurs.
At one point, I created three separate test providers with identical, copy/pasted code; one of them worked consistently, but the other two produced the StaticInjectorError.
TestProject/src/app/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 { TestProvider } from '../providers/test/test';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
TestProvider
]
})
export class AppModule {}
TestProject/src/pages/home/home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { TestProvider } from '../../providers/test/test';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public test: TestProvider ) {
}
}
TestProject/src/providers/test/test.js
import { Injectable } from '#angular/core';
#Injectable()
export class TestProvider {
constructor() {
console.log('Hello TestProvider Provider');
}
}
package.json
{
"name": "ProviderNamingBug",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "5.0.3",
"#angular/compiler": "5.0.3",
"#angular/compiler-cli": "5.0.3",
"#angular/core": "5.0.3",
"#angular/forms": "5.0.3",
"#angular/http": "5.0.3",
"#angular/platform-browser": "5.0.3",
"#angular/platform-browser-dynamic": "5.0.3",
"#ionic-native/core": "4.4.0",
"#ionic-native/splash-screen": "4.4.0",
"#ionic-native/status-bar": "4.4.0",
"#ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project"
}
I'm running on Windows 10, with Node.js version 8.9.4 and npm version 5.6.0.
Any help would be greatly appreciated.
I am a newbie of ionic framework, just started now. I am working on windows. I created my app with this command:
ionic start ionic-welcome tabs
ionic serve
I create a new page with below command
ionic g page welcome
I get this response in my console:
[OK] Generated a page named welcome!
updated app.module.ts for welcome page:
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 { Welcome } from '../pages/welcome/welcome';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
Welcome,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Welcome,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
But when i browse to localhost:8100 i am getting this error for "welcome page".
Module
'"C:/xampp/htdocs/ionic/ionic-welcome/src/pages/welcome/welcome"' has
no exported member 'Welcome'.
package.json:
{
"name": "ionic-welcome",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/core": "3.12.1",
"#ionic-native/splash-screen": "3.12.1",
"#ionic-native/status-bar": "3.12.1",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.6.0",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "2.1.3",
"typescript": "2.3.4"
},
"description": "An Ionic project"
}
Some says to remove '^' character from package.json but don't have one. I am out of options don't know what to do next, please help.
if you check Welcome.ts you probably find something like this
export class WelcomePage {
constructor(public navCtrl: NavController, public navParams: NavParams)
{
}
ionViewDidLoad() {
console.log('ionViewDidLoad WelcomePage');
}
in your app.modules.ts do the following
import { WelcomePage } from '../pages/welcome/welcome'
then add WelcomePage to declarations and entryComponents.
i just faced this problem and managed to solve it this way.
Good luck
Plugin:
cordova plugin add cordova-plugin-networkinterface
Code:
networkinterface.getIpAddress((ip) => {
console.log(ip);
});
Error:
TypeError: Cannot read property 'getIPAddress' of undefined
Now here neither I have provide any provider nor any import, so how does it work in ionic 2 ?
It's not A native plugin. But this plugin is working in ionic 2 also according to this link
Package.json :
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.4.8",
"#angular/compiler": "2.4.8",
"#angular/compiler-cli": "2.4.8",
"#angular/core": "2.4.8",
"#angular/forms": "2.4.8",
"#angular/http": "2.4.8",
"#angular/platform-browser": "2.4.8",
"#angular/platform-browser-dynamic": "2.4.8",
"#angular/platform-server": "2.4.8",
"#ionic-native/core": "3.1.0",
"#ionic-native/in-app-browser": "^3.4.2",
"#ionic-native/network": "^3.4.2",
"#ionic-native/splash-screen": "3.1.0",
"#ionic-native/status-bar": "3.1.0",
"#ionic-native/toast": "^3.4.4",
"#ionic/app-scripts": "^1.2.2",
"#ionic/storage": "2.0.0",
"ionic-angular": "2.3.0",
"ionic-native": "^2.9.0",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"#ionic/app-scripts": "1.2.2",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "Test"
}
Latest Code File :
declare var networkinterface: any;
#Component({
templateUrl: 'app.html'
})
export class MyApp {
public rootPage:any = HomePage;
constructor(private platform: Platform,private statusBar: StatusBar,private splashScreen: SplashScreen, private network: Network, private iab: InAppBrowser, private http: Http, private toast: Toast) {
platform.ready().then(() => {
networkinterface.getWiFiIPAddress((ip) => {
console.log(ip);
});
}
You have to use it like below after installing the non-native plugin.
This method (getIpAddress()) is deprecated and uses the
getWiFiIPAddress() method.
declare let networkinterface: any;
#Component({
...
})
export class TestPage {
...
getIpAddress() {
networkinterface.getWiFiIPAddress((ip) => {
console.log(ip);
});
}
}
You can try using external url:
async function getIP(){
const repsIP = await fetch('https://api.ipify.org/?format=json');
const data = await repsIP.json();
return data;
}
Wherever you want, call this function:
this.getIP().then(data => this.ipAddress = data.ip);