Angular2 import absolute path or custom path (typescript 2)

Question

In our angular2 project, we put all our models ts files in a specific folder : /app/common/model/*. I can call them in my components with relatives paths, but it's very laborious. So 2 solutions, best is a custom path: StackOverflow: Relative Paths for SystemJS & ES module imports. But my IDE can not find the path. Here is my tsconfig :

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "outDir": "built", "baseUrl": ".", "paths": { "mymodel/*": [ "app/common/model/*" ] } } }

In my component: import { Address } from 'mymodel/address.model';

IDE: [ts] Cannot find module.... I tried with or without * in path

Second solution : Stackoverflow: Angular 2, imports between different folders

IDE and compilation are ok, with full path in component : import { Address } from 'common/model/address.model';

And the tsconfig:

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "outDir": "built", "baseUrl": ".", "paths": { "*": [ "app/*", "node_modules/*" ] } } }

But we have 404 on page load for all models. Maybe a config in systemjs file ?

In both cases, I think that "outdir" parameter is the problem, and we are missing something.

Many thanks for help!

Regards,

TypeScript: 2.0.6 Angular: 2.0.0

Which IDE are you using? In mine (IntelliJ/Webstorm), I almost never type an import: the IDE adds it for me. — JB Nizet
– JB Nizet, Commented Oct 31, 2016 at 16:23
First solution is working great with other IDE... Sorry, it's a phony problem — lginlap
– lginlap, Commented Nov 2, 2016 at 13:05

Viraj · Accepted Answer · 2017-07-27 10:28:25Z

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.

"If you use baseUrl:"." like below it works in VScode but not while compiling" - That's really important. Thanks
Is this working in newer version because I have tried in all the ways and I couldn't able to refer with above path.

Collectives™ on Stack Overflow

Angular2 import absolute path or custom path (typescript 2)

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related