How to import ts and scss files from non-relative path in .net core 2.1 Angular 6 template

Question

I have created a new .net core 2.1 application using the angular template, and after that I've updated the project to use Angular 6.

note the project is almost the same as the project that angular cli generates

My project will have a lot of components and services, so instead of using relative paths I like to be able to use non-relative paths

TypeScript

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

I wanted to have the ability to use non-relative path like:

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

so I added

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

into the tsconfig.json

the whole config:

{
  "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"
    ]
  }
}

It's works as expected, I can import the service in every component, for instance:

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

But I get this error when I run ng build:

ERROR in app/components/home/home.component.ts(3,32): error TS2307: Cannot find module '@app-services/weather.service'.

How to solve this ?

Note: inside ClientApp/src/ there is another extension of the tsconfig file i.e. tsconfig.app.json, but when I add the non-relative path there, the importing simply doesn't work, don't know why this is happening too

---

Scss

I have installed node-sass and I have changed all the .css files to be .scss, and besides that I added

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

inside angular.json

inside the common folder I keep all the global scss files:

common
 |
  - _images.scss
  - _colors.scss

Also, added this into the same file:

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

It works fine for relative paths:

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

unfortunately, I get this error:

Undeclared variable

when I import like this:

@import '_images'; 

But.. but, it works fine after build

Answer 1

try this:

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

instead of this :

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