21

I'm using the Angular CLI. How do I convert a path from:

import {AppConfig, AppConfigInterface} from '../../../app.config';

to something like:

import {AppConfig, AppConfigInterface} from 'root/app.config';
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
manidos
  • 3,244
  • 4
  • 29
  • 65
  • 7
    Possible duplicate of [Avoiding relative paths in Angular CLI](http://stackoverflow.com/questions/41460810/avoiding-relative-paths-in-angular-cli) – jonrsharpe Jan 06 '17 at 13:33

4 Answers4

38

try this in tsconfig.json: 

  {
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@services/*": ["app/services/*"] // here!
    }
  }
}
Xigua.liu
  • 396
  • 3
  • 3
  • 3
    do you have this working on angular 7? "Option 'paths' cannot be used without specifying '--baseUrl' option." even after specifying a baseUrl option, the path alias doesn't work. "cannot find module '@services/'. This worked fine in angular 6. – seabass Nov 07 '18 at 18:15
  • @seabass did you find any solution with angular 7? – Pardeep Jain Jun 06 '19 at 14:12
  • 1
    yes, i'm on angular 8 now but had this working with 7 as well. tsconfig.json "baseUrl":"projects/myproject/src" "paths": { "@services": ["app/modules/services/"] } – seabass Jun 06 '19 at 17:06
7

I want to draw the attention that editing only the tsconfig.json will be effective in the code completion and building via the ts compiler. the Agular-CLI, however, can't recognize the defined address to the true paths as long as you do not define them, in addition, in the tsconfig.app.json. ng serve will show build error TS2307: Cannot find module '@...

Whereas, restricting definition into the latter will make the ts IntelliSense compiler show them as unrecognized paths

In short: define the paths in both tsconfig and tsconfig.app JSON files

AbuDawood
  • 745
  • 7
  • 22
  • 3
    This is very helpful. It can be improved by the addition of saying _how_ to define the paths in each. Then this would be shoe-in for very top answer. As it stands, it must be combined with the others in order to be useful. – RoboticRenaissance Nov 13 '21 at 16:44
5

I found this question when tried to resolve scss. I found current approach will not work because of this issue

workaround is to add stylePreprocessorOptions to .angular-cli.json so it will resolve all styles within the directory

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

for server-side rendering you will need to add this for both ssr and main app build - otherwise you will get NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\Users\...\ClientApp\dist-server\main.bundle.js'

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
0

angular cli default modules directory is defined in /angular-cli.json you can try '/app.config' if you need the root

Shalom Hadaya
  • 1