If you are creating your own app.js and not using the provided bundled one, the source will need to be compiled using webpack.

Before building [create an isolated bootstrap css file](Bootstrap-isolation) to not polute the container application with boostrap styles. Execute the following comand in terminal:

`node node_modules/hslayers-ng/scripts/bootstrap-isolate.js`


Example webpack configuration files are provided at https://github.com/hslayers/examples/tree/webpack/full :

```
import 'toolbar.module';
import 'print.module';
import 'query.module';
import 'search.module';
import 'measure.module';
import 'permalink.module';
import 'info.module';
import 'datasource-selector.module';
import 'sidebar.module';
import 'add-layers.module';
import { Tile, Group } from 'ol/layer';
import { TileWMS, WMTS, OSM, XYZ } from 'ol/source';
import {ImageWMS, ImageArcGISRest} from 'ol/source';
import View from 'ol/View';
import {transform, transformExtent} from 'ol/proj';

var module = angular.module('hs', [
    'hs.layermanager',
    'hs.query',
    'hs.print',
    ...
    //**  List of Hslayers components
]);

/* Here goes code to modify the UI for extra functionality */
module.directive(
    'hs', [
        'config', 'Core',
        function(config, Core) {
            return {
                /* A different layout of the application can be achieved by changing the main template*/
                template: Core.hslayersNgTemplate,
                link: function(scope, element) {
                    Core.fullScreenMap(element);
                }
            };
        }
    ]);

/* Here goes configuration of layers, viewport and HsLayers components */
module.value('config', {
    /* Here goes layer definitions which can be ordinary OL layers with extra parameters which are interpreted by HsLayers or some special layer types which are unique to HsLayers */
    default_layers: [
        new Tile({
            source: new OSM(),
            title: "Base layer",
            base: true,
            path: 'Roads/Additional Cycling routes'
        })
    ],
    default_view: new View({
        center: transform([6.1319, 49.6116], 'EPSG:4326', 'EPSG:3857'), //Latitude longitude    to Spherical Mercator
        zoom: 13,
        units: "m"
    })
});

/* The main code which does extra things apart from HsLayers components is located in the controller function below*/
module.controller('Main', ['$scope', 'Core', '$compile', 'hs.map.service',
    /* The order of function parameters must match the array of component names above */
    function($scope, Core, $compile, hsmap) {
        /* Core component is responsible for bootstrapping the application and managing top level interface such as panels and toolbar */
        $scope.Core = Core;

        /* We can listen to event emited by components such as layer manager and hide a layer which was added by code or by user for example*/
        $scope.$on('layermanager.updated', function(data, layer) {
            if (layer.get('base') != true && layer.get('always_visible') != true) {
                layer.setVisible(true);
            }
        });

        /* To hide certain panels even if they are loaded as a dependency to other component use panelEnabled function */
        Core.panelEnabled('compositions', false);
        Core.panelEnabled('permalink', false);

    }
]);

```

To build execute in terminal:

`webpack --config webpack.dev.js --progress`