"ERROR in src\app\app.module.ts(60,22): Error during template compile of 'AppModule' " while building ionic app to ios --prod using cordova - ionic-framework

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,

Related

I installed ngx echarts in an Angular 14 project but I get this error Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments

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

IONIC native plugin not working in IOINIC app

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 {
}

How to use geoman-io with ngx-leaflet

I am trying to use geoman-io plugin (https://github.com/geoman-io/leaflet-geoman) in ngx-leaflet application. I've found this post: Integrate EasyButton, Geoman with ngx-leaflet , but the only solution provided in this post, that works for me, is to use bracket notation like that:
map["pm"]["addControls"]({position: 'topleft'});
I guess that's not the best way to do this. So my question is how to properly use geoman-io in ngx-leaflet?
When i tried exactly these steps, it doesn't work, because at map.pm.addControls({...}) i get error
Property 'pm' does not exist on type 'Map'
Steps:
npm i #geoman-io/leaflet-geoman-free
Import geoman in the component import '#geoman-io/leaflet-geoman-free';
In angular.json in "build" section import geoman styles:
"styles": [
"src/styles.scss",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/#geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"
],
my component:
import { BaseIconOptions, geoJSON, Bounds, CRS, Icon, icon, IconOptions, imageOverlay, latLng,
LatLngBounds, LatLngBoundsExpression, layerGroup, Map, marker, point, polyline, tileLayer } from 'leaflet';
import * as L from 'leaflet';
import 'leaflet-rotatedmarker';
import '#geoman-io/leaflet-geoman-free';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent {
...
onMapReady(map: Map) {
map.pm.addControls({
position: 'topleft',
drawMarker: false
});
}
}
My package.json file:
"dependencies": {
"#angular/animations": "~10.2.0",
"#angular/cdk": "^10.2.7",
"#angular/common": "~10.2.0",
"#angular/compiler": "~10.2.0",
"#angular/core": "~10.2.0",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "~10.2.0",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.2.0",
"#angular/platform-browser-dynamic": "~10.2.0",
"#angular/router": "~10.2.0",
"#asymmetrik/ngx-leaflet": "^8.1.0",
"#fortawesome/angular-fontawesome": "^0.7.0",
"#geoman-io/leaflet-geoman-free": "^2.7.0",
"#types/leaflet": "^1.5.19",
"#types/leaflet-rotatedmarker": "^0.2.1",
"leaflet": "^1.7.1",
"leaflet-rotatedmarker": "^0.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.0",
"#angular/cli": "~10.2.0",
"#angular/compiler-cli": "~10.2.0",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"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"
}
If i change the the onMapReady function to onMapReady(map: L.Map) , it throws the same error. Thanks for help!
For me it works with the dirty type any:
onMapReady(map: any)

Ionic native calendar TypeError: Object(...) is not a function

I've just installed the ionic native calendar plugin for phone gap, based on the instructions here: https://ionicframework.com/docs/v3/native/calendar/
When I call anything like hasWritePermission() I get the following error:
index.js:685 Uncaught TypeError: Object(...) is not a function
at index.js:685
at Module../node_modules/#ionic-native/calendar/index.js (index.js:888)
at __webpack_require__ (bootstrap:83)
at Module../src/app/modals/event-detail-modal/event-detail-modal.component.ts (main.js:2401)
at __webpack_require__ (bootstrap:83)
at Module../src/app/app.module.ts (app.component.ts:13)
at __webpack_require__ (bootstrap:83)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:83)
at Object.0 (main.ts:12)
I'm using ionic 4 and angular 7, I'm wondering if this is down to unsupported dependencies? If it is, is there a more up to date plugin I can use, or am I doing something wrong here?
CODE: (addToCalendar method at the bottom)
import { Component, OnInit } from '#angular/core';
import {ModalController, NavParams} from "#ionic/angular";
import {ActivatedRoute, ActivatedRouteSnapshot} from "#angular/router";
import {Calendar} from "#ionic-native/calendar";
interface EventsInterface {
title: string;
startTime: Date;
endTime: Date;
ID: number;
categoriesString: string;
description: string;
recurring: boolean;
recurFrequency: string;
thumbnail: string;
}
#Component({
selector: 'app-event-detail-modal',
templateUrl: './event-detail-modal.component.html',
styleUrls: ['./event-detail-modal.component.scss'],
})
export class EventDetailModalComponent implements OnInit {
/**
*
*/
public event: EventsInterface = null;
/**
*
* #param modalController
* #param navParams
*/
constructor(private calendar: Calendar,private modalController: ModalController, private navParams: NavParams) { }
/**
*
* #param route
*/
ngOnInit() {
// get the event
this.event = <EventsInterface>this.navParams.get('event');
console.log(this.event);
}
/**
*
*/
dismiss(){
return this.modalController.dismiss({
'dismissed':true
});
}
addToCalendar(event: EventsInterface){
this.calendar.hasWritePermission().then((resp: any)=>{
console.log(resp)
}).catch((resp: any) =>{
console.log(resp);
});
}
}
As you can see, I've done very little so far execpt install the plugins and setup a simple promise catch...
EDIT
p
It appears to be related to the wrong versions of some libraries, when installing with nom it warns:
npm WARN #ionic-native/calendar#4.20.0 requires a peer of #ionic-native/core#^4.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN #ionic-native/calendar#4.20.0 requires a peer of rxjs#^5.5.11 but none is installed. You must install peer dependencies yourself.
The problem with this is the rest of the app is using ionic native 5.0.0 and rxjs 6.5.1 and for some reason the calendar component won't work with these newer versions?
Here is the package file:
{
"name": "V3",
"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": "^7.2.2",
"#angular/core": "^7.2.2",
"#angular/forms": "^7.2.2",
"#angular/http": "^7.2.15",
"#angular/platform-browser": "^7.2.2",
"#angular/platform-browser-dynamic": "^7.2.2",
"#angular/router": "^7.2.2",
"#ionic-native/calendar": "^4.20.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/in-app-browser": "^5.12.0",
"#ionic-native/native-page-transitions": "^5.8.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.1.0",
"#ionic/storage": "^2.2.0",
"#types/jquery": "^3.3.31",
"chart.js": "^2.8.0",
"cordova-ios": "4.5.5",
"cordova-plugin-calendar": "^5.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^3.2.0",
"core-js": "^2.5.4",
"intl": "^1.2.5",
"ion4-calendar": "^3.0.4-beta.17",
"ionic2-calendar": "^0.5.2",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"ng2-file-upload": "^1.3.0",
"rxjs": "~6.5.1",
"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/node": "~12.0.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"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.3.0",
"tslint": "~5.17.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-sqlite-storage": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-calendar": {
"CALENDAR_USAGE_DESCRIPTION": " ",
"CONTACTS_USAGE_DESCRIPTION": " "
}
},
"platforms": [
"ios"
]
}
}

