CODEWITHSUNDEEP
angularjstypescriptangular
John Edwards
John Edwards

Reputation: 1546

Angular 2 Setup Issue

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.

Upvotes: 1

Views: 1104

Answers (2)

xiltepin
xiltepin

Reputation: 80

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
  );

Upvotes: 0

John Edwards
John Edwards

Reputation: 1546

Fixed it with the following code.

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

Upvotes: 13

Related Questions