tsconfig "paths" config is not recognized

[lehresman]

Mac OSX Sierra
angular-cli version 1.0.0-beta.24

I'm trying to configure things so I don't have to use ugly (and brittle) relative paths when including modules from my own project. I modified tsconfig.json to include:

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

And that works great for TypeScript.

However, "ng serve" is throwing this error:

ERROR in ./src/app/content/content.component.ts
Module build failed: Error: /Users/lehresman/Projects/gazelle-ui/src/app/content/content.component.ts (2,29): Cannot find module '@app/models/client.model'.)
    at _checkDiagnostics (/Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:116:15)
    at /Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:141:17
 @ ./src/app/app.module.ts 17:0-65
 @ ./src/main.ts
 @ multi main

I've discovered that Webpack has configuration options for this, but I can't figure out how to configure Webpack through Angular-CLI to support this. Is this a bug, or is this feature not exposed?

[ValeryVS]

Are you using ng serve with --aot flag?
Probably, tsginfig's paths is ofiicialy supported by angular cli only for JIT compile for now.

[lehresman]

No, just plain ng serve

[ValeryVS]

Well, it should work then. I'am use the same config. (But with beta.22 version. Still have not time for update.)
Make shure, that you restart your ng serve after changing tsconfig.json
It will not load new settings while serving.

[lehresman]

Thanks for letting me know that it was supported. I was chasing rabbit trails trying to get angular-cli to support it, but turns out it IS supported already. I simply had my paths wrong.

[lehresman]

Also, for posterity, I had to make the paths be an array. It looks like Typescript accepts a string, but angular-cli expects it to be an array.

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/*": ["app/*"]  // <-- must be an array
    },
   ...

[lehresman]

Ok, that works fine for the main app, but my tests don't seem to recognize it.

ng test shows this error:

ERROR in ./src/app/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve '@app/services' in '/Users/lehresman/Projects/gazelle-ui/src/app/dashboard'
 @ ./src/app/dashboard/dashboard.component.ts 12:17-41
 @ ./src/app/dashboard/dashboard.component.spec.ts
 @ ./src \.spec\.ts$
 @ ./src/test.ts

ng serve is working fine.

Here is the dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/services';

@Component({
  providers: [
    AuthService
  ],
  selector: 'gl-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  ngOnInit() {
  }

}

Are the tsconfnig.json baseUrl and paths settings not supported for ng test?

[dzonatan]

Yes, tests have that issue.
See #3586 issue. PR #3831 should fix it.

[filipesilva]

Fixed by #3831, thanks @dzonatan !

[Parziphal]

Sorry for commenting here, but this isn't working for me. I added baseUrl and paths to tsconfig.json just like the OP posted, but ng build says the module can't be found (it works in the editor, so I guess it's properly configured).

ng -v says:

@angular/cli: 1.2.6
node: 8.2.1
os: linux x64
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
etc...

[filipesilva]

@Parziphal I don't know what's going on in your setup, but if you can reproduce in a new project then I ask you to open a new issue with the reproduction. If it does work there, then have a look at how all the tsconfig.json might differ from yours.

[duncanwerner]

I believe this regressed. I had the following setup in [root]/tsconfig.json:

{
    ...
    "baseUrl": "src",
    "paths": {
      "@local/*": ["../local_modules/*"]
    }
    ...
}

and then in my files I referenced packages in local_modules using the @local/X alias. That worked in 1.2.3. I just upgraded to 1.3.0, and it fails. Reverting to 1.2.3 resolves it. I'm not sure if this was supposed to work, or if this was just a hack I found in the comments.

[ZiruZanrgeiff]

Hi, I have the same problem. I am in a fresh project. With this setup:

@angular/cli: 1.2.6
node: 6.10.2
os: darwin x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.4
@angular/language-service: 4.3.4

And after set the paths:

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

I try to run ng serve an I got this error:

ERROR in /Users/ronildo/dev/v4nexus/nexuscloud-frontend/src/app/app.module.ts (10,30): Cannot find module '@shared/shared.module'.