web-dev-qa-db-fra.com

Angular 2 bootstrap donne l'erreur "Le type d'argument AppComponent n'est pas assignable au type de paramètre Type")

Voici mon premier simple Hello World angular 2 de Guide de démarrage rapide Angular 2 .

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

L'application fonctionne correctement lorsque j'exécute avec npm start Mais mon IntelliJ IDE affiche une erreur dans la ligne avec bootstrap(AppComponent)

Le type d'argument AppComponent n'est pas attribuable au type de paramètre Type

Angular 2 TypeScript warning

En regardant la déclaration de fonction bootstrap, AppComponent doit étendre Type.

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

Ma question est:

Est-il prévu que Angular étendent Type?

javascriptangulartypescriptintellij-idea
44
TheKojuEffect

En fait, AppComponent devrait étendre Type . Utilisez donc ce qui suit:

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

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

Cela suivra également la convention attendue par ng2 pour AppComponent (à amorcer).

Je ne sais pas pourquoi ils ne l'ont pas couvert dans les tutoriels ng2, ils pourraient probablement viser à simplifier l'apprentissage initial, car il fonctionne même sans la partie étend.

Cela fonctionne parfaitement dans WebStorm/IntelliJ.

Edit: Une autre solution consiste à mettre à jour vers Webstorm v2016.2 (qui est stable au moment de ce commentaire).

10
jsNovice

Je suis tombé sur cela dans Intellij 2016.1.2, avec la démonstration Angular quickstart. Définir les options suivantes dans IDE a aidé:

enter image description here

52
JockX

l'ajout de commentaires/annotations comme indiqué ci-dessous résout le problème

//noinspection TypeScriptValidateTypes
bootstrap(AppComponent);
14
Otari

La réponse ci-dessus n'a pas fonctionné pour moi. J'ai pu le réparer en faisant ce qui était recommandé dans les commentaires ci-dessus.

bootstrap(<any>AppComponent);

J'utilise Intellij 14.1.5

11
Kris Hollenbeck

Cette erreur d'introduction due au compilateur TypeScript n'est pas activée dans votre IDE. vous devez activer le compilateur TypeScript.

Activez le compilateur TypeScript dans Webstorm:

allez dans le menu Webstorm (menu en haut à gauche) => menu Préférences => Langues & Frameworks => cliquez sur TypeScript => Activer le compilateur TypeScript (cochez la case) => activez l'option Use tsconfig.json => cliquez sur Ok bouton et vous avez terminé.

enter image description here

1
Mukund Kumar

Webstorm 2016.1.3 la solution ci-dessus fonctionne pour moi

Paramètres -> Langage et cadres -> TypeScript: activez TypeScript, utilisez tsconfig.json

PS: il s'agit de la même solution que celle décrite précédemment pour la version Webstorm précédente (2016.1.3)

1
Pumych

IMO changer le code partout juste pour que WebStorm/IntelliJ ne se plaint pas n'est pas une solution viable. Comme j'ai un processus de regroupement/compilation séparé, j'ai plutôt désactivé les opérations d'IntelliJ sur TypeScript: Paramètres-> Langues-> TypeScript - décochez les options là-bas. Si c'est déjà le cas pour vous, vous pouvez essayer de vérifier les options, d'appliquer et de décocher à nouveau.

Vous pouvez voir que c'est encore un peu bogué. Par exemple, après avoir fait un changement de nom de classe en utilisant IDE (SHIFT + F6), les erreurs sont retournées. La répétition de ce qui précède les a à nouveau supprimées.

Utilisation d'IntelliJ 15.0.2

1
Erez Cohen

Pour le nouveau routeur angular2 je devais faire ..

bootstrap(AppComponent [
    <any>APP_ROUTER_PROVIDERS
    ]).catch((err:any) => console.error(err));

REMARQUE any est utilisé sur APP_ROUTER_PROVIDERS et non AppComponent.

0
danday74