Angular-cli: 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?

[aptogo]

@mmartimo you need to let TypeScript know about the mapboxgl global variable.

Add the following to your typings.d.ts file:

declare var mapboxgl;

[mmartimo]

@aptogo thanks so much for jumping in... I'm really sorry, but I'm still missing something.

1. I uninstalled the types/mapbox-gl module.
2. I set the script and style in .angular-cli.json
3. I declared mapboxgl in typings.d.ts
   declare var mapboxgl;
4. I created mapbox.ts as shown above.
5. In my map services I added:
   import {Map} from "./mapbox";

But now, it is upset a few lines down when I declare map: Map;

Webpack now gives:
Generic type 'Map<K, V>' requires 2 type argument(s).

Conveniently my IDE gives the same:
Error:(10, 8) TS2314:Generic type 'Map<K, V>' requires 2 type argument(s).

I also tried reinstalling the types/mapbox-gl module... seems there is no effect positive or negative.

Please let me know if any other ideas?

[rolandjitsu]

Seems to work now 🎉 But more people should confirm it.

[rbonillajr]

@rolandjitsu what configuration did you use?

[rolandjitsu]

@rbonillajr what do you mean? The angular CLI config? There's nothing in the config related to mapbox.

You just need to make sure you add the typings for it via @types/mapbox-gl in your package.json and reference it in tsconfig.json, then you should be able to just import * as mapboxgl from 'mapboxgl' (that's necessary due to the token which you need to set on the global object).

[rbonillajr]

@rolandjitsu in production target is broken. in dev work
my code:

package.json

"dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/geojson": "^1.0.2",
    "@types/mapbox-gl": "^0.38.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "mapbox-gl": "^0.38.0",
    "ng-sidebar": "^3.4.3",
    "ng2-slim-loading-bar": "^4.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.4"
  }

tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "exclude": [
      "node_modules"
    ]
  }
}

ng Service

import { Injectable } from '@angular/core';
import { Map } from 'mapbox-gl';
import * as mapboxgl from 'mapbox-gl';

@Injectable()
export class MapService {
    map: Map;
    baseMaps: any;

    constructor() {
        let mapboxAccessToken: string = 'my token';

        Object.assign(mapboxgl, {
            accessToken: mapboxAccessToken
        });

    }

}

ng component

import { Component, Injectable, OnInit } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
import { MapService } from '../../services/map.service';
import { LocationService, IGeoJson } from '../../services/location.service';
import { LngLat, Map } from 'mapbox-gl';
import * as mapboxgl from 'mapbox-gl';
// import MapboxDraw from '@mapbox/mapbox-gl-draw';

@Component({
    moduleId: module.id,
    selector: 'map',
    templateUrl: './map.component.html',
})
@Injectable()
export class MapComponent implements OnInit {
    public cars: any;
    public map: any;
    constructor(private mapService: MapService,
        private slimLoader: SlimLoadingBarService
    ) {

    }

    ngOnInit() {

        this.slimLoader.height = '2px';
        this.slimLoader.color = 'firebrick';
        this.slimLoader.start(() => {
            console.log('Loading complete');
        });

        this.map = new Map({
            container: 'mapa',
            style: 'mapbox://styles/mapbox/streets-v9',
            zoom: 7,
            center: [-79.89260990593574, 8.488481600020107]
        });


        this.addControls();
        this.mapService.map = this.map;
        this.slimLoader.complete();

    }
    addControls() {
        this.map.addControl(new mapboxgl.NavigationControl());

        this.map.addControl(new mapboxgl.ScaleControl({
            maxWidth: 80,
            unit: 'metric'
        }));
        this.map.addControl(new mapboxgl.FullscreenControl());
    }
}

html component

<div id="mapa">
</div>

[rolandjitsu]

@rbonillajr try to format your code a bit better and please add the error message.

[rbonillajr]

@rolandjitsu sorry. I fixed it.

[rolandjitsu]

@rbonillajr did you try to update zone.js and @angular to the latest versions, I know that zone.js is at around .12 and angular at .2.3. Unless your packages are actually already using the latest since you're using the ^ notation.

