feat(@ngtools/webpack): convert dashless resource urls (angular#3842)

Author: filipesilva

packages/@ngtools/webpack/src/loader.ts

@@ -108,6 +108,16 @@ function _removeModuleId(refactor: TypeScriptFileRefactor) {
  });
 }
 
+function _getResourceRequest(element: ts.Expression, sourceFile: ts.SourceFile) {
+ if (element.kind == ts.SyntaxKind.StringLiteral) {
+ // if string, assume relative path unless it start with /
+ return `'${loaderUtils.urlToRequest((element as ts.StringLiteral).text, '')}'`;
+ } else {
+ // if not string, just use expression directly
+ return element.getFullText(sourceFile);
+ }
+}
+
 function _replaceResources(refactor: TypeScriptFileRefactor): void {
  const sourceFile = refactor.sourceFile;
 
@@ -132,7 +142,7 @@ function _replaceResources(refactor: TypeScriptFileRefactor): void {
 
  if (key == 'templateUrl') {
  refactor.replaceNode(node,
- `template: require(${node.initializer.getFullText(sourceFile)})`);
+ `template: require(${_getResourceRequest(node.initializer, sourceFile)})`);
  } else if (key == 'styleUrls') {
  const arr = <ts.ArrayLiteralExpression[]>(
  refactor.findAstNodes(node, ts.SyntaxKind.ArrayLiteralExpression, false));
@@ -141,7 +151,7 @@ function _replaceResources(refactor: TypeScriptFileRefactor): void {
  }
 
  const initializer = arr[0].elements.map((element: ts.Expression) => {
- return element.getFullText(sourceFile);
+ return _getResourceRequest(element, sourceFile);
  });
  refactor.replaceNode(node, `styles: [require(${initializer.join('), require(')})]`);
  }

tests/e2e/tests/packages/webpack/test.ts

@@ -1,7 +1,7 @@
 import {normalize} from 'path';
 import {createProjectFromAsset} from '../../../utils/assets';
 import {exec} from '../../../utils/process';
-import {expectFileSizeToBeUnder} from '../../../utils/fs';
+import {expectFileSizeToBeUnder, replaceInFile} from '../../../utils/fs';
 
 
 export default function(skipCleaning: () => void) {
@@ -10,5 +10,11 @@ export default function(skipCleaning: () => void) {
  .then(() => exec(normalize('node_modules/.bin/webpack'), '-p'))
  .then(() => expectFileSizeToBeUnder('dist/app.main.js', 420000))
  .then(() => expectFileSizeToBeUnder('dist/0.app.main.js', 40000))
+ // test resource urls without ./
+ .then(() => replaceInFile('app/app.component.ts',
+ './app.component.html', 'app.component.html'))
+ .then(() => replaceInFile('app/app.component.ts',
+ './app.component.scss', 'app.component.scss'))
+ .then(() => exec(normalize('node_modules/.bin/webpack'), '-p'))
  .then(() => skipCleaning());
 }