--- a/src/app/components/about/about.routing.js	Thu Sep 07 13:56:19 2017 -0400
+++ b/src/app/components/about/about.routing.js	Thu Sep 07 13:59:42 2017 -0400
@@ -32,7 +32,7 @@
     url: '/about',
     component: 'about',
     resolve: {
-      loadAbout: ($q, $ocLazyLoad) => {
+      lazyLoad: ($q, $ocLazyLoad) => {
         'ngInject';
         return $q(resolve => {
           require.ensure(['./about.component.js'], () => {

--- a/src/app/components/about/about.routing.spec.js	Thu Sep 07 13:56:19 2017 -0400
+++ b/src/app/components/about/about.routing.spec.js	Thu Sep 07 13:59:42 2017 -0400
@@ -31,15 +31,11 @@
 
   let stateProvider, args, q, ocLazyLoad;
   beforeEach(() => {
-    stateProvider = {
-      state: sinon.spy()
-    };
+    stateProvider = { state: sinon.spy() };
     module.config(stateProvider);
     args = stateProvider.state.args[0];
     q = sinon.spy();
-    ocLazyLoad = {
-      load: sinon.spy()
-    };
+    ocLazyLoad = { load: sinon.spy() };
   });
 
   describe('stateProvider', () => {
@@ -56,7 +52,7 @@
     });
 
     it('resolve should load about component', done => {
-      let resolveFn = args[1].resolve.loadAbout[2];
+      let resolveFn = args[1].resolve.lazyLoad[2];
       resolveFn.should.be.a.Function();
       resolveFn(q, ocLazyLoad);
       q.should.be.calledOnce();

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/components/landing/landing.component.js	Thu Sep 07 13:59:42 2017 -0400
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+export default angular
+  .module('landingComponent', [])
+  .component('landing', {
+    template: require('./landing.html')
+  })
+  .name;

--- a/src/app/components/landing/landing.routing.js	Thu Sep 07 13:56:19 2017 -0400
+++ b/src/app/components/landing/landing.routing.js	Thu Sep 07 13:59:42 2017 -0400
@@ -25,28 +25,33 @@
  * exception statement from your version.
  */
 
-function landingRouting ($stateProvider) {
+function config ($stateProvider) {
   'ngInject';
 
   $stateProvider.state('landing', {
     url: '/landing',
-    templateProvider: $q => {
-      'ngInject';
-      return $q(resolve =>
-        require.ensure(['./landing.html'], () => {
-          resolve(require('./landing.html'));
-        })
-      );
+    component: 'landing',
+    resolve: {
+      lazyLoad: ($q, $ocLazyLoad) => {
+        'ngInject';
+        return $q(resolve => {
+          require.ensure(['./landing.component.js'], () => {
+            let module = require('./landing.component.js');
+            $ocLazyLoad.load({ name: module.default });
+            resolve(module);
+          });
+        });
+      }
     }
   });
 }
 
-export { landingRouting };
+export { config };
 
 export default angular
   .module('landing.routing', [
     'ui.router',
     'ui.bootstrap'
   ])
-  .config(landingRouting)
+  .config(config)
   .name;

--- a/src/app/components/landing/landing.routing.spec.js	Thu Sep 07 13:56:19 2017 -0400
+++ b/src/app/components/landing/landing.routing.spec.js	Thu Sep 07 13:59:42 2017 -0400
@@ -29,14 +29,15 @@
 
   let module = require('./landing.routing.js');
 
-  let stateProvider, args, q;
+  let stateProvider, args, q, ocLazyLoad;
   beforeEach(() => {
     stateProvider = {
       state: sinon.spy()
     };
-    module.landingRouting(stateProvider);
+    module.config(stateProvider);
     args = stateProvider.state.args[0];
     q = sinon.spy();
+    ocLazyLoad = { load: sinon.spy() };
   });
 
   describe('stateProvider', () => {
@@ -53,17 +54,18 @@
       args[1].url.should.equal('/landing');
     });
 
-    it('template provider should return landing.html', done => {
-      let providerFn = args[1].templateProvider[1];
-      providerFn.should.be.a.Function();
-      providerFn(q);
+    it('resolve should load landing component', done => {
+      let resolveFn = stateProvider.state.args[0][1].resolve.lazyLoad[2];
+      resolveFn.should.be.a.Function();
+      resolveFn(q, ocLazyLoad);
       q.should.be.calledOnce();
 
       let deferred = q.args[0][0];
       deferred.should.be.a.Function();
 
       let resolve = sinon.stub().callsFake(val => {
-        val.should.equal(require('./landing.html'));
+        ocLazyLoad.load.should.be.calledWith({ name: require('./landing.component.js').default});
+        val.should.equal(require('./landing.component.js'));
         done();
       });
       deferred(resolve);