And I'd move:

Object.assign(mapboxgl, {
    accessToken: mapboxAccessToken
});

To the root of the file, outside of the constructor. No point to have that in the constructor since you only need to do it once and your service might be instantiated more than once if you import it in different modules.

Also, you might want to do the following when creating the map (mind the incomplete example):

class MapComponent {
    @ViewChild('mapa', {read: ElementRef}) mapRef: ElementRef;
    ngOnInit() {
        this.map = new Map({container: this.mapRef.nativeElement ...})
    }
}

Also note that you might want to wait for map ready to start adding anything to it.

<div #mapa></div>

But you haven't provided an error message, so it's hard to tell what's going on.

[rbonillajr]

@rolandjitsu it is error message:

I upgrade packages.

[rolandjitsu]

@rbonillajr I've actually just noticed that I haven't test with prod target because my CI build failed and never deployed. I'll test and let you know if this error persists.

[rolandjitsu]

@rbonillajr ok, so the issue still persists. I just wonder if we can skip mangling now for specific scripts.

@filipesilva

[aptogo]

I think I have a solution to this issue...

My setup:

@angular/cli: 1.2.1
node: 6.9.5
os: darwin x64
@angular/animations: 4.3.0
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.0
@angular/language-service: 4.3.0

Install mapbox-gl (note that this is just to get the prebuilt js and css files in /dist. The source is not used) (my version is [email protected]):
npm install --save mapbox-gl

Install mapbox-gl types (my version is @types/[email protected]):
npm install --save @types/mapbox-gl

Very important - this is the key step
Edit tsconfig.app.json and change the compilerOptions/types line:
types: ["mapbox-gl", "geojson"]

Edit tsconfig.spec.json and change the compilerOptions/types line:
types: ["mapbox-gl", "geojson", "jasmine", "node"]

This enables automatic inclusion of the required types from the @types packages

Add the pre-built mapbox js and css to your .angular-cli.json config:\

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

Now make sure that you have no import * as mapbox from 'mapbox-gl' statements anywhere in your codebase. You should be able to use mapbox with full typing like this e.g mapboxgl.Map, mapboxgl.LngLat. Geojson types are also pulled in e.g. GeoJSON.FeatureCollection<GeoJSON.GeometryObject>

Note that if you forget and leave any import * as mapbox from 'mapbox-gl' statements in your codebase then you will end up with 2 copies of mapboxgl - 1 from the script inclusion, and 1 built from the source. However, the 1 from the script inclusion seems to be loaded after so it will still work ok but the size of your app will be bigger.

[kopz9999]

thanks @aptogo

[Wykks]

Detailled cause of the issue : https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-303880888
A better workaround is to set noParse: /(mapbox-gl)\.js$/, to the webpack config.

@filipesilva Is there a way to set noParse conf without ejecting ?

[Wykks]

Actually, in create-react-app they fixed this issue by disabling comparisons compression in uglifyjs
https://github.com/christensena/create-react-app/commit/8763a34c250eb956a45951053498c57ba4829a4a

Would a change like this, be accepted in angular-cli ?

[filipesilva]

@Wykks thank you for the investigation on the real cause of this problem. Your solution in #7931 should work... but reading through the causes I am reminded of another compromise we had to make: https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-configs/browser.ts#L117-L119

So if the problem with mapbox-gl-js is because of the webpack global wrap + uglify mangles the global local var, disabling it in webpack should work. The only reason it isn't disabled is because last time I tested it it had a bad interaction with --build-optimizer. Now I tested it again and this bad interaction is gone.

Can you test if setting global: false fixes your usecase as well please?

[silberjan]

@filipesilva Is there a way to set noParse conf without ejecting ?

@Wykks did you get an answer to that or is this idea already discarded?

[Wykks]

Using @angular/cli 1.5.0-rc.0
ng build --prod with global: true => Broken

