web-dev-qa-db-fra.com

Angular 5: impossible de résoudre tous les paramètres du composant

J'ai rencontré un problème avec l'injection de services dans angular 5 comme dans le tutoriel.

J'ai un service simple

@Injectable()
export class SimpleService {
    ...
}

Et un composant simple:

@Component({...})
export class SimpleComponent {
    constructor(private simpleService SimpleService) {}
}

Un service est défini sur providers dans le module:

@NgModule({
    ...
    providers: [SimpleService]
    ...
})
export class SimpleModule {}

Je vois l'erreur suivante dans la console:

Error: Can't resolve all parameters for SimpleComponent

Cependant, si j'injecte le SimpleService avec @Inject comme

@Inject(SimpleService) private simpleService: SimpleService

l'erreur disparaît.

Qu'est-ce que je fais mal?

MISE À JOUR: J'ai vu plusieurs réponses où les gens conseillent d'ajouter emitDecoratorMetadata: true au fichier tsconfig. Mais cette ligne est déjà là

dependency-injectionangular5
9
Andy J.

Il s'est avéré que la raison de cette erreur était une importation incorrecte de polyfills.ts. Auparavant, j'avais éjecté mon application cli et supprimé le point d'entrée polyfills de ma configuration webpack. Après cela, je les ai importés dans mon main.ts. Mais j'ai importé des polyfills après avoir importé AppModule. Après avoir déménagé import './polyfills.ts' instruction en haut du fichier, l'erreur a disparu.

Une autre option pour corriger cette erreur passe à la compilation AOT:

module: {
    rules: [
        ...
        {
            "test": /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
            "use": [
                "@ngtools/webpack"
            ]
        }
    ]
}
plugins: [
    ...
    new AngularCompilerPlugin({
        mainPath: 'main.ts',
        platform: PLATFORM.Browser,
        hostReplacementPaths: {
            'environments/environment.ts': 'environments/environment.ts'
        },
        sourceMap: true,
        tsConfigPath: 'src/app/tsconfig.json',
        skipCodeGeneration: false // this line is responsible for AOT
    })
]

Si vous utilisez la compilation AOT à la place de JIT, vous n'aurez pas besoin de emitDecoratorMetadata dans votre tsconfig.

6
Andy J.

J'ai eu un problème similaire et cela peut aider les autres, car c'était la correspondance la plus proche que j'ai trouvée lors de la recherche.

J'ai eu une erreur dans ma fonction constructeur. J'ai oublié de déclarer le type de service:

J'avais écrit:

constructor(
    private myService
){}

au lieu de:

constructor(
    private myService: MyService
){}
0
ndvo