Add project source dir as a module

[filipesilva]

It would be very useful to be able to address components via a relative path starting at the project root. A way to do this is to consider the project root as a special project, as if it was inside of node_modules as far as resolution is concerned.

Such a design greatly reinforces the 'app as a library' idea, and plays nice with most module loading scheme.

A proposed name is @app but configurable via angular-cli.json, where app is the project prefix specified in ng new --prefix app (this exists already and defaults to app).

Example:

// instead of 
import { something } from '../../../../../../../shared/something';
// we could do
import { something } from '@app/shared/something';

This would also work for CSS preprocessors.

Such implementation would address #865 and also greatly reduce the need for #900.

[sirajc]

Have seen similar thing in ng-bootstrap. The demo project inside refers to the main project using @ng-bootstrap and it is using webpack

[TheLarkInn]

In terms of webpack implementation would we be taking this @app property and mapping them to the webpack alias for module resolution @filipesilva

[filipesilva]

Something important that came up: editor tooling would never be able to find @app. You'd always have errors on your editor.

[clydin]

There are also tsconfig's baseUrl and paths options. This would only apply to typescript files but allows editors (e.g., vscode) to process and follow the mapping.

To make the current version of vscode pick up the settings, you'll need to add a workspace settings file with "typescript.tsdk": "./node_modules/typescript/lib" (make sure it points to your actual typescript location).

    "baseUrl": ".",
    "paths": {
      "@app/*": ["app/*"]
    }

UPDATE:

The above additions to tsconfig and the inclusion of the TsConfigPathsPlugin in the CLI's web pack config work well so far. It definitely simplifies and improves readability of typescript imports.

[masaanli]

Can't wait on this one :) Also struggling with FontAwesome Fonts implementation. Did a CDN for now...

[chapati23]

Another thing to be aware of with aliases is tests. Just because webpack knows @app as an Ali's doesn't mean mocha or karma etc. will know how to resolve it