Including a large project as a dependency with Webpack

Question

My particular question is with Foundation for Apps. Webpack has been great so far if I'm working with CommonJS code or within the context of the application that I'm writing, but I'm struggling to bring in Foundation for Apps, which contains its own HTML templates, SVG icons, JavaScript, and SCSS.

I've included FfA's JavaScript by requiring the concatenated source (which isn't ideal but it works). I can also include SCSS in a more clean way since Webpack's sass loader seems to know what to do with @import statements.

The key problems arise when FfA's source (Angular) requests HTML from a path that doesn't exist post-Webpack.

For example, a request will be made to get /components/modal/modal.html but the only thing in my public directory is bundle.js. How can I load all of the HTML templates and replace any occurrences of templateUrl paths in FfA's source with require statements that resolve to the path of the loaded HTML? Am I going down the right path or is there a better approach?

Answer 1

F4A is using the built-in Front Router plugin which simplifies the creation of routes in AngularJS by allowing you to define them directly in your view templates. As shown here it is meant to be used in the most basic sense and for rapid prototyping. For example, even if it implements Angular's UI-Router and its states, you can't use their resolve property.

I'm not familiar with Webpack and at which level it generates the required templates but if you can't generate them as Front Router's expected markdowns before being generated by gulp, then you may disable the plugin and implement your custom $stateProvider instance by leaving F4A out of it and solve it within AngularJs :

.state('yourstate', {
    url: '/yoururl',
    templateUrl: 'templates/yourTemplate.html',
    //
    // or maybe something like :
    //    -- this is guessing. i'm not familiar with webpack :) --
    //
    // templateUrl: function (wabpack) {
    //     return '/partials/' +  wabpack.path + '.html';
    // }
    //
    controller: 'YourController',
    resolve: {
        // you may also use resolve here for extra logic before
        // loading your template
    }

About how to disable F4A Front Rooter and how to implement your own $stateProvider instance you may check this :

Foundation for Apps : How to replace the default Dynamic Routing plugin?