shuhei / babel-plugin-angular2-annotations Goto Github PK

Any plans to update this for Babel 7?

This plugin transforms class properties with no initializer to ones with this.prop initializers.

Remove it when the PR to the legacy decorators plugin is merged.

Type annotations for constructor parameters don't work because babylon cannot parse them. I get the following error:
SyntaxError: <file name>: Unexpected token, expected ,

This is because of babel/babel#3204.

README should be updated to clarify this change.

I think one of my favorite things in typescript is the ability to do something like:

@Component({ /* ... */ })
class HelloComponent {
  constructor(private ngZone: NgZone) { }
}

and ngZone be on the scope of the HelloComponent. Any thoughts on this?

hi

Is there a way to use this plugin with webpack ?

best regards
dennis

Hi,

I am trying to implement

import {Directive, Input, Query, QueryList} from 'angular2/core';
import {RouterLink} from 'angular2/router';

@Directive({
    selector: '[linkActive]',
    host: {
        '[class.router-link-active]': 'isRouteActive'
    }
})
export default class LinkActiveDirective {
    @Input('linkActive') linkParams: any[];
    routerLink: RouterLink;
    constructor(@Query(RouterLink) routerLinks: QueryList<RouterLink>) {
        routerLinks.changes.subscribe(() => {
            this.routerLink = routerLinks.first;
        });
    }
    get isRouteActive() {
        return this.routerLink ? this.routerLink.isRouteActive : false;
    }
}

without TypeScript. I managed to Constructor Decorators using this plugin but for this directive I get an error:

Uncaught TypeError: assert.genericType is not a function(anonymous function)

this refers to the following code line:

Reflect.defineMetadata('design:paramtypes', [assert.genericType(_core.QueryList, _router.RouterLink)], LinkActiveDirective);

Any idea what is causing this?

As of alpha.22, parameters class property was split into two metadata, parameters and design:paramtypes.

https://github.com/angular/angular/blob/2.0.0-alpha.22/modules/angular2/src/reflection/reflection_capabilities.ts#L72-L73

Getting errors compiling when using @Inject like documented here.

The error is vague but here is the code:

import { Component, Inject } from '@angular/core';
import { adapter } from 'app/adapter.js';

@Component({
  selector: 'app',
  providers: [ adapter.upgradeNg1Provider('$http') ],
})
export class App {
   constructor(element: ElementRef, @Inject('$http') $http) {}
}

and error reads like:

Error: C:/dev/app.js: Unexpected token

my versions are:

"babel-core": "^6.8.0",
"babel-preset-angular2": "0.0.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-stage-0": "^6.5.0",

with the following babel config:

"babel": {
    "sourceMaps": false,
    "presets": [
      "es2015",
      "stage-0",
      "angular2"
    ],
    "moduleIds": false,
    "comments": true,
    "compact": false
  }

The babel team is going to forbid people from monkey-patching the parser.

babel/babel#3204

Parameter decorators used in Angular 2

DI for directives

• @Attribute: Not so necessary? Can we use @Input instead of this?
• @Query: Replaceable with @ContentChild and @ContentChildren?
• @ViewQuery: Replaceable with @ViewChild and @ContentChildren?
• @Host: The host directive's providers http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2

Pure DI

• @Inject: Probably be necessary for advanced developers?
• @Optional: Probably necessary for advanced developers?
• @Self: Not so necessary for app developers? The same element's providers http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2
• @SkipSelf: Not so necessary for app developers?

https://angular.io/docs/ts/latest/api/#!?apiFilter=metadata

I just managed to convert all my TS to JS using your plugin, except for one @ViewChild line, which works for TS but seems to fail conversion. Normally this annotation can take either a class or a string parameter, but either seem to fail somehow.

My minimum reproducable case is like this:

import { Component, ViewChild } from 'angular2/core';
@Component({
  selector: 'foo',
  template: `<p #x>foo</p>`,
})
export class Foo {
  @ViewChild('x') comp;
  constructor() {}
}

I wonder if something is up on my side, or if something might be up with conversion. Your implementation seems general enough I wouldn't expect it to fail for specific cases like this -- I'm just confused that only this part failed for me. Does it work for you?

Error statement, with plugin info but otherwise non-descriptive:

Module parse failed: ...\node_modules\babel-loader\index.js?{"cacheDirectory":true,"plugins":["syntax-async-functions","transform-regenerator","transform-runtime","add-module-exports","transform-decorators-legacy","angular2-annotations","transform-class-properties","transform-flow-strip-types"],"presets":["es2015","stage-1","stage-0"]}!...\foo.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import _Object$defineProperty from 'babel-runtime/core-js/object/define-property';
|
| var _dec, _dec2, _class, _desc, _value, _class2, _descriptor;

