Angular 2 Setup Issue

Question

I am trying to get an angular 2 app working and am having some problems with the upgrade adapter.

Here is my code:

boot.ts

/// <reference path="..\..\typings\main.d.ts" />

import {bootstrap}    from 'angular2/platform/browser' 
import {UpgradeAdapter} from 'angular2/upgrade';
export const upgradeAdapter = new UpgradeAdapter();
import {AppComponent} from './app.component';
bootstrap(AppComponent);


angular.module('app', []).directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));

This code is throwing the following exception when I try to compile it with my typescript gulp action.

gulp : src\app\boot.ts(11,46): error TS2345: Argument of type 'Function' is not assignable to parameter of type 'any[]'. At line:1 char:1 + gulp compile-ts + ~~~~~~~~~~~~~~~ + CategoryInfo : NotSpecified: (src\app\boot.ts...f type 'any[]'.:String) [], RemoteException + FullyQualifiedErrorId : NativeCommandError

Property 'push' is missing in type 'Function'.

Now if I create a directive manually like this in boot.ts, the error doesn't occur.

angular.module('app', []).directive('tabsPane', TabsPane);


function TabsPane(itemTabs) {

    return {
        restrict: 'E'
    };


}

So obviouslly something is happening in upgradeAdapter.downgradeNg2Component(AppComponent), but I cannot figure out what.

It seems there is just a type issue between downgradeNg2Component returning "any", and directive() expecting a IDirectiveFactory, but this is the exact format from the angular 2 sample, so I don't know what else to try.

Any ideas? Thanks.

John Edwards · Accepted Answer · 2016-01-22 20:03:02Z

13

Fixed it with the following code.

angular.module('app', []).directive('myApp', <angular.IDirectiveFactory>adapter.downgradeNg2Component(AppComponent) );

answered Jan 22, 2016 at 20:03

John Edwards

1,5463 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xiltepin · Accepted Answer · 2016-10-06 02:43:49Z

0

Following the Angular Docs the correct answer to your question would be this one. Applies to RC6, 2.0.1 and 2.0.2.

angular.module('app')
  .directive(
    'myApp',
    upgradeAdapter.downgradeNg2Component(AppComponent) as    angular.IDirectiveFactory
  );

edited Oct 6, 2016 at 2:43

answered Oct 6, 2016 at 2:16

xiltepin

801 silver badge7 bronze badges

1 Comment

disappointed in SO leadership Over a year ago

Aside from how the upgradeAdapter is cast to an IDirectiveFactory, is there any difference between this answer and the answer provided almost 10 months ago by the OP?

Collectives™ on Stack Overflow

Angular 2 Setup Issue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related