feat(loader): Add support for dynamic import (#90)

brandonroberts · Nov 14, 2017 · a9835ab · a9835ab
1 parent 0444b6e
commit a9835ab
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 16 deletions.
diff --git a/docs/options.md b/docs/options.md
@@ -37,17 +37,27 @@ replacement
 }
 ```
 
-If you prefer to use `System.import`, set the `loader` to `system`
+To use `System.import`, set the `loader` to `system`
 
 **NOTE:** Using `system` only works with Webpack 2. Webpack 1 users should use the default.
 
 replacement
 ```ts
 {
   path: 'lazy',
-  loadChildren: () => System.import('./lazy/lazy.module').then(function(module) {
-    return module['LazyModule'];
-  })
+  loadChildren: () => System.import('./lazy/lazy.module').then(module => module['LazyModule'])
+}
+```
+
+To use `dynamic import`, set the `loader` to `import`
+
+**NOTE:** Using `import` only works with Webpack >= 2.1.0.
+
+replacement
+```ts
+{
+  path: 'lazy',
+  loadChildren: () => import('./lazy/lazy.module').then(module => module['LazyModule'])
 }
 ```
 

diff --git a/spec/index.spec.js b/spec/index.spec.js
@@ -162,9 +162,7 @@ describe('Loader', function() {
   it ('should return a loadChildren System.import statement', function() {
     var result = [
       'loadChildren: () => System.import(\'./path/to/file.module\')',
-      '  .then(function(module) {',
-      '    return module[\'FileModule\'];',
-      '  })'
+      '  .then(module => module[\'FileModule\'])'
     ];
 
     var loadedString = loader.call({
@@ -175,6 +173,20 @@ describe('Loader', function() {
     checkResult(loadedString, result);
   });
 
+  it ('should return a loadChildren dynamic import statement', function() {
+    var result = [
+      'loadChildren: () => import(\'./path/to/file.module\')',
+      '  .then(module => module[\'FileModule\'])'
+    ];
+
+    var loadedString = loader.call({
+      resourcePath: resourcePath,
+      query: '?loader=import'
+    }, `loadChildren: '${modulePath}'`);
+
+    checkResult(loadedString, result);
+  });
+
   it('should return a loadChildren async require statement with default', function() {
     var modulePath = './path/to/file.module';
 
@@ -290,9 +302,7 @@ describe('Loader', function() {
     it ('should return a loadChildren System.import statement', function() {
       var result = [
         'loadChildren: () => System.import(\'./path/to/file.module.ngfactory\')',
-        '  .then(function(module) {',
-        '    return module[\'FileModuleNgFactory\'];',
-        '  })'
+        '  .then(module => module[\'FileModuleNgFactory\'])'
       ];
 
       var loadedString = loader.call({
@@ -303,6 +313,20 @@ describe('Loader', function() {
       checkResult(loadedString, result);
     });
 
+    it ('should return a loadChildren dynamic import statement', function() {
+      var result = [
+        'loadChildren: () => import(\'./path/to/file.module.ngfactory\')',
+        '  .then(module => module[\'FileModuleNgFactory\'])'
+      ];
+
+      var loadedString = loader.call({
+        resourcePath: resourcePath,
+        query: query + '&loader=import'
+      }, `loadChildren: '${modulePath}'`);
+
+      checkResult(loadedString, result);
+    });
+
     it('should support a custom moduleSuffix', function() {
       var moduleSuffix = '.ngfile';
 

diff --git a/spec/utils.spec.js b/spec/utils.spec.js
@@ -71,15 +71,26 @@ describe('Utils', function() {
     it('should return an asynchronous System.import loadChildren statement', function() {
       var result = [
         'loadChildren: () => System.import(\'' + path + '\')',
-        '  .then(function(module) {',
-        '    return module[\'' + name + '\'];',
-        '  })'
+        '  .then(module => module[\'' + name + '\'])'
       ];
 
       getSystemLoader('path', 'name', true).should.eql(result.join(''));
     });
   });
 
+  describe('getImportLoader', function() {
+    var getImportLoader = utils.getImportLoader;
+
+    it('should return an asynchronous dynamic import loadChildren statement', function() {
+      var result = [
+        'loadChildren: () => import(\'' + path + '\')',
+        '  .then(module => module[\'' + name + '\'])'
+      ];
+
+      getImportLoader('path', 'name', true).should.eql(result.join(''));
+    });
+  });
+
   describe('normalizeFilePath', function() {
     var pmock = require('pmock');
     var normalizeFilePath = utils.normalizeFilePath;

diff --git a/src/index.js b/src/index.js
@@ -90,6 +90,8 @@ module.exports = function(source, sourcemap) {
       replacement = utils.getSyncLoader(filePath, moduleName, inline);
     } else if (loader === 'system') {
       replacement = utils.getSystemLoader(filePath, moduleName, inline);
+    } else if (loader === 'import') {
+      replacement = utils.getImportLoader(filePath, moduleName, inline);
     } else {
       replacement = utils.getRequireLoader(filePath, chunkName, moduleName, inline, isJs);
     }

diff --git a/src/utils.js b/src/utils.js
@@ -35,9 +35,16 @@ module.exports.getRequireLoader = function(filePath, chunkName, moduleName, inli
 module.exports.getSystemLoader = function(filePath, moduleName, inline) {
   var result = [
     'loadChildren: () => System.import(\'' + filePath + '\')',
-    '  .then(function(module) {',
-    '    return module[\'' + moduleName + '\'];',
-    '  })'
+    '  .then(module => module[\'' + moduleName + '\'])'
+  ];
+
+  return inline ? result.join('') : result.join('\n');
+};
+
+module.exports.getImportLoader = function(filePath, moduleName, inline) {
+  var result = [
+    'loadChildren: () => import(\'' + filePath + '\')',
+    '  .then(module => module[\'' + moduleName + '\'])'
   ];
 
   return inline ? result.join('') : result.join('\n');