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
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).
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM