CODEWITHSUNDEEP
typescriptionic4
Scottie
Scottie

Reputation: 11308

How can I get my Ionic 4 Typescript paths to work?

I am in the process of upgrading my Ionic 3 app to Ionic 4 with Typescript 3.1, but I'm running into trouble with the Typescript paths.

I have the following in my tsconfig.json:

"paths": {
    "@models": [ "src/models/index" ],
    "@services": [ "src/services/index" ],
    "@shared": [ "src/shared/index" ],
    "@app/*": [ "src/app/*" ],
    "@models/*": [ "src/models/*" ],
    "@services/*": [ "src/services/*" ],
    "@shared/*": [ "src/shared/*" ]
},

and this in my src/tsconfig.app.json:

"paths": {
    "@models": [ "models/index" ],
    "@services": [ "services/index" ],
    "@shared": [ "shared/index" ],
    "@app/*": [ "app/*" ],
    "@models/*": [ "models/*" ],
    "@services/*": [ "services/*" ],
    "@shared/*": [ "shared/*" ]
},

Visual Studio detects the files just fine and doesn't give me any kind of errors, but when I run ionic serve, it can't find any of these files. I get errors such as:

[ng] src/models/jobs/job.model.ts(1,33): error TS2307: 
    Cannot find module '@models/customers/customer.model'.

for the line:

import { ICustomerModel } from "@models/customers/customer.model";

How can I get ionic serve to honor my Typescript paths?

Upvotes: 1

Views: 1318

Answers (1)

Scottie
Scottie

Reputation: 11308

I found the answer.

I needed to add 

"baseUrl": ".",

to the compilerOptions. After I added this, it worked.

Full tsconfig.app.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@models": [ "models/index" ],
            "@services": [ "services/index" ],
            "@shared": [ "shared/index" ],
            "@app/*": [ "app/*" ],
            "@models/*": [ "models/*" ],
            "@services/*": [ "services/*" ],
            "@shared/*": [ "shared/*" ]
        },
        "outDir": "../out-tsc/app",
        "module": "es6",
        "types": [ "node" ]
    },
    "exclude": []
}

Upvotes: 1

Related Questions