Ionic 2 - Error: Module ""."" not found at runtime

Encountered a perplexing error while running my Ionic 2 application on localhost using the command:

ionic serve

I've diligently inspected all my imports for any incorrect paths in my TypeScript files, but haven't found anything amiss.

The only recent change made was adding a new interface to store data for Google maps Locations. However, I fail to see how this could be causing the issue, leading me to believe it's related to 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"
}

Seeking guidance on further debugging steps. Should I focus on debugging the polyfils.ts file?

Answer №1

Although the solution below may not directly apply to your situation, I encountered a similar issue in Ionic 3.

This resolution was shared in a discussion thread on Webpack issues by @killian2301.

The fix is to simply remove any imports that end with /umd.

In my instance, I made the following adjustment:


import { IonicPageModule } from 'ionic-angular/umd';
To:

import { IonicPageModule } from 'ionic-angular';

Answer №2

This issue often arises in Ionic 2+ when the IDE automatically imports from a non-standard location.

To resolve this, simply update the code from

 import { TextInput } from 'ionic-angular/umd';

to

import { TextInput } from 'ionic-angular';

wherever the import statement includes package/umd.

Answer №3

Upon reviewing your approach, I have identified 2 issues that need to be addressed.

Problem 1: It is essential to remove the outdated module "ionic-native": "^2.4.1",. Once removed, execute npm i.

Problem 2: Make sure to include Geolocation in the providers array within app.module.ts. This should be done using the latest Ionic Native version ("@ionic-native/core": "^3.4.4").

For further details, refer to this resource: Ionic Native Documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing the Default Dropdown Value in ABP Framework Using Angular UI Dynamic Forms

Currently, I am utilizing the ABP framework along with Angular UI to work on dynamic forms. One specific aspect of my work involves implementing a dropdown as shown below: const timeZoneProp = new FormProp<IdentityUserDto>({ type: ePropType.Enum, ...

NativeScript: TypeScript for Formatting Numbers

Being a beginner in NativeScript, I'm finding it difficult to find basic information through Google search. But now, I have a specific question: I have the number 1234567.89 stored in a variable, and I want to display it in a label with the format ...

Retrieving the selected date from mat-datepicker into a FormControl

When creating a POST request to an API, I encountered an issue with the mat-datepicker field as it throws an error when inside the ngOnInit() call (since nothing is selected yet). Other fields like name, email, etc. work fine, but extracting a value from t ...

How can I furnish TSC with TypeScript definitions for URI imports in a comprehensive manner?

import Vue from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b3b0a085f7ebf0ebf7f4">[email protected]</a>/dist/vue.esm.js' If I submit the above code to TSC for compilat ...

`How can I effectively test a React.js page utilizing both Context and useEffect?`

I'm struggling with testing a page that uses Context and useEffect with Jest and Testing-library, can you offer any assistance? REPOSITORY: https://github.com/jefferson1104/padawan Context File: src/context/personContext.tsx import { createContext, ...

Tips for showing JSON information in Nativescript

How can I display all values in a page using the provided JSON data? res { "StatusCode": 0, "StatusMessage": "OK", "StatusDescription": [ { "sensors": [ { "serial": "sensor1", "id": "1" }, ...

Navigate to a new page by utilizing the nav.push function while incorporating a side menu in your

Trying to develop a small application using ionic2 to enhance my understanding of it, however, facing some challenges with navigation. I've grasped the distinction between a rootpage (adjusted with nav.setRoot) and a regular page (added through nav.p ...

What specifications need to be set up for server and client configurations when using a MEAN Stack application?

When preparing to launch a mid-level enterprise application for the MEAN Stack, what specific configurations are required? How should these configurations be implemented with Angular 2/4/5 and NodeJS? ...

What is the best way to effectively nest components with the Nebular UI Kit?

I'm currently facing an issue with nesting Nebular UI Kit components within my Angular app. Specifically, I am trying to nest a header component inside the home page component. The problem arises when the attributes take up the entire page by default, ...

Using the typeof operator to test a Typescript array being passed as an object

I have a puzzling query about this particular code snippet. It goes like this: export function parseSomething(someList: string[]): string[] { someList.forEach((someField: string) => { console.log(typeof someField) }) Despite passing a s ...

Creating a dynamic form in Angular based on user input

I am in the process of creating a dynamic web form where the user's input will determine the subsequent form inputs that are generated. For example: <mat-form-field> <mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="Typ ...

Specifying the type of "this" within the function body

After going through the typescript documentation, I came across an example that explains how to use type with this in a callback function. I am hoping someone can assist me in comprehending how this callback will operate. interface DB { filterUsers(fil ...

Post-upgrade to .Net Core 3.1, the Liveness and Readiness probe encountered failures

Recently, I updated my .Net Core from version 2.1 to 3.1. However, after the upgrade, the Liveness and Readiness probe to the pods failed. Below is an excerpt from my docker file: FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base WORKDIR / ...

Disappearance of Current User in Console When Refreshing Angular 4/5 Firebase

After creating an Angular 5 login using Firebase, I noticed an issue with the authentication object disappearing upon page reload. Even though the user remains logged in, the auth object vanishes once the page is refreshed (the username is still displayed ...

Deduce the Prop Component Type by Examining the Attribute Type

I am facing an issue with a component that requires a `labels` attribute. <Component defaultValue={FURNITURE.BED} labels={[ { value: FURNITURE.BED, text: 'Bed', }, { value: FURNITURE.COUCH, text: 'C ...

The Angular2 application encountered a 404 file not found error while trying to read a Const from a ts

Recently I started working with angular2 and encountered a problem when trying to access constant values from an external .ts file using the following code: import {apis} from '../constants/apis'; The content of the constants/apis.ts file is as ...

"An identifier was expected causing a parsing error" triggered by v-on:change

Encountered an issue where importing a class to be used solely as a typescript type annotation resulted in a no-unused vars error. Following advice from this discussion thread, I added "plugin:@typescript-eslint/recommended" to the eslint config, ...

Encountering an Uncaught Error: MyModule type lacks the 'ɵmod' property

I am currently working on developing a custom module to store all my UI components. It is essential that this module is compatible with Angular 10 and above. Here is the package.json file for my library: { "name": "myLibModule", &qu ...

Error building Angular module occurred while executing the project

Recently, I got an Angular template from this site: After successfully running npm install, I encountered an error when trying to run ng serve: ./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Mo ...

Explain the object type that is returned when a function accepts either an array of object keys or an object filled with string values

I've written a function called getParameters that can take either an array of parameter names or an object as input. The purpose of this function is to fetch parameter values based on the provided parameter names and return them in a key-value object ...