ngupgraders / ng-forward Goto Github PK

Let's say i have an old angular module X which has a service A.
Now i want to write a service B which gets the service A injected.
I need essentially something like providers in the components annotation but there isn't something like this.

When i try to write

@Inject('X','A')
class B {
}

I get

Error: [$injector:unpr] Unknown provider:AProvider

Love the repo name by the way!

So I thought it would be helpful if we all reviewed all the libraries and provide general opinions on how we should implement the new library. I realize I am the loser who didn't write any libraries so I do not pretend to deeply know or understand the detailed problems and solutions that you guys have run into. But I've used one of the libraries extensively, so I'll simply play the role of 'user'. Without your pioneering works we would not be where we are, so good on you all!

Based on how there is a lot of similarity between the libraries and the fact that our goal is very clear (make it work like ng2 as much as possible), I think this actually won't be all that controversial.

I think we'll have better luck if we do our design in a google doc, just because github issue threads can get loooooong. Also the doc is easier to edit and keep organized.

Here's the doc: https://docs.google.com/document/d/1oq0T0-jicGzc5uYJc0LE1ZBHm0w1lhVB4IVqUPXWSCg/edit?usp=sharing

Please add points to each library as you review them (if you get the time), otherwise just add some points about your own library.

Edited: I removed the previous issue as I solved it, however I have a new one.

I have module.provider() that I use to wrap JS libraries and make them injectable. I can not figure out how to use provider in ng-forward I just get Uncaught TypeError: Cannot call a class as a function when I try to use @Provider('JSONEditor', {useClass: JSONEditorProvider})

Do I have to use provide instead?

Ng-forward does a lot behind the scenes.
When things don't work out as expected it may be hard to understand what the problem is.
I wanted to discuss how to tackle the troubleshoot

see: angular/angular@6864578

Hi,

What is the equivalent of module.config and module.run function?
For example, where do i configure the $stateProvider of the ui-router. In the traditional angular1 syntax i configure it in the config function.

Thanks,
David

We need to add component tests to the todo mvc example that Pete made.

I recognized that the README is already quite lengthy and there are tons of features hidden in the codebase that are not yet documented. How about opening a wiki for this project to get the docs a little bit more structured? I also would like to contribute to the docs once I figured out myself how to use the ui-router state decorators that I found in the codebase :)

Because when I discovered this project I was all amazed on being able to get rid of angular modules in my code as well as the ability to use the new angular template binding syntax. Really cool stuff :) So I already have MikeRyan52's decorators implemented and then started wondering: No more modules.. how am I going to configure my ui-router states? Taking a quick look at the codebase I saw that there is decorator for this. Yay! So to make this easier for future users I would be glad to help out adding docs and improving docs, but I think stuffing it all into the README will not be feasible in the long run.

@MikeRyan52 Could you add a notice to your angular-decorators project that makes people know about ng-forward? Because I didn't know this successor project until watching the angular-connect talk where it is mentioned.

see: angular/angular@ca3986f

Hi all,

In angular1 we were used in jasmine to require the classes with:

beforeEach(function() {


        module('x');
         inject(function (_y_) {
             y = _y_;
         });
    });

In ng-forward all objects live in a big module.
How do i get to this module?

I could theoretically import the classes myself, but then i would have to make all dependency injection myself which is not so nice.

Any thoughts?

Thanks,
David

I have a spike put together for semi-dynamic events: https://github.com/ngUpgraders/ng-forward/blob/master/src/util/events.js

When you declare custom events on your component, a special [on-${event}] directive is created. These onEvent directives function similarly to the existing [ng-${event}] directives. Two questions:

1. Do we like this approach for custom events?
2. Do we provide component controllers with an event emitter similar to Angular 2?

Is ng-for available ?
If not would it be possible to create this ?

Tried to get this working with jspm but can't figure out a way to make it run.

jspm-config-override

