{"id":957,"date":"2019-02-07T15:14:07","date_gmt":"2019-02-07T12:14:07","guid":{"rendered":"https:\/\/global.bg\/en\/?p=957"},"modified":"2019-02-07T16:38:33","modified_gmt":"2019-02-07T13:38:33","slug":"a-way-to-hook-to-the-initialization-of-the-angular-application-part-i","status":"publish","type":"post","link":"http:\/\/global.bg\/en\/a-way-to-hook-to-the-initialization-of-the-angular-application-part-i\/","title":{"rendered":"Download of a third-party JavaScript library and a way to “hook” to the initialization of the Angular application. Example with Analytics.js. Part One."},"content":{"rendered":"\n

For a while, in my professional work, I have been developing software applications using Angular<\/em>. In a few cases I have faced questions about how one or another thing could be achieved and I have not found a quick and unambiguous answer for myself. In this post I will discuss two interesting topics of this nature:<\/p>\n\n\n\n

  1. How\ndynamically, from Angular<\/em>, to\n“download” in the app third-party JavaScript libraries<\/li>
  2. How to\n“hook” to the initialization process of an Angular<\/em> application and run our own script<\/li><\/ol>\n\n\n\n

    For illustration purposes I have written a sample application that I will quote in several places in the post.<\/p>\n\n\n\n

    The code for the\nexample application is available at: https:\/\/github.com\/agyonov\/NgInitGA<\/a><\/p>\n\n\n\n

    The app itself is live on: https:\/\/agyonov.github.io\/NgInitGA<\/a><\/p>\n\n\n\n

    Dynamic download of a third-party\nJavaScript library<\/h2>\n\n\n\n

    For most libraries that you would like to use, someone has already created, developed and maintains a NPM package with the relevant Angular<\/em> modules and you could (and should) use them. But sometimes there is no ready NPM package or you may not like the one that is available. In this case you can directly reference the requested JavaScript library from your Angular<\/em> application and use it.<\/p>\n\n\n\n

    There are two easy approaches that are described in the Angular<\/em> documentation and, for example, in Google Analytics<\/em>. And which don’t always do the job for one reason or another.<\/p>\n\n\n\n

    1. The first<\/strong>, entirely Angular<\/em>, solution is to download the corresponding .js file from the Internet. Add it to your project and place a reference to the .js library in the scripts array, in the angular.json<\/em> config file. E.g:<\/li><\/ol>\n\n\n
      \n\u2026\n\"scripts\": [\n              \"src\/scripts\/analytics.js\"\n            ]\n\u2026\n<\/code><\/pre>\n\n\n
      This is described in detail in the documentation of Angular<\/em><\/a>. <\/p>\n\n\n\n
      It’s an OK approach and will work.<\/p>\n\n\n\n
      A consideration<\/strong> against its possible use is that under this approach is that the .js script will be download from your hosting server and not from the original server (in this case https:\/\/www.google-analytics.com\/analytics.js<\/a>). And the question is not so much in increased traffic to your site and performance issues, but in that the author of the library (Google) could change things in it, have new versions, etc., and you will not have this new version until you re-build and re-publish your app.<\/p>\n\n\n\n
             2 . The second<\/strong> approach is to apply the instruction on the Google    Analytics page<\/a><\/em>: <\/p>\n\n\n
      \n<script>\nwindow.ga=window.ga || function(){(ga.q=ga.q||[]).push(arguments)};\nga.l=+new Date;\nga('create', 'UA-XXXXX-Y', 'auto');\nga('send', 'pageview');\n<\/script>\n<script async src='https:\/\/www.google-analytics.com\/analytics.js'>\n<\/script>\n<\/code><\/pre>\n\n\n
      <\/p>\n\n\n\n
      And the above code to be\npasted directly into the index.html<\/em>\nfile initializing your Angular<\/em>\napplication. In particular, the last\nline of the above sample code.<\/strong><\/p>\n\n\n\n
      It’s OK as an approach and will also work in its part to download the .js library<\/strong>. In addition, the objections which were valid for the first decision are irrelevant.<\/p>\n\n\n\n
      A consideration<\/strong> against its possible use is stylistic \u2013 it is not a “clean” Angular<\/em> solution.<\/p>\n\n\n\n
      The rest of the code snip from Google Analytics<\/em>, shown above, does not work for us at all<\/strong>! Because with Angular<\/em> we have a Single Page Application<\/strong> (SPA) where, unlike traditional web applications, in reality only the first page is loaded from the Web server and subsequently every transition from page to page, occurs only inside the SPA application in the browser. Also, if we have any special events (e.g. button press) they as well occur inside the Angular<\/em> app and will not affect the data in Google Analytics<\/em>.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      These issues are discussed in detail in the Google Analytics<\/em> documentation itself under the Single Page Application Tracking<\/a> topic.<\/p>\n\n\n\n
                3. Let’s get back to the issue with the dynamic download of the JavaScript library. There is a third <\/strong>method that I will look at. Because the example is using Google Analytics<\/em>, I’ll expand it to be used to track users\u2019 actions in the Angular<\/em> app.<\/p>\n\n\n\n
      Note<\/strong>: As for tracking of users in Angular<\/em> application, it has great, ready-made libraries, such as angulartics2<\/a>, which you can use. Here the question is not to create another such library, but to illustrate with an example a possible solution to the two questions set at the beginning of this post!<\/p>\n\n\n\n
      So, the dynamic download. Let us see a sample of the following Angular<\/em> service:<\/p>\n\n\n
      \n\u2026\n\/\/ Typescript extention of Window interface\ndeclare global {\n  interface Window { ga: any; }\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class GoogleAnalyticsService {\n\n  \/\/ The source for the load\n  private googleAnalyticsScript= {\n    loaded: false,\n    url: 'https:\/\/www.google-analytics.com\/analytics.js'\n  };\n\n  constructor(@Inject(PLATFORM_ID) private platformId: Object,\n    @Inject(DOCUMENT) private dom: Document) {\n  }\n\u2026\n  \/\/ Init the GA infrastructure\n  public loadScript(): void {\n    \/\/ Check already loaded\n    if (!this.googleAnalyticsScript.loaded) {\n      \/\/ Check if we are at browser\n      if (isPlatformBrowser(this.platformId)) {\n        \/\/ Create new scipt element\n        const scriptElm: HTMLScriptElement = this.dom.createElement('script');\n        scriptElm.src = this.googleAnalyticsScript.url;\n        scriptElm.type = 'text\/javascript';\n        scriptElm.async = true;\n        scriptElm.onload = () => {\n          \/\/ Prevent from load second time\n          this.googleAnalyticsScript.loaded = true;\n        };\n\n        \/\/ Define GA object\n        window.ga = window.ga || function () { (window.ga.q = window.ga.q || []).push(arguments); };\n        window.ga.l = +new Date;\n\n        \/\/ Set some Google Analytics stuff\n        window.ga('create', environment.propertyID, 'auto');\n\n        \/\/ Add to document\n        this.dom.body.appendChild(scriptElm);\n      }\n    }\n  }\n}\n<\/code><\/pre>\n\n\n
      Basically, it’s a\ntranscription in TypeScript<\/em>, of the\ninstructions from the Google Analytics<\/em>\npage, which we have above. The important points are:<\/p>\n\n\n\n
      • Only in the beginning we expand the TypeScript Window<\/strong><\/em> interface with a new field-‘ga’<\/li>
      • In the ‘loadScript’<\/em> method, the actual work is done:
        • A scriptElm<\/em> script element is created and is dynamically added to the DOM of the Web page. It’s the same as putting:<\/li><\/ul><\/li><\/ul>\n\n\n
          <script async src='https:\/\/www.google-analytics.com\/analytics.js'><\/script><\/code><\/pre>\n\n\n
          in\nindex.html<\/em>.<\/p>\n\n\n\n
          • Definition of the ‘ga’ field with which the Window<\/em><\/strong> interface is expanded, as specified by Google Analytics<\/em>. It’s the same as putting:<\/li><\/ul>\n\n\n
            <script>\nwindow.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};\nga.l=+new Date;\nga('create', 'UA-XXXXX-Y', 'auto');\n<\/script>\n\n<\/code><\/pre>\n\n\n
            in index.html<\/em>.<\/p>\n\n\n\n
            And voila!<\/p>\n\n\n\n
            \ud83d\ude0a well not quite… Still, the ‘loadScript<\/em>‘ method should be invoked,\nsomewhere from the Angular<\/em>\napplication and cause the browser to start the download of the JavaScript\nlibrary. And here we come to the second question:<\/p>\n\n\n\n
            How to \u201cHook\u201d to the initializing of an Angular application<\/h2>\n\n\n\n
            But this post is already a bit long. I guess it’s time to finish this first part. For “hooking” to the initialization of the Angular application, check \u00a0part two.<\/p>\n\n\n\n
            Author: Aleksandar Gyonov<\/p>\n\n\n\n
            Stay tuned for Part 2!<\/em><\/strong><\/p>\n\n\n