What does "@" symbol mean in "import { Component } from '@angular/core';" statement?

Question

I'm reading Angular 2 "5 Min Quickstart" and there is such a line:

import { Component } from '@angular/core';" 

I can't figure out, what does @ symbol make in that import? TypeScript docs also don't say anything about that.

What does it mean?

Answer 1

Also of relevance is that you can use the @ symbol scoping for non-npm packages as well. You can use this in your project as a short way of referring to different directories.

i.e.

import { MyService } from '@services/my.service'; import { HelloWorldComponent } from '@components/hello-world.component'; 

instead of

import { MyService } from '../../../../my.service'; import { HelloWorldComponent } from '../shared/deeply/nested/hello-world/hello-world.component'; 

To do this, you simply configure your tsconfig.json file (at root of project) like this:

{   "compileOnSave": false,   "compilerOptions": {      // omitted...      "baseUrl": "src",     "paths": {       "@services/*": ["app/path/to/services/*"],       "@components/*": ["app/somewhere/deeply/nested/*"],       "@environments/*": ["environments/*"]     }   } } 

See the full details at Angular Firebase