web-dev-qa-db-fra.com

Angular 4.0.0 n'a pas pu trouver le code d'amorçage

Erreur : J'ai essayé de trouver le code d'amorçage, mais spécifiez un code d'amorçage analysable de manière statique ou transmettez un entryModule aux options du plugin.

main.ts

getHttp().get('/assets/config.json').toPromise()
 .then((res: Response) => {
 let conf = res.json();
 platformBrowserDynamic().bootstrapModule(createAppModule(conf));
})

J'utilise angular-cli. Avec angular v2.3.1, ce code fonctionnait bien.

Je souhaite récupérer json et le transmettre aux fournisseurs de @Ngmodules 

{ provide: Config, useValue: conf }
angularangular2-modules
6
Rohit

Si les données que vous extrayez de config.json correspondent à la configuration d'un module d'application et que vous essayez de créer un service Config pour les stocker, le mieux serait de les affecter à la environment et de les lire ultérieurement dans votre service Config . La environment est disponible dans main.ts, donc aucun piratage (createAppModule) n'est nécessaire.

import { environment } from './environments/environment';
import { AppModule } from './app/';

getHttp().get('/assets/config.json').toPromise()
   .then((res: Response) => {
       let conf = res.json();
       environment.settings = conf;
       platformBrowserDynamic().bootstrapModule(AppModule);
});

Vous devez également déclarer toutes les nouvelles propriétés de environment dans votre fichier src/environments/environment.ts.

3
Ján Halaša

La réponse acceptée ne fonctionnait pas pour moi. Extraire la partie bootstrapModule permettra à Angular de trouver le code d'amorçage.

import { environment } from './environments/environment';
import { AppModule } from './app/';

const bootstrap = () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
};

getHttp().get('/assets/config.json').toPromise()
    .then((res: Response) => {
       let conf = res.json();
       environment.settings = conf;
       bootstrap();
});
3
Niels Steenbeek

La cli tente d’utiliser la compilation à l’avance. Pour cette raison, il doit pouvoir trouver votre NgModule principale.

Habituellement, le compilateur AOT est capable de le faire de manière statique simplement en recherchant les appels bootstrap. Cependant, vous ne démarrez pas immédiatement. Le compilateur a donc besoin de lui indiquer explicitement le nom de votre module d'application afin de pouvoir le compiler, ainsi que tous ses composants.

Solutions

ng eject et configurer manuellement entryModule

La solution recommandée consiste à indiquer à la CLI le nom de votre entryModule. Cela permettra à AOT de fonctionner et de vous donner tous ses avantages. Cependant, le cli ne le supporte pas actuellement (mais il existe un PR pour ajouter une option # 4077 ).

La solution actuelle consiste à utiliser ng eject --aot pour passer à une version manuelle basée sur un pack Web. Ensuite, vous pouvez configurer votre entryModule directement.

  1. ng eject --aot
  2. Ouvrez webpack.config.js et recherchez new AotPlugin
    • Ajoutez ce qui suit et remplacez votre nom AppModule
      entryModule: 'path/to/app.module#AppModule'

Passer AOT

Vous pouvez entièrement ignorer ce problème en utilisant l'indicateur --no-aot si vous avez juste besoin de faire fonctionner une construction. Cela n'est pas recommandé car votre application sera beaucoup plus lente et plus grosse qu'elle ne le serait normalement (elle devra compiler des composants au moment de l'exécution et vous devrez expédier le compilier qui est volumineux).

ng prod --no-aot

2
epelc