Ionic 2 - Runtime error Cannot find module "."
Solution 1
I can see 2 issues on your approach.
Issue 1: You have to remove this old module "ionic-native": "^2.4.1",
.After that run npm i
Issue 2: You need to inject Geolocation
inside the providers
array (app.module.ts
).You must do this with the latest ionic native ("@ionic-native/core": "^3.4.4"
).
You can read more about it here: Ionic Native.
Solution 2
I know that the below solution it is not your case, but I have the same problem in Ionic 3.
The solution was reported on Webpack issue discution by @killian2301.
Just remove all imports that have /umd at the final.
In my case, I changed:
import { IonicPageModule } from 'ionic-angular/umd';
To:
import { IonicPageModule } from 'ionic-angular';
Solution 3
This frequently occurs in Ionic 2+ , due to unusual auto import by IDE.
Change the code from
import { TextInput } from 'ionic-angular/umd';
to
import { TextInput } from 'ionic-angular';
where ever it occurs with package/umd
jsdiaries-gd
Updated on June 06, 2022Comments
-
jsdiaries-gd almost 2 years
I have experienced this error when serving my Ionic 2 application to my localhost by using the command:
ionic serve
I am unsure where this error stems from. I have meticulously double checked all my imports for a broken path in my TypeScript files. I haven't found anything.
The only changes made between the application working and not working was adding a new interface for holding data for a Google maps Location.
However I don't see how this would be relevant and it has to be something else in the build process.
app.modules.ts
import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { IonicStorageModule } from '@ionic/storage'; import { MyApp } from './app.component'; import { Geolocation } from '@ionic-native/geolocation'; import { Place } from '../model/place.model'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { NewPlacePage } from '../pages/new-place/new-place'; import { PlacePage } from '../pages/place/place'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; import { ActivePage } from '../pages/active/active'; import { PlacesService } from '../services/places.service'; import { ConnectivityService } from '../providers/connectivity-service'; import {AgmCoreModule } from 'angular2-google-maps/core' @NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, ActivePage, NewPlacePage, PlacePage ], imports: [ IonicModule.forRoot(MyApp), IonicStorageModule.forRoot(), AgmCoreModule.forRoot({ apiKey: 'hiddenforstackoverflow' }) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, ActivePage, NewPlacePage, PlacePage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ConnectivityService, PlacesService, Storage] }) export class AppModule {}
places.service.ts
import { Injectable } from '@angular/core'; import { Storage } from '@ionic/storage'; import { Place } from '../model/place.model'; @Injectable() export class PlacesService { private places: Place[] = []; constructor(private storage: Storage) { } addPlace(place: Place) { this.places.push(place); console.log(this.places); this.storage.set('places', this.places); } getPlaces() { return this.storage.get('places') .then( (places) => { this.places = places == null ? [] : places; console.log(this.places); console.log(places); return this.places.slice(); }); } }
newplace.ts
import { Component, Injectable } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { PlacesService } from '../../services/places.service'; import { Geofence, Geolocation, SMS } from 'ionic-native'; @Component({ selector: 'page-new-place', templateUrl: 'new-place.html' }) export class NewPlacePage { location: { lat: number, lng: number } = { lat: 0, lng: 0 }; constructor(private placesService: PlacesService, private navCtrl: NavController) { } onLocateUser() { Geolocation.getCurrentPosition() .then( (location) => { console.log('Location successful') this.location.lat = location.coords.latitude; this.location.lng = location.coords.longitude } ) } onAddPlace(value: { title: string }) { console.log(value); this.placesService.addPlace({ title: value.title, location: this.location }); this.navCtrl.pop(); } }
place.model.ts
export interface Place { title: string; location: { lat: number, lng: number } }
Ionic Versions
Ionic Framework: 2.2.0 Ionic Native: ^2.4.1 Ionic App Scripts: 1.2.5 Angular Core: 2.4.8 Angular Compiler CLI: 2.4.8 Node: 7.7.4 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
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.4.4", "@ionic-native/geolocation": "^3.4.4", "@ionic/storage": "2.0.0", "@types/google-maps": "^3.2.0", "angular2-google-maps": "^0.17.0", "ionic-angular": "2.2.0", "ionic-native": "^2.4.1", "ionicons": "3.0.0", "typescript": "2.0.9", "rxjs": "5.0.1", "sw-toolbox": "3.4.0", "zone.js": "0.7.2" }, "devDependencies": { "@ionic/app-scripts": "^1.2.5", "sw-toolbox": "3.4.0", "typescript": "2.0.9" }, "cordovaPlugins": [ "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-device", "cordova-plugin-statusbar", "cordova-plugin-splashscreen", "ionic-plugin-keyboard" ], "cordovaPlatforms": [], "description": "ionic-boiler: An Ionic project" }
Can anyone give advice on how to debug this further? Should I debug the polyfils.ts file?