Ionic Uncaught Error: Cannot find module “.” when importing a service provider

Question

I am trying to import a new service provider that I just created after pulling from the latest branch in my ionic app.

When I try to import this line of code:

import { AuthServiceProvider } from '../providers/auth-service'

in app.module.ts I always got an error saying that:

Uncaught Error: Cannot find module "."
    at webpackMissingModule (index.js:3)
    at e.code (index.js:3)
    at Object.<anonymous> (index.js:9)
    at __webpack_require__ (bootstrap 62d6a5897825ac327001:54)
    at Object.690 (slide.transition.ts:67)
    at __webpack_require__ (bootstrap 62d6a5897825ac327001:54)
    at Object.495 (main.js:1885)
    at __webpack_require__ (bootstrap 62d6a5897825ac327001:54)
    at Object.487 (notification-api.ts:6)
    at __webpack_require__ (bootstrap 62d6a5897825ac327001:54)

But take note that I am also importing another service from my provider that is working perfectly.

Here is the code of my auth-service.ts below.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular/umd';

/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

  public isLoggedIn = false;

  constructor(
    public http: HttpClient,
    private events: Events
  ) {
    console.log('Hello AuthServiceProvider Provider');

    events.subscribe('user:logged-in', (user) => {
      this.isLoggedIn = true;
      console.log('Welcome', user);
    });
  }

}

I won't show my code in my app.module.ts because it is bombarded by import plugins and other providers.

Here is my ionic info

cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 4.6.1 
OS                : Linux 4.13

Environment Variables:

ANDROID_HOME : /home/clifford/Android/Sdk

So why I am having an error in that specific service provider compare to other providers which are just the same?

Any thoughts?

Appreciate if someone could help. Thanks in advance.

Answer 1

I finally figure it out to solve the problem. The error occurs when I import the events from ionic-angular.

So instead of: import { Events } from 'ionic-angular/umd';

Just remove the umd at the end. I don't know why it happened because I am using auto import from my vs code.

Answer 2

I changed import { Events } from 'ionic-angular/umd'; to import { Events } from 'ionic-angular';. I was using "typescript": "~2.6.2". I tried to change the version of typescript and I have heard that typescript 3.1 can be fix in some cases. In my case once i went higher than typescript 2.8.0 I started getting other issues related to ionic. At the end the above fix works, and I think this is more a ionic framework issue.