chunk {0} polyfills.d8d3d78a4deb2ab66856.bundle.js (polyfills) 66.1 kB {4} [initial] [rendered]
chunk {1} main.d84a5e65a523d900e3b6.bundle.js (main) 980 kB {3} [initial] [rendered]
chunk {2} styles.cbb57e89e9ac6ad6f3fb.bundle.css (styles) 78.1 kB {4} [initial] [rendered]
chunk {3} vendor.23b050bcb59f7435f7a8.bundle.js (vendor) 1.09 MB [initial] [rendered]
chunk {4} inline.6eda527e2fab8b0dae50.bundle.js (inline) 1.45 kB [entry] [rendered]

ng build --prod with global: false => App works :+1:
Size info :

chunk {0} polyfills.7e3abfc710733c67257a.bundle.js (polyfills) 65.9 kB {4} [initial] [rendered]
chunk {1} main.d84a5e65a523d900e3b6.bundle.js (main) 980 kB {3} [initial] [rendered]
chunk {2} styles.cbb57e89e9ac6ad6f3fb.bundle.css (styles) 78.1 kB {4} [initial] [rendered]
chunk {3} vendor.3274e60605db088741dd.bundle.js (vendor) 1.09 MB [initial] [rendered]
chunk {4} inline.f341fd26bb21d3c849c9.bundle.js (inline) 1.45 kB [entry] [rendered]

ng serve --prod with global: false => Uncaught ReferenceError: global is not defined
ng serve with global: false => Uncaught ReferenceError: global is not defined at eval [...]node_modules/sockjs-client/lib/utils/browser-crypto.jsbrowser-crypto.js:3)
ng build --prod --build-optimizer with global: false => App works :+1:

chunk {0} polyfills.7e3abfc710733c67257a.bundle.js (polyfills) 65.7 kB {3} [initial] [rendered]
chunk {1} main.c7a84c385043ae0584ac.bundle.js (main) 1.92 MB {3} [initial] [rendered]
chunk {2} styles.cbb57e89e9ac6ad6f3fb.bundle.css (styles) 78.1 kB {3} [initial] [rendered]
chunk {3} inline.a3c784b219c2d2710d57.bundle.js (inline) 1.45 kB [entry] [rendered]

