Lazy loading with angularjs, ui-router, webpack and typescript

README.md

Lazy loading with angularjs, ui-router, webpack and typescript

Inspired by https://medium.com/@var_bin/angularjs-webpack-lazyload-bb7977f390dd but using wepback import() function

Working with:

• @uirouter/angularjs: 1.0.22
• @uirouter/core: 5.0.23
• angular: 1.4.9
• webpack: 4.39.1
• webpack-cli: 3.3.6

See also:

• https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1statedeclaration.html#lazyload
• https://webpack.js.org/api/module-methods/#import-1
• https://mariusschulz.com/blog/code-splitting-a-typescript-application-with-import-and-webpack

demo.module.ts

import * as angular from 'angular';

export default angular
  .module('demo', [
  ])

  .config([
    '$stateProvider',
    function($stateProvider) {
      $stateProvider
        .state('demo.**', {
          url: '/demo',
          lazyLoad: () => import(/* webpackChunkName: "demo" */ './demo.states').then(({ default: lazyLoadResults }) => lazyLoadResults),
        })
      ;
    },
  ])
  .name
;

demo.states.ts

export default {
  states: [
    {
      name: 'my-page',
      url: '/demo/my-page',
      templateUrl: 'demo/my-page.html',
      controller: () => {
        //something in it
      },
    },
  ],
};

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "module": "esnext",
        "importHelpers": true
    }
}