"npm:[email protected]": {
        "peerDependencies": {
          "angular": "^1.4.0"
        },
        "shim": {
          "dist/index": [
            "angular"
          ]
        }
      }

results in

Uncaught Uncaught TypeError: Object.defineProperty called on non-object
    Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/index.js
    Evaluating http://localhost:8081/jspm_packages/npm/[email protected]
    Error loading http://localhost:8081/bootstrap.js
  (anonymous function)  

because the way jspm loads it, there is no exports defined.

If I don't specify the angular dependency as shim config

"npm:[email protected]": {
        "peerDependencies": {
          "angular": "^1.4.0"
        }
      }

there is no global angular there

Uncaught Uncaught Uncaught ReferenceError: angular is not defined
    Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/util/jqlite-extensions.js
    Evaluating http://localhost:8081/jspm_packages/npm/[email protected]/dist/index.js
    Evaluating http://localhost:8081/jspm_packages/npm/[email protected]
    Error loading http://localhost:8081/bootstrap.js
  (anonymous function)  

So maybe I'm just missing the obvious here, but shouldn't ng-forward explicitly import angular when it needs angular instead of relying on it being there as a global?

Hi all,

ng-submit doesnt look equivavlent to (submit).
My problem was that when i have a function (submit)="doSomething() it is called multiple times.
This also makes some sense, because if it is a simple directive then it is a part of the digest cycle and scope inheritance (My explaination).
Therefore it is still unsafe to use this.

Thanks,
David

We should consider creating special directives to replace all the common angular 1 directives, but where they look like element property binding is working. It would of course be a ruse. This only included non-template directives (so things like ng-repeat, ng-if, ng-include are not included here).

ngBind -> [textContent]
ngBindHtml -> [innerHTML]
ngClass -> [class]
ngChecked -> [checked]
ngDisabled -> [disabled]
ngShow, ngHide -> [visible]
ngModel -> [value]
ngReadOnly -> [readOnly]
ngSelected -> [selected]
ngSrc -> [src]
ngSrcSet -> [srcSet]
ngStyle -> [style]

How may i migrate a directive with transclusion?
Will ng-forward support the content tag like in angular2?
If not what will be the preferred solution?

I have a parent directive and child directive
In the child directive i need to call a function of the parent
In angular1 i simply require the controller of the parent directive and call it
How would i do it with ng-forward ?

angular/angular#4566

ES5 lacks support for decorators and it is missing a class keyword. This issue exists to track proposals for ES5 support in ng-forward.

I suggest trying to emulate Angular 2's ES5 syntax:

var MyComponent = ngForward
  .Component({
    selector: 'my-component',
    outputs: ['myEvent']
  })
  .class({
    myEvent: new ngForward.EventEmitter(),
    constructor(){ }
  });

ngForward.bootstrap(MyComponent);

Hi,

This feature would be cool.

Take a look at angular, there we have an indication if the build fails or not.
https://github.com/angular/angular

BR,
David

The resulting JavaScript file of the build comes without source maps
Would be great to add this

Hi all,

I get the following error message:
"Uncaught Error: One or more of your providers was not valid. Please make sure all providers are either: a class, decorated class, Provider instance, or module string"

"groupModulesAndProviders @ group-modules-providers.js:34
bundle @ bundle.js:70
391../prmMissingTranslationHandler.factory @ prmTranslate.module.ts:7
s @ _prelude.js:1
(anonymous function) @ _prelude.js:1
294../appConfig/appConfig.module @ app.ts:10
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous function) @ _prelude.js:1"

This is too unspecific.

I need to know which provider had the problem.

Hi,

I am getting the following error:

Uncaught ReferenceError:
Reflect is not defined_map @ metastore.ts:7
get @ metastore.ts:15
(anonymous function) @ providers.ts:20
(anonymous function) @ inject.ts:44
(anonymous function) @ a.service.ts:2
__decorate @ a.service.ts:2
(anonymous function) @ a.service.ts:7
124.ng-forward @ a.service.ts:32
s @ _prelude.js:1
...

