Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing with webpack and es6 #4368

Closed
aulneau opened this issue Mar 3, 2017 · 8 comments
Closed

Importing with webpack and es6 #4368

aulneau opened this issue Mar 3, 2017 · 8 comments

Comments

@aulneau
Copy link

aulneau commented Mar 3, 2017

Hi there!

I am running into trouble importing this into an angular project written in es6 and built with webpack.

I have tried my tricks at getting modules that might not be made to be imported into an es6 project, but they have not worked.

I have followed the documentation for importing with webpack and I am not sure what else to try!

Error: [$injector:nomod] Module 'mapboxgl' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
@thiagogcm
Copy link

thiagogcm commented Mar 3, 2017

Try import { Map } from 'mapbox-gl/dist/mapbox-gl'; instead

If it's an angular cli project make sure you have imported the scripts and styles as well in the .angular-cli.json file

@aulneau
Copy link
Author

aulneau commented Mar 4, 2017

Thank you for the reply!

Tried that, and got the error at the bottom of this post.

I have tried import mapboxgl from 'mapbox-gl/dist/mapbox-gl' and import * as mapboxgl from 'mapbox-gl/dist/mapbox-gl'

This is my app.js:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngAnimate from 'angular-animate';
import ngAria from 'angular-aria';
import ngMaterial from 'angular-material';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';

import { Map } from 'mapbox-gl/dist/mapbox-gl';

import './common/scss/abstract.scss';
import './common/scss/normalize.scss';
import './common/scss/ngMaterial/main.css';

import './app.scss';

angular.module('app', [
    uiRouter,
    ngAnimate,
    ngAria,
    ngMaterial,
    Map,
    Common,
    Components
])
    .config(($locationProvider, $compileProvider, $mdThemingProvider, $mdIconProvider) => {
        "ngInject";
        $locationProvider.html5Mode(true).hashPrefix('!');
        $compileProvider.debugInfoEnabled(false);
        $mdThemingProvider.theme('default')
            .primaryPalette('blue')
            .accentPalette('pink');
        $mdIconProvider
            .defaultIconSet("./vendor/mdi.svg");
    })
    .component('app', AppComponent);

My errors:

