[@angular/cli] input decorator is removed when using the AoT build

[aitboudad]

The resolve data doesn't supplies component inputs anymore in AoT build since the last version of @angular/cli as it remove all angular decorators in order to have less bundle size.

I propose to introduce custom decorator for resolve data:

@Component({ ... })
export class App {
    @Resolve() foo;
}

[aitboudad]

angular/angular-cli#4301

[tonimoeckel]

Great idea! I'm facing the same problem on my project. However I gave your Idea a try.
See my commit: Resolve Decorator
But I got stuck. The AoT compiler prints the annoying error:

ERROR in Error encountered resolving symbol values statically. Calling function 'makePropDecorator', function calls are not supported.

I don't know how to get rid of this. I tried to export and wrap the function call, without any success.
@aitboudad I'd appreciate if you could have a look on it.

[christopherthielen]

I really want to use @Input() because it allows components to be agnostic towards being routed or not routed.

[aitboudad]

another approach is to pass the inputs through state config:

    {
        name: 'app',
        component: App,
        resolve: [
            {
-               token: 'app',
+               input: 'app',
                deps: ...
            },
        ],
    },

[christopherthielen]

another approach is to pass the inputs through state config:

That would not allow resolves declared on a parent state to be bound to a (routed) child component. It would have to be mapped on the view level. We already have the bindings: property on a view declaration which serves this purpose. However, making it mandatory would introduce a lot of boilerplate.

    {
        name: 'app',
        component: App,
+        bindings: { app: 'app' },
        resolve: [
            {
               token: 'app',
                deps: ...
            },
        ],
    },

[aitboudad]

AOT already introduced a lot of boilerplate :) so I'm ok with the bindings: property as I think the bundle size is important too (in my case removing decorators shrunk the bundle size by ~170 Kb)

[christopherthielen]

I'd like to point out that in 1.0.0-beta.4 the only workaround is to inject the resolves into the component constructor:

@Component({
})
export class MyComponent {
  constructor(@Inject('myResolve') public resolveData: any) {
  }
}

• or -

@Component({
})
export class MyComponent2 {
  public myResolve: any;
  constructor(transition: Transition) {
    this.myResolve = transition.injector().get('myResolve');
  }
}

[aitboudad]

since bindings is implemented what do you think about adding a new option autoBindings through the config part which will pass all resolved values into the component if the property have the same name of resolved value.

UIRouterModule.forRoot({ autoBindings: true })

[christopherthielen]

I've been considering a similar thing, but how can you tell if a newly constructed component has a property or not?

class FooComponent {
   someInput: string;
}

[aitboudad]

it seems not possible :(

[christopherthielen]

@aitboudad For now I'm going to use your original idea of a Decorator like @ResolveData() resolveInput

I don't like not using @Input(), but this seems like a simple way to manage until Angular comes up with a solution for exposing metadata to for third parties, when we will remove @ResolveData and have users switch back to @Input()

[aitboudad]

It should be solved soon see angular/angular@bd64ab5

[christopherthielen]

@aitboudad that's very promising!

[christopherthielen]

I am going to remove the ResolveData decorator before releasing beta.5 which will support angular 2.x I will then release beta.6 using the inputs as exposed in that commit.