How can I use absolute path in an angular cli generated project?
So I have this path : src -> app -> shared
and I would like to write import {} from 'shared/ffdsdf/my.module.ts'
instead of '../shared/ffdsdf/my.module.ts'
Add a comment
|
5 Answers
better sample:
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@app/*": [
"app/*"
],
"@app/core/*": [
"app/core/*"
],
"@app/shared/*": [
"app/shared/*"
],
"@env/*": [
"environments/*"
]
}
}
}
use:
import { someService } from "@app/core/some.service";
instead of:
import { someService } from "./../../core/some.service";
3 Comments
ps0604
Is it possible to set an absolute path, for example
"C:/xxx/app/*" instead of "app/*" ?Daniel Methner
trying to apply this in main.ts doesn't work for me, using import { AppModule } from '@app/app.module'; It throws an error "Multiple markers at this line - Cannot find module '@app/app.module'. - 1 changed line"
Masoud Bimmer
main.ts isn't inside app folder
There is a TypeScript feature that allows this.
You can modify your src/tsconfig.json file to enable this, under compilerOptions, add the following:
{
"compilerOptions": {
// ...
"paths": {
"*": [
"./*",
"app/*",
"../node_modules/*"
]
}
}
You can obviously change the pattern key and values as needed. You add or remove folders, you can change the order, etc.
You can also choose a prefix instead of just * (especially if it cases problems), you can use something like ~/*, and your imports will then be all from '~/shared/sample' etc.
2 Comments
Charan Giri
i have paths like below, can you help me with proper structure that i have to use "paths": { "~appCore/*": [ "app/core/*" ], "~appCommon/*": [ "app/common/*" ] },
Stephane
What happens with these paths mappings if the project defining them is a library ? How will the client application not break when hitting these unknown paths in the installed library ?
The easiest way I found is to put this in tsconfig.json
"compilerOptions": {
"rootDir": "src",
"baseUrl": "src"
}
The component will look like this:
import { Thing } from 'app/Thing';
For me adding @ and listing every path looks like a waste of time. This way every project will work the same.
TIP: Restart IDE if getting module not found error, for tsc to restart.
2 Comments
Mickey Sly
Wow thank you so much for this. Ive been looking for something like the entire thing of going thru each folder and doing "@Shared" etc was so exhausting! His is def the way now you can just do an auto "import" and you no longer need to do worry about the relative paths. Thank you so much!!
babaliaris
This needs more upvotes! It does exactly what the OP wants and it does it in the easiest configurable way! As of 2024 this still works!
In Angular9, it's important to follow the following steps.
- Create
baseUrland path intsconfig.json
{
"baseUrl": "./src",
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
],
"@app/*": ["app/*"],
"@views/*": ["app/views/*"],
"@containers/*": ["app/containers/*"]
}
}Note: Here you can see that I have also added @angular path resolution to tsconfig.json. This step will ensure VSCode to show the correct syntax highlighting.
- Remove
baseUrlandpathfromtsconfig.app.json
Note: Without doing this step, you will get the module not found error when compiling the angular project. (Syntax highlighting was fine even without this).
Comments
Since I can't comment on a prior post...
In addition to the answer above by valentineProjects...
"compilerOptions": {
"rootDir": "src",
"baseUrl": "src"
}
You might also have to change the VSCode preferences for typescript.preferences.importModuleSpecifier to "non-relative". The default is "shortest" which caused me to still get ./ paths.