It comes from the @Injectable annotation.

I cannot check the case more, because somehow chrome cannot get the source code of metastore.
Maybe something is bad with the source map?

This issue is here to discuss how a decorator could look like and work under the hood to enable routing to components with ui-router.

Most recent (and thus valid) information about the component router can be taken from the talk of Brian Ford and the corresponding slides:
https://www.youtube.com/watch?v=z1NB-HG0ZH4
https://docs.google.com/presentation/d/1bGyuMqYWYXPScnldAZuxqgnCdtgvXE54HhKds8IIPyI/edit#slide=id.

Component router aims to be universal for ng1/ng2. I don't know the exact release plans. Maybe in the near future the component router will be available for ng1 but still I think there is some value in being able to use ui-router with ng-forward and the component oriented approach.

Hello all guys,
I don't know if that problem was already solved (i've take a look on the previous bugs but there is nothing on that).

So I've created a component like that:

<my-component [(data)]="serverData"></my-component>

serverData is updated from clickEvent or after n minutes and inside my component I've:

$scope.$watch('je.data', (n) => { 
 //perform action
});

Obviously it's a failure point for angular 2.0. How I can avoid that?

tnx

There are modules where we need to pass in names of factories to their functions:
For example angular translate let you pass

• useMissingTranslationHandler
• useInterpolation

For more information look here:
https://github.com/angular-translate/angular-translate/wiki/Error-Handling

Now the problem comes that if i write the syntax in the angular2 style i don't have a name anymore.
If we don't have uglification everything goes ok

if we have uglification:

Let's say i have a class called Foo
The name of Foo is then changed to e.
I lost the name.
What can i do?

With property bindings, we should probably add a list of core directives for common element properties. I know there is a list somewhere of native properties supported in the Angular 2 codebase.

Covers scenarios like:

<input type="text" [disabled]="myComponent.disabled">

I'm trying to include ng-forward in my TypeScript 1.6 project, but import results in errors.

This is my .ts file:

import {Component} from '../../../node_modules/ng-forward/cjs/index';
@Component({
    selector: 'test',
    template: `<div onclick="test()"></div>`
})
class Test{
    test() {
        console.log("test")
    }
}

This is my tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "preserveConstEnums": true,
        "experimentalDecorators": true
    }
}

And those are errors from gulp-typescript:

