Importing with ES6/Webpack producing error: "WARNING: Tried to load angular more than once."

[typhoon2099]

I am using the exact versions of the following:

• Browser: Firefox Version: 59.0b5 (64-bit)
• AngularJS: 1.6.8
• Angular Bootstrap: 2.5.6
• Angular UI Tour: 0.9.2

I have installed this library via: NPM

I have observed the following behavior:

I have set up my AngularJS application to use Webpack and ES6 to import modules. angular-ui-tour is imported using the following line:

import uiTour from 'angular-ui-tour/app/angular-ui-tour';

When I load my application I receive the following error:

WARNING: Tried to load angular more than once.

This is how I expected it to behave:

For this not to happen.

Here is my tour config, and all related step configs:

Additional notes/code:

Tour hasn't been implemented yet.

[typhoon2099]

Could this be solved by requiring Angular as a peer dependency? It would also be nice to be able to import the module in via Webpack from source rather than the compiled bundle, but I ran into issues with hardcoded template URLs (the ability to add templates via strings would be incredibly useful in this regard).

[benmarch]

@typhoon2099, I will make Angular a peer dependency in the 1.0.0 release, but I'm not sure how to go about importing the templates without making assumptions about the build config. If you want to pull it in from source, you can start with copying parts of the Webpack config from here to mimic the HTML import behavior.

Do you know of a way to import HTML without specific Webpack config?

[typhoon2099]

I'm afraid I don't. I've been using html-loader in my projects which loads the file in as a string. Using that you can update the imports to something like:

import stepPopupHTML from './templates/tour-step-popup.html';
import stepTemplateHTML from './templates/tour-step-template.html';

and then you can use them through variables. I think that doing this might make it easier to import your module from the source rather that the bundled file as html-loader seems to be a more popular and generic solution for adding HTML (plus it's maintained by Webpack authors). It would also make it a bit easier to override the default template options as then all you'd have to supply is the HTML as a string.

If I have a moment today I'll set it up and make a pull request.

[benmarch]

So the stepPopupHTML and stepTemplateHTML would be passed in as the directive's template option? If this is the case, how can people override the templates?

[typhoon2099]

You should be able to check for the option in the configuration and choose to use it instead of those variables, much like it's doing already, though you may need to replace ng-include in tour-step-popup.html with bind-html-compile.

[typhoon2099]

I've created a pull request (#176), have a look and see what you think. It may need to be modified or more tests added to confirm that everything works as expected but it's passing all current tests at the moment.