About import {**} from @app/* in angular4 project

Question

I encountered a strange phenomenon in the angular project.

my project is automatically generated from the command line(ng new myproject)

In the project,table of Contents：

• app
  • shared
    • common
      • app-component-base.ts
    • sesson
      • app-session.service

app-component-base.ts:

import { AppSessionService } from '@shared/session/app-session.service';

and tsconfig.app.json:

"paths": {
    "@abp/*": [ "../node_modules/abp-ng2-module/src/*" ],
    "@app/*": [ "./app/*" ],
    "@shared/*": [ "./app/shared/*" ],
    "@node_modules/*": [ "../node_modules/*" ]
}

vscode shows an error(This does not affect normal operation, but can not navigate to this class)：

[ts] Cannot find module '@shared/session/app-session.service'.

Do i have any configuration is wrong? thanks!

I know that can be so, but I want to use generic symbols：

import { AppSessionService } from '../session/app-session.service';



@angular/cli: 1.4.2
node: 6.10.2
os: win32 x64
@angular/animations: 4.4.2
@angular/common: 4.4.2
@angular/compiler: 4.4.2
@angular/core: 4.4.2
@angular/forms: 4.4.2
@angular/http: 4.4.2
@angular/platform-browser: 4.4.2
@angular/platform-browser-dynamic: 4.4.2
@angular/router: 4.4.2
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.2
typescript: 2.5.2

Answer 1

A couple of things that I noticed. One, your "paths" settings should go in tsconfig.json not tsconfig.app.json. Secondly, my paths looks like this:

"paths": {
  "@app/*": ["app/*"],
  "@env/*": ["environments/*"]
},