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

TypescriptAngular

Typescript Problem Overview


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?

Typescript Solutions


Solution 1 - Typescript

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

Solution 2 - Typescript

@scope_name/package_name

This is NPM feature, scoped name, anything between @ and slash / will be your scope name.

npm scope document

Solution 3 - Typescript

this is just a naming convention that Angular uses. Since the release they renamed it to @angular/core in stead of angular2/core.

It references the core components of the framework.

(found in post - https://stackoverflow.com/questions/37182093/angularjs-2-with-angular-material-angular-core-not-found)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGill BatesView Question on Stackoverflow
Solution 1 - TypescriptrayrayView Answer on Stackoverflow
Solution 2 - TypescripthoogwView Answer on Stackoverflow
Solution 3 - TypescriptL.querterView Answer on Stackoverflow