[HMR] bundle has warnings:
problems @ client.js:105
processMessage @ client.js:143
handleMessage @ client.js:68
client.js:107 [HMR] ./~/mapbox-gl/dist/mapbox-gl.js
Critical dependencies:
1:481-488 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/mapbox-gl/dist/mapbox-gl.js 1:481-488
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module function e(e){var i=this;e=util.extend({},defaultOptions,e);var o=new Transform(e.minZoom,e.maxZoom,e.renderWorldCopies);if(t.call(this,o,e),this._interactive=e.interactive,this._failIfMajorPerformanceCaveat=e.failIfMajorPerformanceCaveat,this._preserveDrawingBuffer=e.preserveDrawingBuffer,this._trackResize=e.trackResize,this._bearingSnap=e.bearingSnap,"string"==typeof e.container){if(this._container=window.document.getElementById(e.container),!this._container)throw new Error("Container '"+e.container+"' not found.")}else this._container=e.container;this.animationLoop=new AnimationLoop,e.maxBounds&&this.setMaxBounds(e.maxBounds),util.bindAll(["_onWindowOnline","_onWindowResize","_contextLost","_contextRestored","_update","_render","_onData","_onDataLoading"],this),this._setupContainer(),this._setupPainter(),this.on("move",this._update.bind(this,!1)),this.on("zoom",this._update.bind(this,!0)),this.on("moveend",function(){i.animationLoop.set(300),i._rerender()}),"undefined"!=typeof window&&(window.addEventListener("online",this._onWindowOnline,!1),window.addEventListener("resize",this._onWindowResize,!1)),bindHandlers(this,e),this._hash=e.hash&&(new Hash).addTo(this),this._hash&&this._hash._onHashChange()||this.jumpTo({center:e.center,zoom:e.zoom,bearing:e.bearing,pitch:e.pitch}),this._classes=[],this.resize(),e.classes&&this.setClasses(e.classes),e.style&&this.setStyle(e.style),e.attributionControl&&this.addControl(new AttributionControl),this.on("style.load",function(){this.transform.unmodified&&this.jumpTo(this.style.stylesheet),this.style.update(this._classes,{transition:!1})}),this.on("data",this._onData),this.on("dataloading",this._onDataLoading)} due to:
Error: [$injector:strictdi] e is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.6.2/$injector/strictdi?p0=e
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10145:13
    at Function.annotate [as $$annotate] (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14169:18)
    at injectionArgs (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14896:37)
    at Object.invoke (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14931:19)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14838:46
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14834:41
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
http://errors.angularjs.org/1.6.2/$injector/modulerr?p0=function%20e(e)%7Bvar%20i%3Dthis%3Be%3Dutil.extend(%7B%7D%2CdefaultOptions%2Ce)%3Bvar%20o%3Dnew%20Transform(e.minZoom%2Ce.maxZoom%2Ce.renderWorldCopies)%3Bif(t.call(this%2Co%2Ce)%2Cthis._interactive%3De.interactive%2Cthis._failIfMajorPerformanceCaveat%3De.failIfMajorPerformanceCaveat%2Cthis._preserveDrawingBuffer%3De.preserveDrawingBuffer%2Cthis._trackResize%3De.trackResize%2Cthis._bearingSnap%3De.bearingSnap%2C%22string%22%3D%3Dtypeof%20e.container)%7Bif(this._container%3Dwindow.document.getElementById(e.container)%2C!this._container)throw%20new%20Error(%22Container%20'%22%2Be.container%2B%22'%20not%20found.%22)%7Delse%20this._container%3De.container%3Bthis.animationLoop%3Dnew%20AnimationLoop%2Ce.maxBounds%26%26this.setMaxBounds(e.maxBounds)%2Cutil.bindAll(%5B%22_onWindowOnline%22%2C%22_onWindowResize%22%2C%22_contextLost%22%2C%22_contextRestored%22%2C%22_update%22%2C%22_render%22%2C%22_onData%22%2C%22_onDataLoading%22%5D%2Cthis)%2Cthis._setupContainer()%2Cthis._setupPainter()%2Cthis.on(%22move%22%2Cthis._update.bind(this%2C!1))%2Cthis.on(%22zoom%22%2Cthis._update.bind(this%2C!0))%2Cthis.on(%22moveend%22%2Cfunction()%7Bi.animationLoop.set(300)%2Ci._rerender()%7D)%2C%22undefined%22!%3Dtypeof%20window%26%26(window.addEventListener(%22online%22%2Cthis._onWindowOnline%2C!1)%2Cwindow.addEventListener(%22resize%22%2Cthis._onWindowResize%2C!1))%2CbindHandlers(this%2Ce)%2Cthis._hash%3De.hash%26%26(new%20Hash).addTo(this)%2Cthis._hash%26%26this._hash._onHashChange()%7C%7Cthis.jumpTo(%7Bcenter%3Ae.center%2Czoom%3Ae.zoom%2Cbearing%3Ae.bearing%2Cpitch%3Ae.pitch%7D)%2Cthis._classes%3D%5B%5D%2Cthis.resize()%2Ce.classes%26%26this.setClasses(e.classes)%2Ce.style%26%26this.setStyle(e.style)%2Ce.attributionControl%26%26this.addControl(new%20AttributionControl)%2Cthis.on(%22style.load%22%2Cfunction()%7Bthis.transform.unmodified%26%26this.jumpTo(this.style.stylesheet)%2Cthis.style.update(this._classes%2C%7Btransition%3A!1%7D)%7D)%2Cthis.on(%22data%22%2Cthis._onData)%2Cthis.on(%22dataloading%22%2Cthis._onDataLoading)%7D&p1=Error%3A%20%5B%24injector%3Astrictdi%5D%20e%20is%20not%20using%20explicit%20annotation%20and%20cannot%20be%20invoked%20in%20strict%20mode%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fstrictdi%3Fp0%3De%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20Function.annotate%20%5Bas%20%24%24annotate%5D%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14169%3A18)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14896%3A37)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14931%3A19)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14838%3A46%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10145:13
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14856:16
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14834:41
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at createInjector (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14739:20)
    at doBootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11919:21)
    at bootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11940:13)