By the way the proj tested is right there : https://github.com/Wykks/ngx-mapbox-gl
(That's why this issue is critical for me)

@j-slvr discarded, the other solutions are better than noParse

[freemany]

I confirmed it works simply by the followings:

1. in .angular-cli.json, added:
   styles: "../node_modules/mapbox-gl/dist/mapbox-gl.css"
   scripts: " "../node_modules/mapbox-gl/dist/mapbox-gl.js""
2. on the ts action page,
   no 'import' or any 'require' but
   declare const mapboxgl: any;
   then you can use object mapvboxgl like:
   this.mapbox = mapboxgl;
   this.mapbox.accessToken = 'YOUR_TOKEN';

Many many thanks, saved me heaps of time!

[filipesilva]

@Wykks the reason it fails on ng serve but not on build is because webpack-dev-server actually needs node.global = true since it bundles sockjs-client.

I'm trying to address the node.global problem in https://github.com/webpack/webpack-dev-server/issues/1147 and https://github.com/sockjs/sockjs-client/issues/401#issuecomment-336904363.

[filipesilva]

A new version of webpack-dev-server was released with a fix for the global object. I put up https://github.com/angular/angular-cli/pull/7931 which think will address this problem.

It would be great if someone can test it (see https://github.com/angular/angular-cli#working-with-master on how to work with a linked CLI) for your usecases, and let me know if there's still problems.

[Wykks]

Tested #8130, works fine ! :+1:

edit: But it introduce another issue (see PR)

[rolandjitsu]

I'm actually still seeing the same issue with the error from Mapbox. My CLI is:

@angular/cli: 1.4.9
node: 8.6.0
os: darwin x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/tsc-wrapped: 4.4.6
typescript: 2.5.3

Has this not been released yet?

[rolandjitsu]

@filipesilva Ok, tested with latest RC version and it seems to work, but intl seems to have trouble now:

index.js:2 Uncaught ReferenceError: global is not defined
    at eval (index.js:2)
    at Object.../../../../intl/index.js (polyfills.bundle.js:965)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (polyfills.ts:70)
    at Object.../../../../../src/polyfills.ts (polyfills.bundle.js:7)
    at __webpack_require__ (inline.bundle.js:55)
    at Object.1 (polyfills.bundle.js:994)
    at __webpack_require__ (inline.bundle.js:55)
    at webpackJsonpCallback (inline.bundle.js:26)
    at polyfills.bundle.js:1

And the error occurs at the first line:

// Expose `IntlPolyfill` as global to add locale data into runtime later on.
global.IntlPolyfill = require('./lib/core.js');

// Require all locale data for `Intl`. This module will be
// ignored when bundling for the browser with Browserify/Webpack.
require('./locale-data/complete.js');

// hack to export the polyfill as global Intl if needed
if (!global.Intl) {
    global.Intl = global.IntlPolyfill;
    global.IntlPolyfill.__applyLocaleSensitivePrototypes();
}

// providing an idiomatic api for the nodejs version of this module
module.exports = global.IntlPolyfill;



//////////////////
// WEBPACK FOOTER
// /Users/rolandjitsu/Projects/infarm/dashboard/node_modules/intl/index.js
// module id = ../../../../intl/index.js
// module chunks = polyfills

[filipesilva]

We had to undo the #8130 fix in #8250 to fix #8160. Disabling the node global broke other projects and unfortunately that would be a real breaking change that we can't let in in the 1.x release. For 2.0 we plan on having global disabled.

[Wykks]

Then, for the 1.x release we can probably include this fix instead ? https://github.com/angular/angular-cli/pull/7931
No sure about the sizing impact, I don't have a big app to test that :(

[vecernik]

Is configurable 'global' is scheduled for version 1.5.0?

[khanhvu161188]

Is this issue solved in version 1.5?

[wshaver]

Also needing a fix for this issue.

[wshaver]

Followed the workarounds listed above, got things working.

// replace this:
import { IControl } from "mapbox-gl";
export class MapControls implements IControl {
// with this:
export class MapControls implements mapboxgl.IControl 

[vecernik]

it works with angular 5 and current (1.5.0) like a charm. thank you guys.

[redriverit]

I am still having this issue with angular 5 and current (1.5.0).

[aptogo]

I'm still seeing the same issue too. Angular 5 and CLI 1.5.0.

[khanhvuNOIS]

@vecernik could you give us your configuration? Angular 5 and CLI 1.5.0 does not resolve this issue

[Wykks]

@khanhvuNOIS Can you try this PR ? https://github.com/angular/angular-cli/pull/7931

[SublimeProphets]

@Wykks the solution in your PR #7931 works perfect for me.
I'm running angular 5.0.1 and angular-cli 1.5.0 and declaring mapbox-gl as follow (in my index.ts -> creating a custom module)
declare const mapboxgl: any;

[khanhvuNOIS]

@Wykks I could confirm the PR works perfectly. Hope it will be merged soon

[vecernik]

@khanhvuNOIS I'm sorry to confuse you, I meant ng5+cli1.5.0 builds well my project with Faye.

[Bexanderthebex]

I'm sorry I am new to angular and mapboxgl.js, how can I set noParse to false in the webpack config? what files can I find it? Many thanks!

[Wykks]

@Bexanderthebex you can eject from cli https://github.com/angular/angular-cli/wiki/stories-moving-out-of-the-cli and you will have access to the webpack config.
Or you can download this patch https://github.com/Wykks/ngx-mapbox-gl/blob/e0b18aaf74c669f26c8964f8bfb0f8617f21173a/ngcli-comparisons-false.patch
Then add this to your package.json:
"postinstall": "patch -N -p1 < ngcli-comparisons-false.patch &2>/dev/null" (for linux. Adapt this if you're on windows of course)
You can also load mapbox-gl globally to avoid this error (see above). But doing this way, you can't lazy load mapbox-gl.

[filipesilva]

Fixed via https://github.com/angular/angular-cli/pull/7931

[agiratech-vigneshm]

Upgrading to mapbox-gl.js 0.48.0 fixes this error if anyone still experiences this. I got it suddenly after moving to angular 6.1

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}