angular - Kan ikke forkorte importstier med tsconfig.json

Stiene jeg definerte i tsconfig.json fungerer ikke.

Jeg startet et prosjekt med Ionic 4 og ønsket å unngå stygge stier i importene. Jeg fant informasjon om å endre tsconfig.json, noe jeg gjorde. Jeg har allerede funnet disse svarene: How to use paths in tsconfig.json? og Cannot resolve tsconfig paths

Så min tsconfig.json ser slik ut:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@services/*": ["app/services/*"],
      "@data/*": ["app/data/*"]
    }
  }
}

Og jeg får tilgang til en klasse som spesifiserer en bruker i tjenesten min:

import { User } from '@data/User';

Brukerklassen ser slik ut:

export class User {
   ...
}

Prosjektstrukturen min ser slik ut:

Jeg ser ingen forskjell mellom koden min og de forskjellige løsningene jeg delte. Feilen som vises er:

[ng] FEIL i src/app/services/profile.service.ts(3,22): feil TS2307: Kan ikke finne modul ''@data/User''. [ng]

Hva gjør jeg galt?

Svar #1

Du bør endre konfigurasjonen din slik

"paths": {
  "@services/*": ["src/app/services/*"],
  "@data/*": ["src/app/data/*"]
}

Fordi stien bør starte fra src-mappen

Da kan du importere som

import { User } from '@data/User';

Svar #2

Råd for Typescript-stier (spesielt i Angular CLI-kontekst)

  1. Etter å ha satt Paths inne i din tsconfig.json bør du starte serveren på nytt for å få det til å fungere som forventet.

  2. Sørg alltid for at banen din begynner med rotmappen for å unngå mulige feil, f.eks. å bruke src-mappen som rot.

Relaterte artikler