http://errors.angularjs.org/1.6.2/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20function%20e(e)%7Bvar%20i%3Dthis%3Be%3Dutil.extend(%7B%7D%2CdefaultOptions%2Ce)%3Bvar%20o%3Dnew%20Transform(e.minZoom%2Ce.maxZoom%2Ce.renderWorldCopies)%3Bif(t.call(this%2Co%2Ce)%2Cthis._interactive%3De.interactive%2Cthis._failIfMajorPerformanceCaveat%3De.failIfMajorPerformanceCaveat%2Cthis._preserveDrawingBuffer%3De.preserveDrawingBuffer%2Cthis._trackResize%3De.trackResize%2Cthis._bearingSnap%3De.bearingSnap%2C%22string%22%3D%3Dtypeof%20e.container)%7Bif(this._container%3Dwindow.document.getElementById(e.container)%2C!this._container)throw%20new%20Error(%22Container%20'%22%2Be.container%2B%22'%20not%20found.%22)%7Delse%20this._container%3De.container%3Bthis.animationLoop%3Dnew%20AnimationLoop%2Ce.maxBounds%26%26this.setMaxBounds(e.maxBounds)%2Cutil.bindAll(%5B%22_onWindowOnline%22%2C%22_onWindowResize%22%2C%22_contextLost%22%2C%22_contextRestored%22%2C%22_update%22%2C%22_render%22%2C%22_onData%22%2C%22_onDataLoading%22%5D%2Cthis)%2Cthis._setupContainer()%2Cthis._setupPainter()%2Cthis.on(%22move%22%2Cthis._update.bind(this%2C!1))%2Cthis.on(%22zoom%22%2Cthis._update.bind(this%2C!0))%2Cthis.on(%22moveend%22%2Cfunction()%7Bi.animationLoop.set(300)%2Ci._rerender()%7D)%2C%22undefined%22!%3Dtypeof%20window%26%26(window.addEventListener(%22online%22%2Cthis._onWindowOnline%2C!1)%2Cwindow.addEventListener(%22resize%22%2Cthis._onWindowResize%2C!1))%2CbindHandlers(this%2Ce)%2Cthis._hash%3De.hash%26%26(new%20Hash).addTo(this)%2Cthis._hash%26%26this._hash._onHashChange()%7C%7Cthis.jumpTo(%7Bcenter%3Ae.center%2Czoom%3Ae.zoom%2Cbearing%3Ae.bearing%2Cpitch%3Ae.pitch%7D)%2Cthis._classes%3D%5B%5D%2Cthis.resize()%2Ce.classes%26%26this.setClasses(e.classes)%2Ce.style%26%26this.setStyle(e.style)%2Ce.attributionControl%26%26this.addControl(new%20AttributionControl)%2Cthis.on(%22style.load%22%2Cfunction()%7Bthis.transform.unmodified%26%26this.jumpTo(this.style.stylesheet)%2Cthis.style.update(this._classes%2C%7Btransition%3A!1%7D)%7D)%2Cthis.on(%22data%22%2Cthis._onData)%2Cthis.on(%22dataloading%22%2Cthis._onDataLoading)%7D%20due%20to%3A%0AError%3A%20%5B%24injector%3Astrictdi%5D%20e%20is%20not%20using%20explicit%20annotation%20and%20cannot%20be%20invoked%20in%20strict%20mode%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fstrictdi%3Fp0%3De%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20Function.annotate%20%5Bas%20%24%24annotate%5D%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14169%3A18)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14896%3A37)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14931%3A19)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14838%3A46%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fmodulerr%3Fp0%3Dfunction%2520e(e)%257Bvar%2520i%253Dthis%253Be%253Dutil.extend(%257B%257D%252CdefaultOptions%252Ce)%253Bvar%2520o%253Dnew%2520Transform(e.minZoom%252Ce.maxZoom%252Ce.renderWorldCopies)%253Bif(t.call(this%252Co%252Ce)%252Cthis._interactive%253De.interactive%252Cthis._failIfMajorPerformanceCaveat%253De.failIfMajorPerformanceCaveat%252Cthis._preserveDrawingBuffer%253De.preserveDrawingBuffer%252Cthis._trackResize%253De.trackResize%252Cthis._bearingSnap%253De.bearingSnap%252C%2522string%2522%253D%253Dtypeof%2520e.container)%257Bif(this._container%253Dwindow.document.getElementById(e.container)%252C!this._container)throw%2520new%2520Error(%2522Container%2520'%2522%252Be.container%252B%2522'%2520not%2520found.%2522)%257Delse%2520this._container%253De.container%253Bthis.animationLoop%253Dnew%2520AnimationLoop%252Ce.maxBounds%2526%2526this.setMaxBounds(e.maxBounds)%252Cutil.bindAll(%255B%2522_onWindowOnline%2522%252C%2522_onWindowResize%2522%252C%2522_contextLost%2522%252C%2522_contextRestored%2522%252C%2522_update%2522%252C%2522_render%2522%252C%2522_onData%2522%252C%2522_onDataLoading%2522%255D%252Cthis)%252Cthis._setupContainer()%252Cthis._setupPainter()%252Cthis.on(%2522move%2522%252Cthis._update.bind(this%252C!1))%252Cthis.on(%2522zoom%2522%252Cthis._update.bind(this%252C!0))%252Cthis.on(%2522moveend%2522%252Cfunction()%257Bi.animationLoop.set(300)%252Ci._rerender()%257D)%252C%2522undefined%2522!%253Dtypeof%2520window%2526%2526(window.addEventListener(%2522online%2522%252Cthis._onWindowOnline%252C!1)%252Cwindow.addEventListener(%2522resize%2522%252Cthis._onWindowResize%252C!1))%252CbindHandlers(this%252Ce)%252Cthis._hash%253De.hash%2526%2526(new%2520Hash).addTo(this)%252Cthis._hash%2526%2526this._hash._onHashChange()%257C%257Cthis.jumpTo(%257Bcenter%253Ae.center%252Czoom%253Ae.zoom%252Cbearing%253Ae.bearing%252Cpitch%253Ae.pitch%257D)%252Cthis._classes%253D%255B%255D%252Cthis.resize()%252Ce.classes%2526%2526this.setClasses(e.classes)%252Ce.style%2526%2526this.setStyle(e.style)%252Ce.attributionControl%2526%2526this.addControl(new%2520AttributionControl)%252Cthis.on(%2522style.load%2522%252Cfunction()%257Bthis.transform.unmodified%2526%2526this.jumpTo(this.style.stylesheet)%252Cthis.style.update(this._classes%252C%257Btransition%253A!1%257D)%257D)%252Cthis.on(%2522data%2522%252Cthis._onData)%252Cthis.on(%2522dataloading%2522%252Cthis._onDataLoading)%257D%26p1%3DError%253A%2520%255B%2524injector%253Astrictdi%255D%2520e%2520is%2520not%2520using%2520explicit%2520annotation%2520and%2520cannot%2520be%2520invoked%2520in%2520strict%2520mode%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.6.2%252F%2524injector%252Fstrictdi%253Fp0%253De%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10145%253A13%250A%2520%2520%2520%2520at%2520Function.annotate%2520%255Bas%2520%2524%2524annotate%255D%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14169%253A18)%250A%2520%2520%2520%2520at%2520injectionArgs%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14896%253A37)%250A%2520%2520%2520%2520at%2520Object.invoke%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14931%253A19)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14838%253A46%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10434%253A21)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14817%253A6)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14834%253A41%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10434%253A21)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14817%253A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14856%3A16%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14739%3A20)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A11919%3A21)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A11940%3A13)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10145:13
    at Function.annotate [as $$annotate] (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14169:18)
    at injectionArgs (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14896:37)
    at Object.invoke (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14931:19)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14838:46
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14834:41
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
http://errors.angularjs.org/1.6.2/$injector/modulerr?p0=function%20e(e)%7Bvar%20i%3Dthis%3Be%3Dutil.extend(%7B%7D%2CdefaultOptions%2Ce)%3Bvar%20o%3Dnew%20Transform(e.minZoom%2Ce.maxZoom%2Ce.renderWorldCopies)%3Bif(t.call(this%2Co%2Ce)%2Cthis._interactive%3De.interactive%2Cthis._failIfMajorPerformanceCaveat%3De.failIfMajorPerformanceCaveat%2Cthis._preserveDrawingBuffer%3De.preserveDrawingBuffer%2Cthis._trackResize%3De.trackResize%2Cthis._bearingSnap%3De.bearingSnap%2C%22string%22%3D%3Dtypeof%20e.container)%7Bif(this._container%3Dwindow.document.getElementById(e.container)%2C!this._container)throw%20new%20Error(%22Container%20'%22%2Be.container%2B%22'%20not%20found.%22)%7Delse%20this._container%3De.container%3Bthis.animationLoop%3Dnew%20AnimationLoop%2Ce.maxBounds%26%26this.setMaxBounds(e.maxBounds)%2Cutil.bindAll(%5B%22_onWindowOnline%22%2C%22_onWindowResize%22%2C%22_contextLost%22%2C%22_contextRestored%22%2C%22_update%22%2C%22_render%22%2C%22_onData%22%2C%22_onDataLoading%22%5D%2Cthis)%2Cthis._setupContainer()%2Cthis._setupPainter()%2Cthis.on(%22move%22%2Cthis._update.bind(this%2C!1))%2Cthis.on(%22zoom%22%2Cthis._update.bind(this%2C!0))%2Cthis.on(%22moveend%22%2Cfunction()%7Bi.animationLoop.set(300)%2Ci._rerender()%7D)%2C%22undefined%22!%3Dtypeof%20window%26%26(window.addEventListener(%22online%22%2Cthis._onWindowOnline%2C!1)%2Cwindow.addEventListener(%22resize%22%2Cthis._onWindowResize%2C!1))%2CbindHandlers(this%2Ce)%2Cthis._hash%3De.hash%26%26(new%20Hash).addTo(this)%2Cthis._hash%26%26this._hash._onHashChange()%7C%7Cthis.jumpTo(%7Bcenter%3Ae.center%2Czoom%3Ae.zoom%2Cbearing%3Ae.bearing%2Cpitch%3Ae.pitch%7D)%2Cthis._classes%3D%5B%5D%2Cthis.resize()%2Ce.classes%26%26this.setClasses(e.classes)%2Ce.style%26%26this.setStyle(e.style)%2Ce.attributionControl%26%26this.addControl(new%20AttributionControl)%2Cthis.on(%22style.load%22%2Cfunction()%7Bthis.transform.unmodified%26%26this.jumpTo(this.style.stylesheet)%2Cthis.style.update(this._classes%2C%7Btransition%3A!1%7D)%7D)%2Cthis.on(%22data%22%2Cthis._onData)%2Cthis.on(%22dataloading%22%2Cthis._onDataLoading)%7D&p1=Error%3A%20%5B%24injector%3Astrictdi%5D%20e%20is%20not%20using%20explicit%20annotation%20and%20cannot%20be%20invoked%20in%20strict%20mode%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fstrictdi%3Fp0%3De%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20Function.annotate%20%5Bas%20%24%24annotate%5D%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14169%3A18)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14896%3A37)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14931%3A19)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14838%3A46%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10145:13
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14856:16
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14834:41
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at createInjector (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14739:20)
    at doBootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11919:21)
    at bootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11940:13)