Ionic 2 Cannot find module "#angular/common/http/src/headers"

I just started learning ionic and while implementing rest-service i am getting following error,
Error: Cannot find module "#angular/common/http/src/headers"
at Object.199 (http://localhost:8100/build/main.js:87:7)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.198 (http://localhost:8100/build/main.js:43:95)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.278 (http://localhost:8100/build/main.js:231:75)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.222 (http://localhost:8100/build/main.js:166:73)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.200 (http://localhost:8100/build/main.js:146:70)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
and my version details are,
Ionic Framwork: 3.9.2
Ionic App scripts :3.1.8
Angular Core:5.0.3
Node:6.9.4
Os Platform: windows 7
my package.json contains -
"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/http": "^4.5.3",
"#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"
}
app.module look like this,
import { BrowserModule } from '#angular/platform-browser';
import {HttpClientModule} from '#angular/common/http';
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 { Http,HttpModule } from '#angular/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { RestServiceProvider } from '../providers/rest-service/rest-service';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RestServiceProvider
]
})
export class AppModule {}
and last one my service look like this,
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { HttpHeaders } from '#angular/common/http/src/headers';
/*
Generated class for the RestServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class RestServiceProvider {
username:string;
password:string;
constructor(public http: HttpClient) {
console.log('Hello RestServiceProvider Provider');
}
load(){
let requestHeader=new HttpHeaders();
requestHeader.append("Content-Type","application/json");
let postParams={
UserName:this.username,
Password:this.password
}
return new Promise(resolve=>{
this.http.post("htttp/someservice", postParams,{headers:requestHeader})
.subscribe(data => {
alert(data);
}, error => {
console.log(error);// Error getting the data
});
});
}
}
looking for help. :-)
Change
import { HttpHeaders } from '#angular/common/http/src/headers';
to
import { HttpHeaders } from '#angular/common/http';