fix(build): use baseUrl and paths from tsconfig (#2470)

Author: filipesilva

packages/angular-cli/models/webpack-build-test.js

@@ -2,6 +2,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const atl = require('awesome-typescript-loader');
 
 const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
 
@@ -11,7 +12,12 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
     devtool: 'inline-source-map',
     context: path.resolve(__dirname, './'),
     resolve: {
-      extensions: ['.ts', '.js']
+      extensions: ['.ts', '.js'],
+      plugins: [
+        new atl.TsConfigPathsPlugin({
+          tsconfig: path.resolve(appRoot, appConfig.tsconfig)
+        })
+      ]
     },
     entry: {
       test: path.resolve(appRoot, appConfig.test)

packages/angular-cli/models/webpack-build-typescript.ts

@@ -16,6 +16,13 @@ export const getWebpackNonAotConfigPartial = function(projectRoot: string, appCo
   const lazyModules = findLazyModules(appRoot);
 
   return {
+    resolve: {
+      plugins: [
+        new atl.TsConfigPathsPlugin({
+          tsconfig: path.resolve(appRoot, appConfig.tsconfig)
+        })
+      ]
+    },
     module: {
       rules: [
         {

packages/angular-cli/tasks/build-webpack.ts

@@ -45,11 +45,8 @@ export default <any>Task.extend({
 
         if (err) {
           lastHash = null;
-          console.error(err.stack || err);
-          if (err.details) {
-            console.error(err.details);
-          }
-          reject(err.details);
+          console.error(err.details || err);
+          reject(err.details || err);
         }
 
         if (stats.hash !== lastHash) {

tests/e2e/tests/build/ts-paths.ts

@@ -0,0 +1,35 @@
+import {updateTsConfig} from '../../utils/project';
+import {writeMultipleFiles, appendToFile} from '../../utils/fs';
+import {ng} from '../../utils/process';
+import {stripIndents} from 'common-tags';
+
+
+export default function() {
+  return updateTsConfig(json => {
+    json['compilerOptions']['baseUrl'] = '.';
+    json['compilerOptions']['paths'] = {
+      '@shared': [
+        'app/shared'
+      ],
+      '@shared/*': [
+        'app/shared/*'
+      ]
+    };
+  })
+  .then(() => writeMultipleFiles({
+    'src/app/shared/meaning.ts': 'export var meaning = 42;',
+    'src/app/shared/index.ts': `export * from './meaning'`
+  }))
+  .then(() => appendToFile('src/app/app.component.ts', stripIndents`
+    import { meaning } from 'app/shared/meaning';
+    import { meaning as meaning2 } from '@shared';
+    import { meaning as meaning3 } from '@shared/meaning';
+
+    // need to use imports otherwise they are ignored and
+    // no error is outputted, even if baseUrl/paths don't work
+    console.log(meaning)
+    console.log(meaning2)
+    console.log(meaning3)
+  `))
+  .then(() => ng('build'));
+}

tests/e2e/utils/fs.ts

@@ -93,6 +93,11 @@ export function replaceInFile(filePath: string, match: RegExp, replacement: stri
 }
 
 
+export function appendToFile(filePath: string, text: string) {
+  return readFile(filePath)
+    .then((content: string) => writeFile(filePath, content.concat(text)));
+}
+
 
 export function expectFileToExist(fileName: string) {
   return new Promise((resolve, reject) => {