<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(2,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(11,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(11,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(13,18): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(14,14): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(15,17): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(16,15): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(17,12): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(18,13): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(19,11): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(20,16): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(21,23): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(23,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(28,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(28,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(30,14): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(31,17): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(32,11): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(33,16): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/component.d.ts(34,23): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(2,4): error TS1131: Property or signature expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(4,3): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(4,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(6,15): error TS1109: Expression expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,2): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,4): error TS1128: Declaration or statement expected.
<project_path>/node_modules/ng-forward/cjs/decorators/directive.d.ts(7,23): error TS1109: Expression expected.

To be consistent with recent Angular 2 change: angular/angular@1eb0162

Hello !

I like the idea behind ngForward (writing angular 2 code for ng1 is awesome), but I think that it would be more suitable as a build step, maybe as a babel plugin.
Do you think that it's something that could be done ?

This way you would write ng2 code, compile & get ng1 code on the otherside, no need to load the ngForward library along with angular.

The annotations are missing.
The workaround in the meantime are the input and output properties of the @component annotation

In Angular 2, [(ng-model)]="prop" desugars to [ng-model]="prop" (ng-model-change)="prop=$event".

Alter our current two way binding to behave more similarly to this.

Now that we have working events we can simulate Angular 2 style events using this syntax:

<my-component on-event="doSomething($event)"></my-component>

and thanks to some work by @timkindberg and @mitranim, we now support three types of property binding: text value, one way, and two way:

// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component bind-color="color"></my-component>
// Bind two way:
<my-component bind-on-color="color"></my-component>

With these building blocks in place I was taking a look through the source for Angular's $compile service and noticed that it doesn't strip non-alphanumeric characters from scope bindings or directive names. To demonstrate I've created a new branch called proposal/template-syntax that changes both the event and properties builders so that the above examples could be rewritten like this:

// Events
<my-component (event)="doSomething($event)"></my-component>
// Bind text:
<my-component color="red"></my-component>
// Bind one way:
<my-component [color]="color"></my-component>
// Bind two way:
<my-component [(color)]="color"></my-component>

While the previous syntax would have worked just fine when ported over to Angular 2 (brackets and parens are just syntactic sugar for bind-${prop} and on-${event}, respectively) it is pretty verbose and would be cumbersome to write out for components with a large property/event API.

The only issue is that it would require a good bit of overhead to support both on-*/(*), bind-*/[*], and bind-on-*/[(*)]. It would be best to to choose one syntax to support for v1 of ng-forward.

Is possible to have that in Typescript?

Hi,

ng-if in angular2 is written either *ng-if or [ng-if]
https://github.com/angular/angular/blob/d32f58926dd15a5771f5e3a3c2b77ea41c03b98b/modules/angular2/src/directives/ng_if.ts

How are the plans for ng-forward?

The same question is for ng-class.

Thanks,
David

I am wondering if it makes sense to provide a decorator for the ng1 config phase. AFAIK in ng2 the config phase doesn't exist so a decorator might just be there for migration.

Right now all config stuff would be moved to the the nearest top module where it would be appropriate to bundle() a module. I'd rather like to have a solution where the config code stays close to the service it belongs to. On the other hand I'm a bit confused what will happen to all this config-code in ng2? Where will this kind of things happen?

I believe that on this line https://github.com/ngUpgraders/ng-forward/blob/master/src/util/events-builder.js#L23 we need to be using CustomEvent not Event for the detail to be passed through.

How would we like to configure ng-forward? There are various options I think that we may like to provide to devs. Some examples are:

• ability to choose a global controllerAs name for the 'vm' fans out there
• ability to use either (click) or on-click syntax in templates (since doing both is too much overhead)

Hi,

I don't know if this is a problem with angular sanitize or ng-forward but it does not recognize the (click) attribute.

I renamed ng-click="" to (click)=

I get

Error: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.
at Error (native)
at forEach.attr
at Object.JQLite.(anonymous function) [as attr]
at Object.$$sanitizeUriProvider.$get.Attributes.$set
at http://localhost:8000/primo-explore/lib/bundle.js:52302:15
at forEach
at mergeTemplateAttributes
at applyDirectivesToNode
at compileNodes
at compileNodes

I am using angular-sanitize 1.4.7

Please let me know if i should continue this here or open a defect to angular-sanitize.

Thanks,
David

Hi all,
I've created a component:

$scope.onCustomEvent = function (properties, promise) {
            if (properties == 'image') {
                promise.resolve('url');
            }
        };

<json-editor [(data)]="dataMock"  (on-custom-event)="onCustomEvent" >

In my component I do:

@Component({
    selector: 'json-editor',
    events: [],
    inputs: ['data','onCustomEvent']
})
export default class JsonEditor {
  onCustomEvent;
  constructor() {
   new PluginInitializer(this.onCustomEvent);
  }
}

but this.onCustomEvent is undefined.
What is the right way to pass it? I missed something?
thanks.

Given this example:

<parent>
  <child [some-prop]="parent.value"></child>
</parent>

When parent.value is initialized to an empty string, on first read the value comes back as undefined. Additionally, if the child writes to its someProp property, any changes made are destroyed on the next $digest cycle. While this may sound correct, proper behavior would be to keep the changes locally to child until parent updates the value, not on every $digest cycle.