feature(import resolving): ability to import (ts, sass etc.) with path alias

packages/angular-cli/blueprints/ng2/files/__path__/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -12,6 +13,14 @@
     "target": "es5",
     "typeRoots": [
       "../node_modules/@types"
-    ]
+    ],
+    "paths": {
+      "@app": [
+        "app"
+      ],
+      "@app/*": [
+        "app/*"
+      ]
+    }
   }
 }

packages/angular-cli/blueprints/ng2/files/angular-cli.json

@@ -22,6 +22,9 @@
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
+      },
+      "alias": {
+        "@app": "app"
       }
     }
   ],

packages/angular-cli/lib/config/schema.d.ts

@@ -33,6 +33,12 @@ export interface CliConfig {
         environments?: {
             [name: string]: any;
         };
+        /**
+         * Name and corresponding path.
+         */
+        alias?: {
+            [name: string]: string;
+        };
     }[];
     /**
      * Configuration reserved for installed third party addons.

packages/angular-cli/lib/config/schema.json

@@ -73,6 +73,11 @@
             "description": "Name and corresponding file for environment config.",
             "type": "object",
             "additionalProperties": true
+          },
+          "alias": {
+            "description": "Aliases for resolve imports in webpack",
+            "type": "object",
+            "additionalProperties": true
           }
         },
         "additionalProperties": false

packages/angular-cli/models/get-aliases.ts

@@ -0,0 +1,19 @@
+import * as path from 'path';
+
+export function getAliases(
+  projectRoot: string,
+  appConfig: any
+) {
+  const aliases: any = {};
+
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+
+  if (appConfig.alias) {
+    for (let aliasKey in appConfig.alias) {
+      let alias = path.resolve(appRoot, appConfig.alias[aliasKey]);
+      aliases[aliasKey] = alias;
+    }
+  }
+
+  return aliases;
+}

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

@@ -2,6 +2,8 @@ import * as webpack from 'webpack';
 import * as path from 'path';
 import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack';
 
+import { getAliases } from './get-aliases';
+
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
@@ -21,6 +23,7 @@ export function getWebpackCommonConfig(
   const scripts = appConfig.scripts
                 ? appConfig.scripts.map((script: string) => path.resolve(appRoot, script))
                 : [];
+  const aliases = getAliases(projectRoot, appConfig);
 
   let entry: { [key: string]: string[] } = {
     main: [appMain]
@@ -33,7 +36,8 @@ export function getWebpackCommonConfig(
   return {
     devtool: 'source-map',
     resolve: {
-      extensions: ['.ts', '.js']
+      extensions: ['.ts', '.js'],
+      alias: aliases
     },
     context: path.resolve(__dirname, './'),
     entry: entry,

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

@@ -1,17 +1,20 @@
 // this config must be JS so that the karma plugin can load it
+const getAliases = require('./get-aliases').getAliases;
 
 const path = require('path');
 const webpack = require('webpack');
 
 const getWebpackTestConfig = function (projectRoot, environment, appConfig) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
+  const aliases = getAliases(projectRoot, appConfig);
 
   return {
     devtool: 'inline-source-map',
     context: path.resolve(__dirname, './'),
     resolve: {
-      extensions: ['.ts', '.js']
+      extensions: ['.ts', '.js'],
+      alias: aliases
     },
     entry: {
       test: path.resolve(appRoot, appConfig.test)