web-dev-qa-db-fra.com

Angular Le module à plusieurs composants ralentit le chargement

Copains.

J'ai trouvé un scénario qui retarde le démarrage de mon module dans Angular 2 . Je ne suis pas un gars d'expérience dans Angular. Ceci est mon premier projet. Donc, je ne savais pas comment gérer ce scénario. S'il vous plaît quelqu'un qui peut m'expliquer à ce sujet.

Scénario: -
J'ai créé une petite application dans laquelle se trouvent divers modules. Chaque module a 2-3 composants secondaires. Mais mes modules SignUp et MyAccount sont le mélange de divers composants. 

Ci-dessous, la hiérarchie de mon application. 

app
--L'extrémité avant
----vidéos
------Détail
-------- videodetail.component.html
-------- videodetail.component.ts
------Liste
-------- list.component.html
-------- list.component.ts
------ videos.component.html
------ videos.component.ts
------ videos.routing.ts
------ videos.module.ts
----article
------ article.component.html
------ article.component.ts
---- front-end.routing.ts
---- front-end.module.ts
---- front-end.component.ts
---- front-end.component.html
--s'inscrire
----la première étape
------ stepone.component.html
------ stepone.component.ts
---- steptwo
------ steptwo.component.html
------ steptwo.component.ts
----troisième étape
------ stepthree.component.html
------ stepthree.component.ts
---- stepfour
------ stepfour.component.html
------ stepfour.component.ts
----final
------ final.component.html
------ final.component.ts
----Un de plus
------ onemore.component.html
------ onemore.component.ts
---- signup.module.ts
---- signup.component.ts
---- inscription.routing.ts
---- signup.component.html app.module.ts app.component.ts app.component.html app.routing.ts

Ci-dessous, le code de routage signup-routing.module.ts pour les enfants.

const routes: Routes = [
    { path: '', component: SignupComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }

Comme demandé ci-dessous est le constructeur de SingupComponent et basecomponent

export class BaseComponent implements OnInit  {
    public SiteConfigurations: SiteConfigurations;
    public options: any
    constructor() {
        this.SiteConfigurations = new SiteConfigurations();
        var currentClass= this;
        window["SetDefaultImage"] = function(){}
        window["SetDefaultImage"]=function (event){
          currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
        };
    }

    ngOnInit() {
      //  this.options = Baser
    }

    SetDefaultImageWithCurrentClass(event,currentClass) {
        event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
    }
    SetDefaultImage(event) {
      this.SetDefaultImageWithCurrentClass(event,this);
    }
}

export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(router: Router, accountService: AccountService) {
    super();
    this.accountService = accountService;
    this.router = router; }

    ngOnInit(): void {
        this.packageType = this.getStepData("packageType");
        this.stepone = this.getStepData("stepone");
        this.steptwo = this.getStepData("steptwo");

        this.options = this.accountService.notificationService.options;
        this.clear = true;
    }
}

Ci-dessous mon code app-routing.module.ts

const routes: Routes = [
    {
        path: '', component: FrontEndComponent,
        children: [
        { path: 'home', loadChildren: './home/home.module#HomeModule' },
        { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
        { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
        { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
    } 
];

Lorsque je lance ma page d'accueil d'application se charge, lorsque je clique sur SignUp pour la première fois, il faut un certain temps pour exécuter le constructeur de signup.component.ts La raison que j'ai trouvée se trouve dans le module d'inscription. composant qui se charge lorsque le module d'inscription est appelé pour la première fois (c'est-à-dire lorsque le fichier de bloc est généré). Le même problème concerne AccountModule, où environ 8 à 10 sous-composants sont utilisés pour afficher des données dans le tableau de bord du compte d'utilisateur.

Il dure environ 2 à 3 secondes avant que le constructeur du composant SignUp et la méthode onInit soient appelés, puis se rendent côté serveur pour extraire des données de la base de données . composant secondaire et ils sont exécutés immédiatement. 

Toute personne connaissant le comportement exact du module/composant et son rendu peut m'aider à résoudre ce problème. Corrigez-moi si je me trompe n'importe où ou laissez-moi savoir si je manque une information pour la décrire mieux. 

Curieux de connaître la raison et la solution pour mieux connaître Angular 

angulartypescriptangular2-template
10
Prashant Kankhara

Si vous sentez que votre application ralentit en raison du grand nombre de composants. Vous pourriez avoir besoin d'essayer le chargement paresseux dans Angular.

Chargement paresseux en action

Ce qui précède est un petit composant chargé paresseux que j'ai développé pour mon application.

Des modules de chargement paresseux nous aident à réduire le temps de démarrage. Avec paresseux le chargement de notre application n'a pas besoin de tout charger en même temps, il n'a besoin que de charger ce que l'utilisateur s'attend à voir lors de la première application charges. Les modules qui sont chargés paresseusement ne le seront que lorsque le l'utilisateur navigue vers ses itinéraires.

Plus en profondeur sur l'utilisation du chargement paresseux Crédits - https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

1
Rahul Singh

S'il vous plaît lire et comprendre sur le chargement paresseux angulaire. Les liens suivants peuvent vous aider à résoudre votre problème. 

https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/

https://medium.com/@leekp/lazy-loading-with-angular-4-29c23792b7f4

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Comme je peux le voir, votre solution comporte un routage pour chaque module. Vous devez les charger comme suit sur app-routing.module.ts 

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'signup', loadChildren: 'sighup/sighup.module#SignUpModule' },
  { path: 'front-end', loadChildren: 'front-end/front-end.module#FrontEndModule' },

];

Cela empêchera l'exécution d'autres modules lors de l'appel du module d'inscription.

Ensuite, le routage d’inscription peut changer comme suit. (cela dépend de votre application)

const routes: Routes = [
    { path: '', component: SignupComponent },
children: [
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }
]
}

également défini pour le module d'inscription dans signup.components.html. 

1
Janith Widarshana