TheKojuEffect TheKojuEffect - 4 months ago 162
AngularJS Question

Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"

Here is my first simple

Hello World
angular 2 app from Angular 2 quick start guide.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'ng2-app',
template: '<h1>My first Angular 2 App</h1>'
})
export class AppComponent { }


bootstrap(AppComponent);


The application runs fine when I run with
npm start
but my IntelliJ IDE is showing error in the line with
bootstrap(AppComponent)



Argument type AppComponent is not assignable to parameter type Type


Angular 2 typescript warning

Looking at the
bootstrap
function declaration,
AppComponent
needs to extends
Type
.

export declare function bootstrap(appComponentType: Type, customProviders?: Array<any>): Promise<ComponentRef>;


My question is:

Is it expected for Angular components to extend
Type
?

Answer

Actually, AppComponent is expected to extend Type. So use the following:

// app.component.ts
import { Component, Type } from '@angular2/core';

@Component({
...
...
})
export class AppComponent extends Type {}

This will also follow the expected convention by ng2 for AppComponent (to be bootstrapped).

I am not sure why they didn't cover it in the ng2 tutorials, probably they might be targeting to simplify the initial learning, as it runs even without the extends part.

This works perfectly fine in WebStorm/IntelliJ.

Edit: Alternate solution is to update to Webstorm v2016.2 (which is stable at the time of this comment).

Comments