Using this plugin, I been getting an error saying that a token has to be defined. I am wondering if there anything to do about it.

If you see the eslint error, it's caused because babel-eslint doesn't handle parameter decorators properly.

I forked the demo application and attempted to convert that over to Babel 6 for a good example. You can see the code here: https://github.com/jgodi/babel-angular2-app.

I am running into some issues when trying to build the application:

jgodi:babel-angular2-app jgodi$ gulp build
[08:18:19] Requiring external module babel-core/register
[08:18:19] Using gulpfile ~/github/babel-angular2-app/gulpfile.babel.js
[08:18:19] Starting 'copy'...
[08:18:19] Finished 'copy' after 18 ms
[08:18:19] Starting 'build'...
TypeError in plugin 'browserify'
Message:
    /Users/jgodi/github/babel-angular2-app/src/app.js: Cannot convert undefined or null to object while parsing file: /Users/jgodi/github/babel-angular2-app/src/app.js
Details:
    _babel: true
    filename: /Users/jgodi/github/babel-angular2-app/src/app.js
    stream: [object Object]

This is with the following dependencies added/updated:

  "babel": "6.3.13",
  "babel-core": "6.3.17",
  "babel-eslint": "^5.0.0-beta6",
  "babel-plugin-angular2-annotations": "^3.0.3",
  "babel-plugin-transform-decorators-legacy": "^1.3.3",
  "babel-plugin-transform-flow-strip-types": "^6.3.15",
  "babel-preset-es2015": "^6.3.13",
  "babelify": "^7.2.0",
  "babylon": "6.3.20",

and a .babelrc file that looks like this:

{
  "presets": ["es2015"],
  "plugins": [
    "angular2-annotations",
    "transform-decorators-legacy",
    "transform-flow-strip-types"
  ]
}

Any thoughts? If you want you can pull down my fork and see for yourself too. It would be cool to get the sample application updated and running on this, then I will update it to Angular 2 Beta.0.

Thanks!

Upgrade angular dependencies from 2.1.1 to latest

Hi!

First of all, I just want to say thank you so much for this project. A lot of us want the ES goodness of decorators in Angular 2 without having to jump on the Typescript bandwagon. I was so excited to find your project!

Too bad you had to remove parameter decorators. FYI, not sure you saw but parameter decorators are now a stage 0 proposal with TC39. Maybe it's worth a Ping to the babel folks to see if they'll be willing to support parsing them now?

Hannah

Hi

I am creating a workflow using jspm 0.15.7, babel 5.4.7 and angular 2 (alpha 27).
I have the class decorators being processed correctly and now I am attempting to get the constructor parameters to be parsed when using angular 2 $Inject in constructor parameter lists.

so I have installed angular2-annotations and type-assertion using
jspm install XXXXXX -save-dev and my config.js looks like

System.config({
  "baseURL": "./",
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime",
      "es7.decorators"
    ],
    "plugins": [
      "angular2-annotations",
      "type-assertion"
    ]
  }, .........

but I am receiving the following error

Potentially unhandled rejection [3] ReferenceError: Error loading "sb/components/app" at http://localhost:3000/sb/components/app.js
Unknown plugin "angular2-annotations"
    at PluginManager.subnormaliseString (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:9222:13)
    at PluginManager.add (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:9259:27)
    at File.buildTransformers (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:8366:21)
    at new File (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:8233:10)
    at TransformerPipeline.transform (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:12103:16)
    at x.e (http://localhost:3000/jspm_packages/es6-module-loader.js:7:24001)
    at http://localhost:3000/jspm_packages/es6-module-loader.js:7:24475
    at O (http://localhost:3000/jspm_packages/es6-module-loader.js:7:7439)
    at K (http://localhost:3000/jspm_packages/es6-module-loader.js:7:7071)
    at y.7.y.when (http://localhost:3000/jspm_packages/es6-module-loader.js:7:10745)

any advice on how to set up my workflow would be appreciated.

Aidan

Hello @shuhei ,

I have the following code, but http is not recognized inside the constructor, it logs undefined:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { NgRedux } from 'ng2-redux';

import AppStore from 'app/common/components/store/js/store';

@Injectable()
export class UserActions {
  constructor (http: Http) {
    console.log(http);
  }

I want to add that it works really well inside a component. I can't find the reason for that. Do you have any advices?

Many thanks,
Laurentiu