Absolute Path Imports not working

[iamyojimbo]

OS?

OSX v 10.11.4

Versions

angular-cli: 1.0.0-beta.11-webpack.2
node: 6.2.2
os: darwin x64

Repro steps.

• As per the TypeScript 2 documentation, we should be able to import modules using absolute paths
• From my understanding, for the angular-cli setup, this should be like so:

import thing from 'src/app/path/to/thing';

• Both my linter and ng build tell me that the module isn't found. What am I doing wrong? I have tried all different combinations of this. What is the correct method?
• Do I need to change any settings in angular-cli config files?

The log given by the failure

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'src/app/shared/services' in '/Users/savvas/code/tl/src/app'
 @ ./src/app/app.module.ts 18:0-54
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in [default] /Users/savvas/code/tl/src/app/app.module.ts:11:28 
Cannot find module 'src/app/shared/services'.

[LunicLynx]

I think what you are trying to do is not possible. They support non-relative paths which is not the same as absolute paths. These non relative paths follow the given module resolution strategie stated in the tsconfig.json.
From the error management you got:
Module not found: Error: Can't resolve 'src/app/shared/services' in '/Users/savvas/code/tl/src/app'

You could easily figure out the relative path(./shared/services), but i guess that is not what you want?

[iamyojimbo]

Ideally, it would be amazing if we could just have absolute paths in reference to the root of the project, so if we move modules around, we don't have to go around correcting all the ../../../../ paths everywhere.

[iamyojimbo]

@iamtracy yes but is this not still a relative path? I.e. if you move the file that's importing it, you have to amend the path? I don't have an issue with Angular CLI generating erroneous \'s in the paths.

[iamyojimbo]

@LunicLynx am I totally chasing a lost cause here? This relative path stuff seems totally insane...

[LunicLynx]

From how i understand this. You are supposed to aggregate the parts of your components that belong together and use re-export files with relative paths, so that you don't have many other files also pointing at theses parts with relative paths. In a best case scenario only 1 relative path in the module (ngModule). And i don't think that absolute path will actually help you when you move components around, at some points you have to change paths.

Also if you are talking about libraries, then create npm packages of them, and put them into your package.json, then you will be possible to use them without specifying a relative path, because module resolution takes over.

[iamyojimbo]

@LunicLynx when you mention:

You are supposed to aggregate the parts of your components that belong together and use re-export files with relative paths, so that you don't have many other files also pointing at theses parts with relative paths.

are you talking about Barrels?

[filipesilva]

Dupe of #1465. Bear in mind that there is no full solution there, but you can use the paths property as suggested in #1465 (comment)

[VirajNimbalkar]

After struggling by searching over internet n trying to understand what exactly problem and trying different troubleshooting option, I came to know baseUrl and Path how works together

Note: This solution is for Angular Cli 1.x . Not sure about other tool,

If you use baseUrl:"." like below it works in VScode but not while compiling

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

As far my understanding and my working app and checked in angular aio code, I suggest use as baseUrl:""src like below

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

By having base URL as source(src directory), compiler properly resolves modules.

I hope this helps to people resolve this kind of issue.

[18steps]

Downgrading the CLI didn't help for me.
What finally worked was adding baseUrl to the root tsconfig.json file.

I had added it to src/tsconfig.app.json, but that file is apparently not picked up by the compiler, even though I was working in src/app/app.module.ts.

[99sono]

I am now starting a new project in angular, and I must say it simply shocks me that the default behavior of of the source code generated via angular-cli is all based on relative paths.

It is so obvious that having source code A - referring to source code B via a relative path between A to B is nothing beyond the worst possible approach in the world - except perhaps using File System full paths - associated to your own personal computer.

How is it possible to get something this trivial wrong?

Are there not abundant examples of of how to properly organize code in packages in java, C# and other languages? Even in python once can specify a set of ROOT lookup paths...

I am now looking at two tools, Visual Code and Eclipse Angular IDE.
And I must say, even with the tsconfig.json setup to have the @app - it is extremelly anoying that the ng build works just fine but all of the tooling seems to strugle to find the modules, flagging source code in red with module cannot be found.

And we are angular 5 release already.
To me this really not understandable.
I would strongly recommend that in any future release of angular cli, nothing but NONE RELATIVE paths be used to refer to source code. Relative paths should be the - the non default approach - to allow for source classes to refer to other source classes withing the same package, just like in java you would not be forced to "import" something on the same package.

Having the IDE Tooling cry about modules not found when you build everything perfectly fine is really really anoying.

[ddehghan]

what worked for me was this tsconfig.json. I got it from a few new angular-cli 6 generated project.

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"stripInternal": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"]
}
}

now I can import

import { BaseSandboxService } from 'src/app/core/sandbox/base.sandbox.service';

[angular-automatic-lock-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.}