typescript - Hur man importerar ts- och scss-filer från icke-relativ väg i .net core 2.1 Angular 6-mall

Jag har skapat en ny .net core 2.1-applikation med angular-mallar, och efter det har jag uppdaterat projektet för att använda Angular 6.

observera att projektet är nästan samma som det projekt som Angular CLI genererar

Mitt projekt kommer att ha många komponenter och tjänster, så istället för att använda relativa sökvägar gillar jag att kunna använda icke-relativa sökvägar

TypeScript

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

Jag ville ha möjligheten att använda icke-relativ sökväg som:

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

så jag lade till

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

till tsconfig.json

hela konfigurationen:

{
  "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 fungerar som förväntat, jag kan importera tjänsten i varje komponent, till exempel:

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

Men jag får detta fel när jag kör ng build:

FEL i app/components/home/home.component.ts(3,32): fel TS2307: Kan inte hitta modulen '@app-services/weather.service'.

Hur löser man detta?

Observera: inuti ClientApp/src/ finns det en annan utökning av tsconfig-filen, dvs tsconfig.app.json, men när jag lägger till den icke-relativa vägen där fungerar importeringen helt enkelt inte, vet inte varför detta också händer

Scss

Jag har installerat node-sass och jag har ändrat alla .css-filer till .scss, och förutom det lade jag till

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

inuti angular.json

inne i common-mappen håller jag alla globala scss-filer:

common
 |
  - _images.scss
  - _colors.scss

Lade även till detta i samma fil:

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

Det fungerar bra för relativa sökvägar:

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

tyvärr får jag detta fel:

Odeklarerad variabel

när jag importerar på det här sättet:

@import '_images';

Men.. men, det fungerar bra efter byggandet

Svar #1

prova detta:

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

istället för detta:

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

Relaterade artiklar