Prefix for @Component

[SebastianStehle]

Hi,

I would like to have another feature ;) ... I am too lazy to write imports for all types, therefore I just use

import * as Ng2 from '@angular/core';

Can you add something like a prefix for @component and @directive?

[PatrickJS]

are you saying you want to type a class that have Component in the name and have it auto include the decorator? so

export class AppComponent  {
}

with have

@Component({})
export class AppComponent  {
}

or auto inject imports?
so

@Component({})
export class AppComponent  {
}

with have

import { Component } from '@angular/core';
@Component({})
export class AppComponent  {
}

[SebastianStehle]

No, sorry.

I am too lazy to include all types in the import (especially for Components where you have OnInit, OnDestroy, Changes, ElementRef, Renderer ...)

Therefore I just use:

 import * as Ng2 from '@angular/core';

 @Ng2.Component({ ... });
 export class MyComponent {
 }

I tried to integrate it yesterday. The idea was to add an ngAlias parameter and then to do some replaces before the Line 87

 var ngAlias = '';
 if (query.ngAlias && typeof query.ngAlias === 'string') {
     ngAlias = query.ngAlias + '.';
 }
 if (ngAlias) {
      source = source.replace(new RegExp('@' + ngAlias + 'Component', '@Component');
      source = source.replace(new RegExp('@' + ngAlias + 'Directive', '@Directive');
 }

and change Line 166 to

 return @' + ngAlias + decorator + '({' + metadata + '})';

But I got some exceptions in Line 117 because 'src' was undefined.

[PatrickJS]

ok ya I can fix this

[awerlang]

Would an IDE be able to deal with this? How would it recognized where Component() is from?

[SebastianStehle]

The IDE?

[awerlang]

I mean this:

[SebastianStehle]

You mean it can generate the imports? Probably, but VS Code cannot, or at least not with a single click ;)

[awerlang]

Yes, IDEs are meant to help with this. WebStorm can do it, and VS Code maybe someday.

What I meant is if you omit this prefix on your source code and having a plugin injecting it on transpilation, you'll lose all the goodness in the IDE e.g. intellisense, type checking, etc. Unless the IDE implement this convention, which is unlikely.

[SebastianStehle]

I dont understand what you mean. I use this prefix/alias because I dont like long import statements, e.g.

 import { Component, Input, Output, OnChanges, OnInit, OnDestroy } from '@angular/core';

You can use any alias you want, it is valid typescript and you get intellisense for it. But this package here, does not recognize aliases, because it tries to find '@component' in the code. I am confused at the moment :D

[SebastianStehle]

@gdi2290 are you going to add this feature?

[michaeljota]

To autoimport (and other goods) try Typescript Hero

@SebastianStehle did you try Typescript Hero? Did it work as you expected? I know everyone it's free to work as they think it's better, but destructing imports have it's benefits, even more when you are working with Webpack and a tree shaking-like feature.

[SebastianStehle]

Yes, I migrated my code. The tree shaking might not work correctly but i have seen no difference in the size of the bundle.