mapboxgl is incompatible with the CLI in a production build

[rolandjitsu]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

It seems that using Mapbox GL and Angular CLI when targeting production does not work.

Running an app that imports Mapbox with import * as mapboxgl from 'mapboxgl' via ng serve seems to work just fine. But if you run it via:

ng serve --open --sourcemap --target=production --output-hashing=all

An error is thrown from one of the workers created by Mapbox.

Versions.

@angular/cli: 1.0.0-rc.4
node: 7.4.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 2.4.10
@angular/tsc-wrapped: 0.5.2

Repro steps.

1. Scaffold an Angular CLI app
2. Add Mapbox GL dep "mapbox-gl": "^0.34.0"
3. Add the typings ("@types/mapbox-gl": "^0.30.0")
4. import * as mapboxgl from 'mapboxgl' anywhere in the app (log mapboxgl just to see the output)
5. Create a map in one of the components const map: mapboxgl.Map = new Map(Object.assign({container: element})); (element is the nativeElement from @ViewChild('map', {read: ElementRef}) mapRef: ElementRef)

The log given by the failure.

blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1 Uncaught ReferenceError: e is not defined
33../support/isBuffer @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
102.util @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
128.../error/validation_error @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
142../reference/latest @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
156.../style-spec/validate_style.min @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
148.../style-spec/reference/latest @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
154.../style-spec/feature_filter @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
98.../style/style_layer_index @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
anonymous @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:3
o @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
t @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1
(anonymous) @ blob:https://ds.infarm.com/e940fbf0-8c73-42bf-a3cd-d5326c57e0f6:1

Desired functionality.

An app using Mapbox should work when building for production.

Mention any other details that might be useful.

If I instead load Mapbox via .angular-cli.json:

"styles": [
    "../node_modules/mapbox-gl/dist/mapbox-gl.css"
],
"scripts": [
    "../node_modules/mapbox-gl/dist/mapbox-gl.js"
]

It works as expected. I suspect it might have something to do with minification or some other transformation applied to one of the mapbox scripts.

[brandonreid]

Any word on this one? Other issues around the internets seem to point to uglifyjs causing issues. Since Angular-cli doesn't let you modify the webpack.config directly, I can't figure out a way to tell uglify not to touch mapbox.

[robinsummerhill]

You mention a workaround where you load the pre-built mapbox-gl library from .angular-cli.json. Could you elaborate on this? I've added the entry to 'scripts' but webpack is still building mapbox from source.

[rolandjitsu]

@robinsummerhill I don't prebuild anything, just see the last part of my post. I just manually add it to scripts/styles. Mapbox already provides a built version in their package as it's pointed out in the paths I have in the post (node_modules/mapbox-gl/dist/mapbox-gl.css, node_modules/mapbox-gl/dist/mapbox-gl.js).

[rbonillajr]

Hi, I have the same case.
Attached link of my site: http://54.186.39.232/
Find this example. https://github.com/haoliangyu/ngx-mapboxgl-starter
Looks like a webpack problem.
Could someone help us?
Thanks.

[robinsummerhill]

@rolandjitsu By 'pre-built' library, I meant the pre-built version Mapbox supplies in the dist directory. I added the style and script config to .angular-cli.json as you suggested:

"styles": [ "../node_modules/mapbox-gl/dist/mapbox-gl.css" ], "scripts": [ "../node_modules/mapbox-gl/dist/mapbox-gl.js" ]

However, I still see the 'e is not defined' errors you describe above and I'm still guessing that the Mapbox source is being used rather than the pre-built, pre-minified version.

[rolandjitsu]

@robinsummerhill note that you have to remove imports of mapbox as well. I have a mapbox.ts, which expects mapbox to be available as a global object on the window, that looks like:

// TODO: Eventually use the import, but as of right now (03.04.2017), Mapbox and Angular CLI do not work if we import Mapbox
// TODO: Tracked issue at https://github.com/angular/angular-cli/issues/5804
// import * as mapboxgl from 'mapbox-gl';
import {mapboxAccessToken} from '../../../env';

Object.assign(mapboxgl, {
	accessToken: mapboxAccessToken
});
const {Map, AttributionControl, LngLat, LngLatBounds} = mapboxgl;

export {
	Map,
	AttributionControl,
	LngLat,
	LngLatBounds
};

Then I import things I need from that file.

[robinsummerhill]

@rolandjitsu Thanks - that was the missing bit.

[rbonillajr]

@robinsummerhill this it is my code.

yarn install

With this command runs
ng serve --open --sourcemap --target=development --output-hashing=all

With this command gives the error
ng serve --open --sourcemap --target=production --output-hashing=all

ui.zip

[mmartimo]

+1

[mmartimo]

I have updated the .angular-cli.json and removed the import statements I was using... but then in my project I get errors from webpack returning "Cannot find name 'mapboxgl'."

For those that got the workaround functional, did you remove "types/mapbox-gl"? Any other thoughts on what might be causing this?