typescript - Hvordan importere ts- og scss-filer fra en ikke-relativ bane i .net core 2.1 Angular 6-mal

Jeg har laget en ny .net core 2.1-applikasjon ved å bruke angular template, og etter det har jeg oppdatert prosjektet til å bruke Angular 6.

merk at prosjektet nesten er det samme som prosjektet som Angular CLI genererer

Prosjektet mitt vil ha mange komponenter og tjenester, så i stedet for å bruke relative stier liker jeg å kunne bruke ikke-relative stier

TypeScript

import { WeatherService } from '../../services/weather.service'

Jeg ønsket å ha muligheten til å bruke ikke-relativ sti som:

import { WeatherService } from '@app-services/weather.service'

så jeg la til

"baseUrl": ".",
    "paths": {
      "@app-services/*": [ "src/app/services/*" ]
    },

inn i tsconfig.json

hele konfigurasjonen:

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

Det fungerer som forventet, jeg kan importere tjenesten i hver komponent, for eksempel:

import { WeatherService } from '@app-services/weather.service';

Men jeg får denne feilen når jeg kjører ng build:

FEIL i app/components/home/home.component.ts(3,32): feil TS2307: Kan ikke finne modulen '@app-services/weather.service'.

Hvordan løser man dette?

Merk: inne i ClientApp/src/ finnes det en annen utvidelse av tsconfig-filen, altså tsconfig.app.json, men når jeg legger til den ikke-relative stien der, fungerer importeringen rett og slett ikke, vet ikke hvorfor dette skjer også

Scss

Jeg har installert node-sass og jeg har endret alle .css-filene til å være .scss, og i tillegg har jeg lagt til

"stylePreprocessorOptions": {
              "includePaths": [ 
                "./src/common/"
              ]

inne i angular.json

inne i common-mappen holder jeg alle de globale scss-filene:

common
 |
  - _images.scss
  - _colors.scss

La også dette til i samme fil:

"schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss" // <<---
    }
  }

Det fungerer fint for relative stier:

@import '../../../common/_images.scss';

dessverre får jeg denne feilen:

Udeklarert variabel

når jeg importerer slik:

@import '_images';

Men.. men, det fungerer fint etter bygging

Svar #1

prøv dette:

  import { WeatherService } from '~app-services/weather.service'

i stedet for dette :

import { WeatherService } from '@app-services/weather.service'

Relaterte artikler