Clash Royale CLAN TAG

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

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 are also doesn't say anything about that.

@

What does it mean?

3 Answers
3

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 - angularjs 2 with angular-material @angular/core not found)

@scope_name/package_name

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

npm scope document

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.