Angular2 import absolute path or custom path (typescript 2)

Question

In our angular2 project, we put all our ts files in a specific folder: / app / common / model / *. I can name them in my components with relatives, but it is very laborious. So, 2 solutions, best of all - this is a custom path: https://stackoverflow.com/a/212618/ But my IDE cannot find the way. 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 the path

Second solution: stack overflow

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

And 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 loading for all models. Maybe config in systemjs file?

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

Thank you for help!

Hi,

TypeScript: 2.0.6 Angular: 2.0.0

Answer 1

After trying to search over the Internet n, trying to understand what exactly is the problem and try another troubleshooting option, I met baseUrl and Path , how it works together

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

If you are using baseUrl: "." as shown below, it works in VScode, but not when compiling

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

As far as I understand, my working application is also verified in Angular aio code, I suggest using baseUrl: "" src , as shown below

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

Having the base URL as the source (src directory), the compiler resolves the modules correctly.

Hope this helps people solve this problem.