Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't make paths work properly #19453

Closed
BUONJG opened this issue Oct 24, 2017 · 8 comments
Closed

Can't make paths work properly #19453

BUONJG opened this issue Oct 24, 2017 · 8 comments
Labels
Duplicate An existing issue was already created

Comments

@BUONJG
Copy link

BUONJG commented Oct 24, 2017

Hello,

I'm trying to use paths property in my tsconfig.json file.

It makes the build work perfectly but execution of generated js is failing.

My tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist",
        "baseUrl": "./src",
        "paths": {
            "core/*": [
                "core/*"
            ]
        },
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

src/core/service.ts:

export class Service {
    public static log(message: string) {
        console.log('message', message);
    }
}

src/core/index.ts:

export * from './service';

src/index.ts:

import { Service } from 'core';
Service.log('test');

The build is working perfectly

But running dist\index.js I obtain:

Error: Cannot find module 'core'

Am I doing something wrong?

I made a repo to illustrate this:
https://github.com/BUONJG/typescript-paths.git

Many thanks for your support,

Jean-Guy

@RyanCavanaugh
Copy link
Member

TypeScript won't rewrite your import filenames - you need to write import declarations that would work at runtime.

@BUONJG
Copy link
Author

BUONJG commented Oct 24, 2017

I don't understand your response, how can I use absolute imports in my example?

I tried to follow documentation:
Path mapping in https://www.typescriptlang.org/docs/handbook/module-resolution.html

Reading this documentation, I thought my example should run but it doesn't.

@mhegazy
Copy link
Contributor

mhegazy commented Oct 24, 2017

"paths", "baseUrl" and "rootDirs" all inform the compiler of changes to the module locations that you would do in a post-build step or in a module loader, e.g. requireJs.
The compiler treats module names as resource identifiers, and does not mess up with them. if you write "core" in the input the output will have "core", and not "./core" or ./core/index.js". See #18971, #18951, and #16640.
For example above, you can either write import { Service } from './core'; if you are running on node, or import { Service } from './core/index.js'; if you are running in the browser.

@mhegazy mhegazy added the Duplicate An existing issue was already created label Oct 24, 2017
@BUONJG
Copy link
Author

BUONJG commented Oct 24, 2017

OK, but how can I make typescript generate javascript code that can be executed with absolute path imports?

I don't want to write import { Service } from './core'; because when I am in a deep folder I have imports like: import {Service } from '../../../../core'

I would prefer to use absolute path as core directory is a root directory of my app.

I understood paths tsconfig property is here to resolve absolute paths and it works, it makes the build work properly.

But the generated javascript is not working.

@mhegazy
Copy link
Contributor

mhegazy commented Oct 24, 2017

That would be a new feature that we do not support today. feel free to create a new issue for this request.

@BUONJG
Copy link
Author

BUONJG commented Oct 24, 2017

I don't understand, when I read the documentation:
https://www.typescriptlang.org/docs/handbook/module-resolution.html

In the paragraph:

Using "paths" also allows for more sophisticated mappings including multiple fall back locations. Consider a project configuration where only some modules are available in one location, and the rest are in another. A build step would put them all together in one place. The project layout may look like:

projectRoot
├── folder1
│ ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│ └── file2.ts
├── generated
│ ├── folder1
│ └── folder2
│ └── file3.ts
└── tsconfig.json
The corresponding tsconfig.json would look like:

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"": [
"
",
"generated/"
]
}
}
}
This tells the compiler for any module import that matches the pattern "
" (i.e. all values), to look in two locations.

It seems to correspond to my use case, doesn't?
Do you mean the generated javascript of this example would run with errors too?

@mhegazy
Copy link
Contributor

mhegazy commented Oct 24, 2017

From the text you quoted, emphasis added:

Using "paths" also allows for more sophisticated mappings including multiple fall back locations. Consider a project configuration where only some modules are available in one location, and the rest are in another. A build step would put them all together in one place. The project layout may look like:
projectRoot
├── folder1
│ ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│ └── file2.ts
├── generated
│ ├── folder1
│ └── folder2
│ └── file3.ts
└── tsconfig.json
The corresponding tsconfig.json would look like:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"": [
"",
"generated/"
]
}
}
}
This tells the compiler for any module import that matches the pattern "" (i.e. all values), to look in two locations.

@BUONJG
Copy link
Author

BUONJG commented Oct 25, 2017

Thank you mhegazy,

Now I understand why the sample I created is not working properly.

As you suggested I will open a new issue to ask for absolute path imports to avoid imports like ../../../xxx

Regards,

@BUONJG BUONJG closed this as completed Oct 25, 2017
@microsoft microsoft locked and limited conversation to collaborators Jun 14, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Duplicate An existing issue was already created
Projects
None yet
Development

No branches or pull requests

3 participants