Cannot resolve module 'angular' when import ngstorage using Ionic and Webpack

Question

I am implementing an application using Ionic with Webpack and Typescript. I install 'ngstorage' via npm and try to import in the entry ts file, but Webpack shows an error - 'Cannot resolve module 'angular''.

I have searched about this error and realized that I need to include the angular in the package.json file and node_modules. However, ionic-sdk module already includes angular. So it instead shows an unacceptable error in the browser that I am trying to load angular more than once.

Does Webpack have ways to skip the module resolver or point to path of angular module to ionic-sdk module instead? or are there any other suggested ways to import?

Thank you.

Answer 1

I'm not familiar with ionic at all but I hope i can help you. First of all in files you use angular. on the top of file you need to import angular:

import angular from 'angular';

Then I got two suggestions that might help you:

1. Add angular as external library

If you are certain that angular is being loaded before the bundle you create with webpack you can add angular as an external library in your webpack config:

externals: [
  'angular'
]

2. "Teach" webpack where to look for angular

Thanks to resolve.alias you can override default imports in webpack. So in your config file you can do something like:

resolve: {
  alias: {
    angular: 'path/to/sdk/angular'
  }
}

As I said I'm not familiar with ionic, so I'm sorry if that's not what you were looking for :).