Problem after lazy loader

Hello everybody,

I modified my files to go to the process of lazy loading, but I have a problem with a module extern which displays draughts’s game.

Before to change to lazy loader, the board was display, but now I have the raw data, so the move played in the game.

Here is my index.html where I integrate script of this module :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->
  <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
  <link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/jquery.contextMenu.css' rel='stylesheet' type='text/css'>
  <!--<link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view.css' rel='stylesheet' type='text/css'>-->

  <link href="test.css" rel="stylesheet">
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.easing.1.3_min.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.contextMenu_min_2.3.0.js' type='text/javascript'></script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dcoerterp_view-2.3.8.js' type='text/javascript'> </script>
  <script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dambord.js' type='text/javascript'> </script>


  <script type='text/javascript'>
  function getOptions(appletID)
    {
      var opties = {
          showNotation:false, //montrer la notation près du plateau
          showGameList:false, //si plusieurs parties PDN, une boîte de sélection montrant dessus du plateau
          showSlider:false, //montrer un curseur de la progresssion de la partie sous le plateau
          showContextMenu:true, //Droit sur la carte ne montre pas ou un menu d'options
          showLastMove:false, // Dernier mouvement joué affiché sous le plateau
          closable:false, //L'applet peut être fermé avec X dans le coin supérieur droit
          squareSize: 27, //grootte van 1 speelveld (indirect bepaald dit de grootte van de totale applet
          themeURL: 'http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/pieceimages/', //emplacement où sont les images et le fond
          liveMode:true, //betreft het weergave van partijen die worden ingevoerd via electronische borden of ipads.
          liveRefreshSec: 5,
          playMode:false, //default afspeelmode
          analyseMode:false, //en mode d'analyse, vous pouvez vous mettre à jouer
          isTB:false, //L'applet est affichée via la base tournoi
          borderSize: 15, //épaisseur du bord du plateau
          borderAllAround:false, //plateau bordure sur les côtés de la carte, ou seulement au-dessus et à gauche
          gotoPly:0, //open de stand na zet x, ply 1 is bijv de eerste zet, ply 2 is de eerste witte en zwarte zet.
          m_showNotation : false, //Afficher les options de menu dans le menu peuvent activer ou désactiver l'utilisateur zetnotatie
          m_showNotationPDN : true, //Afficher les options de menu dans le menu: mode d'écran au format PDN ou désactiver
          m_showSourcePDN: true, //Afficher les options de menu dans le menu de l'écran, l'utilisateur peut «chargé PDN dans applet' ou désactiver
          m_showPhotos : false, //menuopties tonen in menu: kan gebruiker de spelerfotos aan- of uitzetten
          m_showLastMove : true, //menuopties tonen in menu: kan gebruiker de laatse zet tonen, aan- of uitzetten
          m_showSlider : false, //Afficher les options de menu dans le menu: l'utilisateur peut activer ou désactiver le curseur de la partie
          m_showFieldNumbers:false, //Afficher les options de menu dans le menu: l'utilisateur peut activer ou désactiver le numéro de champ des champs
          m_showTurnBoard : false, //Afficher les options de menu dans le menu: l'utilisateur peut exécuter l'aide par le menu
          m_takeScreenshot : true, //menuopties tonen in menu: kan gebruiker een screenshot maken van de stand
          m_enableMoveAnimation : true, //menuopties tonen in menu: kan gebruiker kiezen voor simpele vorm van schuiven van de schijven (wel of geen animatie)
          m_playVariations : false, //menuopties tonen in menu: kan gebruiker kiezen om alle varianten in de PDN af te spelen of over te slaan 
          m_startAnalyzeMode : false, //menuopties tonen in menu: kan gebruiker een analyse bord openen vanuit de applet
          m_restoreBoardLocation : false, //Afficher les options de menu dans le menu: L'utilisateur peut définir l'applet à sa place initiale et la taille après avoir traîné 
          m_showFEN : true, //Afficher les options de menu dans le menu: l'utilisateur peut interroger la FEN de la position actuelle du conseil
          m_loadPDN : true, //Afficher les options de menu dans le menu peut charger l'utilisateur PDN dans l'applet
          m_help : true //Afficher les options de menu dans le menu, l'utilisateur peut consulter l'aide
  
      }
      
      var appletDiv = $('#' + appletID);
      
      if (appletDiv.attr('applet_playerimages') && appletDiv.attr('applet_playerimages') == 'true') opties.showPlayerPhotos = true;
      if (appletDiv.attr('applet_full_border') && appletDiv.attr('applet_full_border') == 'true') opties.borderAllAround = true;
      if (appletDiv.attr('applet_square_size')) opties.squareSize = parseInt(appletDiv.attr('applet_square_size'), 10);
      return opties;
    }
  $(function() {
    divs2applet();
  });
  </script>