http://errors.angularjs.org/1.6.2/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20function%20e(e)%7Bvar%20i%3Dthis%3Be%3Dutil.extend(%7B%7D%2CdefaultOptions%2Ce)%3Bvar%20o%3Dnew%20Transform(e.minZoom%2Ce.maxZoom%2Ce.renderWorldCopies)%3Bif(t.call(this%2Co%2Ce)%2Cthis._interactive%3De.interactive%2Cthis._failIfMajorPerformanceCaveat%3De.failIfMajorPerformanceCaveat%2Cthis._preserveDrawingBuffer%3De.preserveDrawingBuffer%2Cthis._trackResize%3De.trackResize%2Cthis._bearingSnap%3De.bearingSnap%2C%22string%22%3D%3Dtypeof%20e.container)%7Bif(this._container%3Dwindow.document.getElementById(e.container)%2C!this._container)throw%20new%20Error(%22Container%20'%22%2Be.container%2B%22'%20not%20found.%22)%7Delse%20this._container%3De.container%3Bthis.animationLoop%3Dnew%20AnimationLoop%2Ce.maxBounds%26%26this.setMaxBounds(e.maxBounds)%2Cutil.bindAll(%5B%22_onWindowOnline%22%2C%22_onWindowResize%22%2C%22_contextLost%22%2C%22_contextRestored%22%2C%22_update%22%2C%22_render%22%2C%22_onData%22%2C%22_onDataLoading%22%5D%2Cthis)%2Cthis._setupContainer()%2Cthis._setupPainter()%2Cthis.on(%22move%22%2Cthis._update.bind(this%2C!1))%2Cthis.on(%22zoom%22%2Cthis._update.bind(this%2C!0))%2Cthis.on(%22moveend%22%2Cfunction()%7Bi.animationLoop.set(300)%2Ci._rerender()%7D)%2C%22undefined%22!%3Dtypeof%20window%26%26(window.addEventListener(%22online%22%2Cthis._onWindowOnline%2C!1)%2Cwindow.addEventListener(%22resize%22%2Cthis._onWindowResize%2C!1))%2CbindHandlers(this%2Ce)%2Cthis._hash%3De.hash%26%26(new%20Hash).addTo(this)%2Cthis._hash%26%26this._hash._onHashChange()%7C%7Cthis.jumpTo(%7Bcenter%3Ae.center%2Czoom%3Ae.zoom%2Cbearing%3Ae.bearing%2Cpitch%3Ae.pitch%7D)%2Cthis._classes%3D%5B%5D%2Cthis.resize()%2Ce.classes%26%26this.setClasses(e.classes)%2Ce.style%26%26this.setStyle(e.style)%2Ce.attributionControl%26%26this.addControl(new%20AttributionControl)%2Cthis.on(%22style.load%22%2Cfunction()%7Bthis.transform.unmodified%26%26this.jumpTo(this.style.stylesheet)%2Cthis.style.update(this._classes%2C%7Btransition%3A!1%7D)%7D)%2Cthis.on(%22data%22%2Cthis._onData)%2Cthis.on(%22dataloading%22%2Cthis._onDataLoading)%7D%20due%20to%3A%0AError%3A%20%5B%24injector%3Astrictdi%5D%20e%20is%20not%20using%20explicit%20annotation%20and%20cannot%20be%20invoked%20in%20strict%20mode%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fstrictdi%3Fp0%3De%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20Function.annotate%20%5Bas%20%24%24annotate%5D%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14169%3A18)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14896%3A37)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14931%3A19)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14838%3A46%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.2%2F%24injector%2Fmodulerr%3Fp0%3Dfunction%2520e(e)%257Bvar%2520i%253Dthis%253Be%253Dutil.extend(%257B%257D%252CdefaultOptions%252Ce)%253Bvar%2520o%253Dnew%2520Transform(e.minZoom%252Ce.maxZoom%252Ce.renderWorldCopies)%253Bif(t.call(this%252Co%252Ce)%252Cthis._interactive%253De.interactive%252Cthis._failIfMajorPerformanceCaveat%253De.failIfMajorPerformanceCaveat%252Cthis._preserveDrawingBuffer%253De.preserveDrawingBuffer%252Cthis._trackResize%253De.trackResize%252Cthis._bearingSnap%253De.bearingSnap%252C%2522string%2522%253D%253Dtypeof%2520e.container)%257Bif(this._container%253Dwindow.document.getElementById(e.container)%252C!this._container)throw%2520new%2520Error(%2522Container%2520'%2522%252Be.container%252B%2522'%2520not%2520found.%2522)%257Delse%2520this._container%253De.container%253Bthis.animationLoop%253Dnew%2520AnimationLoop%252Ce.maxBounds%2526%2526this.setMaxBounds(e.maxBounds)%252Cutil.bindAll(%255B%2522_onWindowOnline%2522%252C%2522_onWindowResize%2522%252C%2522_contextLost%2522%252C%2522_contextRestored%2522%252C%2522_update%2522%252C%2522_render%2522%252C%2522_onData%2522%252C%2522_onDataLoading%2522%255D%252Cthis)%252Cthis._setupContainer()%252Cthis._setupPainter()%252Cthis.on(%2522move%2522%252Cthis._update.bind(this%252C!1))%252Cthis.on(%2522zoom%2522%252Cthis._update.bind(this%252C!0))%252Cthis.on(%2522moveend%2522%252Cfunction()%257Bi.animationLoop.set(300)%252Ci._rerender()%257D)%252C%2522undefined%2522!%253Dtypeof%2520window%2526%2526(window.addEventListener(%2522online%2522%252Cthis._onWindowOnline%252C!1)%252Cwindow.addEventListener(%2522resize%2522%252Cthis._onWindowResize%252C!1))%252CbindHandlers(this%252Ce)%252Cthis._hash%253De.hash%2526%2526(new%2520Hash).addTo(this)%252Cthis._hash%2526%2526this._hash._onHashChange()%257C%257Cthis.jumpTo(%257Bcenter%253Ae.center%252Czoom%253Ae.zoom%252Cbearing%253Ae.bearing%252Cpitch%253Ae.pitch%257D)%252Cthis._classes%253D%255B%255D%252Cthis.resize()%252Ce.classes%2526%2526this.setClasses(e.classes)%252Ce.style%2526%2526this.setStyle(e.style)%252Ce.attributionControl%2526%2526this.addControl(new%2520AttributionControl)%252Cthis.on(%2522style.load%2522%252Cfunction()%257Bthis.transform.unmodified%2526%2526this.jumpTo(this.style.stylesheet)%252Cthis.style.update(this._classes%252C%257Btransition%253A!1%257D)%257D)%252Cthis.on(%2522data%2522%252Cthis._onData)%252Cthis.on(%2522dataloading%2522%252Cthis._onDataLoading)%257D%26p1%3DError%253A%2520%255B%2524injector%253Astrictdi%255D%2520e%2520is%2520not%2520using%2520explicit%2520annotation%2520and%2520cannot%2520be%2520invoked%2520in%2520strict%2520mode%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.6.2%252F%2524injector%252Fstrictdi%253Fp0%253De%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10145%253A13%250A%2520%2520%2520%2520at%2520Function.annotate%2520%255Bas%2520%2524%2524annotate%255D%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14169%253A18)%250A%2520%2520%2520%2520at%2520injectionArgs%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14896%253A37)%250A%2520%2520%2520%2520at%2520Object.invoke%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14931%253A19)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14838%253A46%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10434%253A21)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14817%253A6)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14834%253A41%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A10434%253A21)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Flocalhost%253A3000%252Fvendor.bundle.js%253F0cc6a9fc455f74e67983%253A14817%253A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10145%3A13%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14856%3A16%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14834%3A41%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A10434%3A21)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14817%3A6)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A14739%3A20)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A11919%3A21)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Flocalhost%3A3000%2Fvendor.bundle.js%3F0cc6a9fc455f74e67983%3A11940%3A13)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10145:13
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14856:16
    at forEach (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:10434:21)
    at loadModules (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14817:6)
    at createInjector (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:14739:20)
    at doBootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11919:21)
    at bootstrap (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11940:13)
    at angularInit (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:11825:6)
    at https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:43206:6
    at HTMLDocument.trigger (https://localhost:3000/vendor.bundle.js?0cc6a9fc455f74e67983:13395:6)

@BernhardRode
Copy link

Hi @aulneau ,

have you been able to solve this problem already?

I'm running into the same issue here.

@aulneau
Copy link
Author

aulneau commented Mar 9, 2017

@BernhardRode Unfortunately I have not been able to fix it!

@BernhardRode
Copy link

I managed to get it working correctly by changing the package.json of mapbox-gl-js inside of my node_modules folder.

From
"main": "src/index.js",
to
"main": "dist/mapbox-gl.js",

Now
import { Map } from 'mapbox-gl';
is working in my angular-cli project like a charm.

I really hope the my patch will be accepted:
#4391

@lucaswoj
Copy link
Contributor

Our official recommendation is to use import mapboxgl from 'mapbox-gl/dist/mapbox-gl'; (per the module bundler tab within the Getting Started section). That said, we may be able to accept your PR #4391. Discussion is happening there 😄

@BernhardRode
Copy link

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

is not working in my setup.. hopefully #4391 is going to be merged and the next release will make it work out of the box.

@mollymerp
Copy link
Contributor

mollymerp commented Mar 21, 2017

This shipped in #4423 but broke browserify. follow up at #4462

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants