feat(loader): Add support for chunk name to system && import loaders (#…

…93)

docs/options.md

@@ -151,7 +151,7 @@ replacement
 
 ## Lazy Loading Options
 
-### chunkName (require loader only)
+### chunkName
 
 Allows you to provide [named chunks](http://webpack.github.io/docs/code-splitting.html#named-chunks) for code splitting.
 
@@ -163,7 +163,7 @@ original
 }
 ```
 
-replacement
+replacement (require loader)
 ```ts
 {
   path: 'lazy',
@@ -174,3 +174,19 @@ replacement
   })
 }
 ```
+
+replacement (system loader)
+```ts
+{
+  path: 'lazy',
+  loadChildren: () => System.import(/* webpackChunkName: "MyChunk" */ './lazy/lazy.module').then(module => module['LazyModule'])
+}
+```
+
+replacement (import loader)
+```ts
+{
+  path: 'lazy',
+  loadChildren: () => import(/* webpackChunkName: "MyChunk" */ './lazy/lazy.module').then(module => module['LazyModule'])
+}
+```

spec/index.spec.js

@@ -173,6 +173,20 @@ describe('Loader', function() {
     checkResult(loadedString, result);
   });
 
+  it ('should return a loadChildren chunkName System.import statement', function() {
+    var result = [
+      'loadChildren: () => System.import(/* webpackChunkName: "name" */ \'./path/to/file.module\')',
+      '  .then(module => module[\'FileModule\'])'
+    ];
+
+    var loadedString = loader.call({
+      resourcePath: resourcePath,
+      query: '?loader=system'
+    }, `loadChildren: '${modulePath}?chunkName=name'`);
+
+    checkResult(loadedString, result);
+  });
+
   it ('should return a loadChildren dynamic import statement', function() {
     var result = [
       'loadChildren: () => import(\'./path/to/file.module\')',
@@ -187,6 +201,20 @@ describe('Loader', function() {
     checkResult(loadedString, result);
   });
 
+  it ('should return a loadChildren chunkName dynamic import statement', function() {
+    var result = [
+      'loadChildren: () => import(/* webpackChunkName: "name" */ \'./path/to/file.module\')',
+      '  .then(module => module[\'FileModule\'])'
+    ];
+
+    var loadedString = loader.call({
+      resourcePath: resourcePath,
+      query: '?loader=import'
+    }, `loadChildren: '${modulePath}?chunkName=name'`);
+
+    checkResult(loadedString, result);
+  });  
+
   it('should return a loadChildren async require statement with default', function() {
     var modulePath = './path/to/file.module';
 

spec/utils.spec.js

@@ -148,4 +148,24 @@ describe('Utils', function() {
       getFilename('path/to/module.ngfactory.ts').should.eql('module.ngfactory');
     });
   });
+
+  describe('getChunkName', function() {
+    var getChunkName = utils.getChunkName;
+
+    it('should return the chunkName string for a system loader and provided chunkName', function() {
+      getChunkName('system', 'name').should.eql('/* webpackChunkName: "name" */ ');
+    });
+
+    it('should return the chunkName string for a import loader and provided chunkName', function() {
+      getChunkName('import', 'name').should.eql('/* webpackChunkName: "name" */ ');
+    });
+
+    it('should return the chunkName string for a require loader and provided chunkName', function() {
+      getChunkName('require', 'name').should.eql(', \'name\'');
+    });
+
+    it('should return an empty chunkName string for a loader and an empty chunkName', function() {
+      getChunkName('require', '').should.eql('');
+    });
+  });
 });

src/index.js

@@ -89,9 +89,9 @@ module.exports = function(source, sourcemap) {
     if (sync) {
       replacement = utils.getSyncLoader(filePath, moduleName, inline);
     } else if (loader === 'system') {
-      replacement = utils.getSystemLoader(filePath, moduleName, inline);
+      replacement = utils.getSystemLoader(filePath, moduleName, inline, chunkName);
     } else if (loader === 'import') {
-      replacement = utils.getImportLoader(filePath, moduleName, inline);
+      replacement = utils.getImportLoader(filePath, moduleName, inline, chunkName);
     } else {
       replacement = utils.getRequireLoader(filePath, chunkName, moduleName, inline, isJs);
     }

src/utils.js

@@ -19,31 +19,30 @@ module.exports.getSyncLoader = function(filePath, moduleName, inline) {
 
 module.exports.getRequireLoader = function(filePath, chunkName, moduleName, inline, isJs) {
   var requireString = module.exports.getRequireString(filePath, moduleName);
-  var webpackChunkName = chunkName ? ', \'' + chunkName + '\'' : '';
 
   var result = [
     'loadChildren: () => new Promise(function (resolve) {',
     '  ' + (isJs ? 'require' : '(require as any)') + '.ensure([], function (' + (isJs ? 'require' : 'require: any') + ') {',
     '    resolve(' + requireString + ');',
-    '  }' + webpackChunkName + ');',
+    '  }' + module.exports.getChunkName('require', chunkName) + ');',
     '})'
   ];
 
   return inline ? result.join('') : result.join('\n');
 };
 
-module.exports.getSystemLoader = function(filePath, moduleName, inline) {
+module.exports.getSystemLoader = function(filePath, moduleName, inline, chunkName) {
   var result = [
-    'loadChildren: () => System.import(\'' + filePath + '\')',
+    'loadChildren: () => System.import(' + module.exports.getChunkName('system', chunkName) + '\'' + filePath + '\')',
     '  .then(module => module[\'' + moduleName + '\'])'
   ];
 
   return inline ? result.join('') : result.join('\n');
 };
 
-module.exports.getImportLoader = function(filePath, moduleName, inline) {
+module.exports.getImportLoader = function(filePath, moduleName, inline, chunkName) {
   var result = [
-    'loadChildren: () => import(\'' + filePath + '\')',
+    'loadChildren: () => import(' + module.exports.getChunkName('import', chunkName) + '\'' + filePath + '\')',
     '  .then(module => module[\'' + moduleName + '\'])'
   ];
 
@@ -70,3 +69,13 @@ module.exports.normalizeFilePath = function(filePath, relativePathMatch) {
 
   return newPath;
 }
+
+module.exports.getChunkName = function (loader, chunkName) {
+  if (chunkName && (loader === 'import' || loader === 'system')) {
+    return '/* webpackChunkName: "' + chunkName + '" */ ';
+  } else if (chunkName && loader == 'require') {
+    return ', \'' + chunkName + '\'';
+  }
+
+  return '';
+}