<link href="build/main.css" rel="stylesheet">
<!--<link href="main.css" rel="stylesheet">-->
</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

my home.html who display a game :

<ion-header>
  <ion-navbar>
    <ion-title text-align="left">
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg">
  <ion-card tappable (click)="navigate()">
    <ion-card-content>
      <ion-card-title>
        aaaaaaaaaaaa
      </ion-card-title>
      <p>
        aaaaaaaaaaaaaaa
      </p>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-card-title>
        LIVE
      </ion-card-title>
      <p>
        dddddddddddddddd
      </p>
    </ion-card-content>

   <div class='applet'>
   [Event "Nationale Clubcompetitie KNDB 2013/2014"]
    [Site ""]
    [White "sfsfsf"]
    [Black "hshshsh"]
    [Result "0-2"]
    [GameType "20"]
    [Round "8"]
    [Date "2014.01.11"]
    [WhiteTime ""]
    [BlackTime ""]
    [WhiteUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=1069"]
    [BlackUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=3073"]
    [WhitePhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/1069.jpg"]
    [BlackPhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/3073.jpg"]
    [WhiteFlagUrl "http://toernooibase.kndb.nl/Clublogos/CEMA - De Vaste Zet Geleen.gif"]
    [BlackFlagUrl "http://toernooibase.kndb.nl/Clublogos/WSDV Wageningen.gif"]
    [WhiteRating "1026"]
    [BlackRating "3208"] 
    1. 34-30 20-25 2. 31-27 25x34 3. 39x30 17-21 4. 44-39 21-26 5. 50-44 11-17 6. 30-25 19-24 7. 27-21 16x27 8. 32x21 14-20 9. 25x14 10x19 10. 21-16 5-10 11. 37-31 26x37 12. 41x32 6-11 13. 40-34 10-14 14. 44-40 18-23 15. 34-29 23x34 16. 40x20 15x24 17. 49-44 12-18 18. 47-41 8-12 19. 41-37 4-10 20. 46-41 10-15 21. 44-40 18-23 22. 32-28 23x32 23. 37x28 12-18 24. 39-34 7-12 25. 16x7 2x11 26. 41-37 14-20 27. 37-32 1-7 28. 42-37 9-14 29. 37-31 3-9 30. 34-29 20-25 31. 29x20 15x24 32. 43-39 11-16 33. 31-26 18-22 34. 32-27 22x31 35. 36x27 24-29 36. 33x24 19x30 37. 35x24 16-21 38. 27x16 7-11 39. 16x18 13x35 40. 24-20 25-30 41. 20-15 30-34 42. 38-33 9-13 43. 48-42 13-19 44. 42-37 19-24 45. 33-28 35-40 46. 26-21 17x26 47. 28-22 40-44
   </div>
  </ion-card>
</ion-content>

That’s what should be displayed :
38

But I have that :

I don’t understand what has changed about this module with lazy loader.

Thanks for your help.
Husko

@Husko Inside your div there is just text. Probably your javascript in index.html changes the information into the game. I don’t know exactly what the function divs2applet() does, but if it needs that the div with the applet class be already created, maybe you should try to call it inside your homepage component (because the component is still not created when you call the function in index.html).

In home.ts:

declare var divs2applet;

@Component(...)
export class Home {
	...
	ngOnInit() {
		divs2applet();
	}
	...
}

Also, it would be good to make the div invisible until the game is loaded (so that the text is not shown right after the page is shown, before the game is loaded, unless the divs2applet() already handles that).

A big thank you lucasbasquerotto !!!
Your proposition is good :tada: