Angular-cli: feature: add support for the new TypeScript / Webpack ... resolve: { alias: {

[born2net]

please add support for the new TypeScript relative path shortcuts / alias in ng cli

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "baseUrl": "src",
        "paths": [
            "actions/*": [ "app/actions/*" ],
            "selectors/*": [ "app/selectors/*" ],
            "ui/*": [ "app/ui/*" ],
            "logger": [ "util/logger" ],
        ]
    }
}

You learn more about it here:
https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/

which will be awesome so we can use in angular alias paths and not have to ../../../../SomeComponent

Thanks as always for a great product,

Sean

[hansl]

This is already covered with tsconfig.json

[born2net]

I saw that tsconfig had it but was not aware that CLI had as well
great tx

[andrii-oleksyshyn]

born2net, does it work for you?

I've added this to my tsconfig.json:

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
      "shared/*": ["app/shared/*"]
  }
}

Path to the constants file: src/app/shared/constants/index.ts

When I import it as usual import { testConst } from './shared/constants/index';, it works fine:

But when I use absolute path, it crashes:
import { testConst } from 'shared/constants/index';

Webpack error:

ERROR in C:/Projects/myProject/UI/src/app/app.component.ts (2,27): Cannot find module 'shared/constants/index'.)
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'shared/constants/index' in 'C:\Projects\myProject\UI\src\app'

[born2net]

nope I could not get it to work and left it.
I believe this feature is broken ;(

[andrii-oleksyshyn]

hansl, could you please confirm that this feature works as it should? Maybe we need to add additional configuration somewhere?

[filipesilva]

@andrii-oleksyshyn this is a scenario that we test for and support.

See https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/ts-paths.ts for an example.

Make your you're changing the right tsconfig, in this case src/tsconfig.app.json.

[arch-imp]

I tried adding the paths option to my tsconfig.app.json file, but when I then run 'ng build', it will hang and eventually crash with a heap error:

13% building modules 25/58 modules 33 active ...ode_modules\webpack\buildinglobal.js
<--- Last few GCs --->

[13780:0000020FEDA4C940] 370034 ms: Mark-sweep 1525.0 (1638.4) -> 1525.0 (1638.4) MB, 1614.4 / 0.0 ms last resort

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0000020C133A66A1
1: /* anonymous */ [C:\Dev\my-project\node_modulesenhanced-resolvelib\UnsafeCachePlugin.js:~28] [pc=000002AC25ADC024](this=000003231ADBDC39 er with map 000002EB11A41131>,request=000000506A8C04E9 ,callback=000001BD49293171 D6CDBBDE9)>)
2: applyPluginsParallelBailResult1 [C:\Dev\my-project\no...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

This is easy to duplicate.
1- Create a new cli project
2- npm install gridstack --save
3- ng build <-- this will build correctly without issue
4- Add let gridstackjQuery = require('gridstack/dist/gridstack.jQueryUI.js'); to the app.component.ts file.
5- ng build <-- this will output errors that it can't resolve 'jquery-ui/ 6- Add paths option to the tsconfig.app.json file:
"paths":{
"jquery-ui/":["jquery-ui/ui/"]
},
7- ng build <-- This will result in the above crash.

Am I aliasing my paths wrong? Is there a supported way to change the paths that gridstack is expecting?

I have asked the gridstack folks to change their requires, but until they do, I'm hoping there is a way to work around this in Angular.

[jjenzz]

Make your you're changing the right tsconfig, in this case src/tsconfig.app.json.

@filipesilva I am changing the right tsconfig but still having issues. A simplified example of my set up is below.

Structure:

.
├── src
│   ├── tsconfig.app.json
│   └── app
├── packages
│   └── foobar
│       └── src
│           └── index.ts

tsconfig.app.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": ".",
        "module": "es2015",
        "types": [],
        "paths": {
            "@packages/*": ["../packages/*/src"]
        }
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Does not work with import { Foo } from '@packages/foobar'. Am I missing something? 🙈

[Bradleycorn]

Same for me, using cli v1.3.0. Using baseUrl and paths in my tsconfig.app.json doesn't work. I'm not sure why this issue is closed?

My setup is:

.
|--demo-app
|  |--src
|  |  |--tsconfig.app.json
|--packages
|  |--core
|  |  |--index.ts

And the tsconfig.app.json has, among other things:

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@cdux/ng-core": [
        "../../packages/core"
      ]
    },

But when I build, I get errors that @cdux/ng-core cannot be found. And the module resolution debug output shows that it never even attempts to look in ../../packages/core for those modules:

Module not found: Error: Can't resolve '@cdux/ng-core' in '/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/app'
...
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/app/node_modules]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/node_modules]
[/Users/brad.ball/dev/cdi/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/brad.ball/node_modules/package.json]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core.ts]
[/Users/brad.ball/dev/cdi/cdux-ng/node_modules/@cdux/ng-core.ts]
[/Users/brad.ball/dev/node_modules/@cdux/ng-core.ts]
[/Users/brad.ball/node_modules/@cdux/ng-core/package.json]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core.js]
[/Users/brad.ball/dev/cdi/cdux-ng/node_modules/@cdux/ng-core.js]
[/Users/brad.ball/dev/node_modules/@cdux/ng-core.js]
[/Users/brad.ball/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/node_modules/@cdux/ng-core]
[/Users/brad.ball/node_modules/@cdux/ng-core.ts]
[/Users/brad.ball/node_modules/@cdux/ng-core.js]
[/Users/brad.ball/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core.ts]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core.js]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/node_modules/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core.ts]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core.js]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core.ts]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core.js]
[/Users/brad.ball/dev/cdi/cdux-ng/dev-app/src/@cdux/ng-core]

[Bradleycorn]

@hansl & @filipesilva, In other non-cli projects I've worked on, I've found that I need to set the paths property in my tsconfig.json AND set the `resolve: { alias: {} } property in my webpack config. It seems like the cli currently doesn't provide any way for us to specify the resolve.alias property to go in the webpack config?

[webtjw]

You must set baseUrl and paths in the same time to make it work correctly.And the routes in paths values are based on the baseUrl.

[chriszrc]

Is this working yet? I experienced the same problems as everyone on this thread-

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}