Webpack + 3rd party library: Specifying alternate file instead of package entry point

[MattSidor]

OS

Mac OSX El Capitan

Versions

angular-cli: 1.0.0-beta.20-4
node: 6.7.0
os: darwin x64

Repro steps.

Install 'mapbox-gl' library: npm install mapbox-gl --save
Install relevant typings: npm install @types/mapbox-gl --save-dev
Attempt to import: import * as mapboxgl from 'mapbox-gl'

Forgive my naiveté – I'm new to Angular 2 and webpack – but I am trying to use a 3rd party library (mapbox-gl-js) that was designed to work with Browserify.

As a result, in order to adapt it with webpack, their installation instructions require you to use the distribution build instead of the package entry point:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

Normally, to work around this, I would add a resolve.alias property in my webpack.config.js file:

resolve: {
  alias: {
    'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
  }
}

I understand I cannot override the webpack configuration settings in angular-cli, based on the discussion in issue #1656.

So, my question is: what are the current best workarounds to this problem?

[Meligy]

Import and re-export?

[MattSidor]

I'm sorry, I don't understand.

[Meligy]

Have something like shared/index.ts (or whatever naming you choose), with something like:

export mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

[MattSidor]

I am trying this, without success. I am getting an error that the module cannot be found.

I'm not sure this works in this situation... I think I still need to change the library's file path in Webpack.

./src/shared/index.ts? Or a different folder?

[Meligy]

You'd be importing from ./shared or../shared .

[MattSidor]

I can't even get the export statement to work correctly, no matter which directory I place it in, so I have nothing to import except the incorrect module that has been loaded by Webpack. I'm sorry.

[Meligy]

Oops. I know that export * from ... works and kinda assumed the previous one.

I suppose you still can write something like:

import _mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

export var mapboxgl = _mapboxgl;

[MattSidor]

Thanks Meligy, this is helpful, but I'm still unable to resolve the module in either an import or export statement. I get the error TS2307: Cannot find module 'mapbox-gl/dist/mapbox-gl.js'.

I've tried a bunch of different kinds of relative paths (e.g. '/node_modules/mapbox-gl/dist/mapbox-gl.js') without success.

What's puzzling is that TypeScript should be able to locate it via the Node.js module resolution mechanism when it's in my node_modules folder...

[Meligy]

TypeScript will not see it without a declaration file, either in the package itself, or installed via typings tool or @types NPM packages. This is not specific to Angular CLI.

[MattSidor]

As I noted in my original post, I have already installed the @types NPM package for this library.

…

On Thu, Dec 1, 2016, 6:00 PM Meligy, GuruStop.NET ***@***.***> wrote: TypeScript will not see it without a declaration file, either in the package itself, or installed via typings tool or @types NPM packages. This is not specific to Angular CLI. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3335 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF2pRpYtbuzx5WUU7kNBEFm-oThAY0pBks5rD3vDgaJpZM4LA-iA> .

[hansl]

Typescript can find it, the problem is that webpack does not find it.

Unfortunately the only way to use it for now will be to const mapboxGl = require('...');. They should publish their code to NPM without Flow or using a different main field in their package.json. Looking at their code, there's no reason they should be incompatible with webpack while also supporting browserify.

[BernhardRode]

Although this issue is already closed...

Just tried using latest cli etc.

Works:
import 'mapbox-gl/dist/mapbox-gl';

Does not work:
import * as mapboxgl from 'mapbox-gl/dist/mapbox-gl';

Returns:

ERROR in /developer/src/mapbox-demo/src/app/mapbox/services/mapbox.service.ts (2,27): Cannot find module 'mapbox-gl/dist/mapbox-gl'.)
webpack: Failed to compile.

Working solution has one problem... no access to mapbox ;)

[MattSidor]

Thanks for sharing this, Bernhard!

Working solution has one problem... no access to mapbox ;)

Do you mean, no mapbox API access?

[BernhardRode]

No with importing like
import 'mapbox-gl/dist/mapbox-gl';

You do not have an instance to talk to ;) It is just magically imported by webpack, but not usable inside of my component.