{"id":991,"date":"2019-02-14T12:23:37","date_gmt":"2019-02-14T09:23:37","guid":{"rendered":"https:\/\/global.bg\/en\/?p=991"},"modified":"2019-02-14T12:30:24","modified_gmt":"2019-02-14T09:30:24","slug":"a-way-to-hook-to-the-initialization-of-the-angular-application-part-ii","status":"publish","type":"post","link":"http:\/\/global.bg\/en\/a-way-to-hook-to-the-initialization-of-the-angular-application-part-ii\/","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 Two."},"content":{"rendered":"\n

In the first part of this post<\/a>, the discussion was focused mainly around the different methods of dynamic download of a third-party JavaScript library in an Angular<\/em> application. Here in this second post, we will be discussing the ways in which we can “hook” to the initialization of the Angular<\/em> application and fulfill our programming logic. For illustration I will continue to use the example application from the first part, which I will quote again in several places in the current 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\non: https:\/\/agyonov.github.io\/NgInitGA<\/a><\/p>\n\n\n\n

For those who have not\nread the first part or have forgotten it, the example is using Google Analytics<\/em> and to make the example\nmore meaningful it is extended to allow for full tracking of users’ actions in\nthe Angular<\/em> application.<\/p>\n\n\n\n

NB<\/strong>: As for tracking of users in Angular<\/em> application, it has great,\nready-made libraries, such as angulartics2<\/a>, which you can use. Here the question is not\nto create another such library, but with an example to show a possible solution\nto the two questions set at the beginning of this post!<\/p>\n\n\n\n

“Hook”\nto initialization of an Angular application<\/h2>\n\n\n\n

I have found several\nmethods to run your initialization program logic (your script) when launching\nthe Angular<\/em> application in the\nbrowser. I will list two of them in short, and the third one I will look at a\nlittle more closely.<\/p>\n\n\n\n

1. Use the “forRoot” static method:<\/h3>\n\n\n\n

If you have a service\nin a separate Angular<\/em>\n“feature” module, then perhaps the best and most established way is\nto use a static “forRoot” method. The method is called when you\nimport your “feature\u201d module into the main module of the Angular application.<\/p>\n\n\n\n

You can read in more\ndetail here<\/a>\nand here<\/a>.<\/p>\n\n\n\n

2. Calling your script in the ngOnInit method of the main AppComponent:<\/h3>\n\n\n\n

The most direct and\nnot complicated method is to run the script in the ngOnInit<\/em> method of the main AppComponent<\/em>\nin your Angular<\/em> application. If it\nworks, apply it. If we use the example from the first part of the publication,\nwe have completed one method-“Loadscript”. This method should be\ncalled from your initialization code to start the download of third-party .js Google Analytics<\/em> Library. In the app.component.ts<\/em> code, this would appear\nas follows:<\/p>\n\n\n

@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n  title = 'NgInit';\n\n  constructor(private gas: GoogleAnalyticsService) {\n  }\n\n  ngOnInit(): void {\n    \/\/ Start down load of JS Library\n    this.gas.loadScript();\n  }\n}<\/code><\/pre>\n\n\n
Particularity, in the\nsample application and the use of Google\nanalytics<\/em> for illustration, this technique will work without any problems.<\/p>\n\n\n\n
A recital against<\/strong> its possible use in other cases is that there\nwould be situations where it would not\nhave done<\/strong> the job \u2639. These are the cases where all the\ninitializing logic must have completed\nits execution before the start of<\/strong> the ngOnInit\nmethod<\/em> execution or any other code from your application.<\/p>\n\n\n\n
An example, for such a situation, is to say when you have a mandatory\nuser authentication<\/strong> and it must be\ncompleted, successful or not, before any other code from your Angular\napplication is executed.<\/p>\n\n\n\n
The user authentication scenario, in an Angular application, is an\ninteresting topic for which I can write a separate article in the future.<\/p>\n\n\n\n
3. Using pre-defined in Angular tokens (the most interesting)<\/h3>\n\n\n\n
There is one way to\n“hook” to the Angular<\/em>\napplication initialization process, about which, I believe, the information\nfrom the Angular<\/em> team is shared in an\noverly “modest” manner. These are the so-called predefined tokens<\/em> and “Factory\nproviders<\/em>“. Information about them can be found here<\/a>\nand here<\/a>.<\/p>\n\n\n\n
In the example\napplication, this approach is implemented into the app.module.ts<\/em> file, the main module of the Angular application.<\/p>\n\n\n\n
At the beginning we\ndefine “factory” function GoogleAnalyticsServiceFactory<\/em><\/strong> and export it! The latter is important from\nthe perspective of TypeScript<\/em> and AOT\ncompiling the Angular<\/em> application.<\/p>\n\n\n\n
The function itself\nmust return another, internal function. That’s why it’s called factory \ud83d\ude0a.<\/p>\n\n\n\n
The internal function\nthat is returned by GoogleAnalyticsServiceFactory<\/em><\/strong> is your code that will be\nexecuted when initializing<\/strong> the Angular<\/em>\napplication. The inner function can return in result void<\/em> or Promise<\/em>.<\/p>\n\n\n\n
Note<\/strong>: If it returns Promise<\/em>, the Angular<\/em> app will be blocked<\/strong> until Promise<\/em>\nis resolved!<\/p>\n\n\n\n
The internal function\ngets as input parameter (via dependency-injection) service GoogleAnalyticsService<\/em> and executes the “loadScript<\/em>” method. That’s what we were aiming for!<\/p>\n\n\n
\/\/ Factory provider for Angular. Provides function to be executed on Angular application 
\/\/startup\nexport const GoogleAnalyticsServiceFactory = (gas: GoogleAnalyticsService) => {\n  return () => {\n    \/\/ download\n    gas.loadScript();\n  };\n};\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    SecondPageComponent,\n    HomeComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule\n  ],\n  providers: [\n    \/\/ Provides function to be executed on Angular application startup\n    {\n      provide: APP_INITIALIZER,\n      useFactory: GoogleAnalyticsServiceFactory,\n      deps: [GoogleAnalyticsService],\n      multi: true\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n
In the providers<\/em> array, when defining the AppModule<\/em> main module of the Angular<\/em> application, we figuratively\n“hook” the function defined above to the Angular startup process.<\/p>\n\n\n\n
This is done by using\nthe pre-defined token<\/em> APP_INITIALIZER<\/strong>. It identifies all\nprovider marked with it to run before the Angular<\/em>\napplication is initialized!<\/p>\n\n\n\n
Note<\/em> that as dependency<\/em> (the array\ndeps: [GoogleAnalyticsService]<\/strong>) are\nlisted the parameters that Angular<\/em>\nbootstrap process must instantiates and submit as parameters to the function\nthat will run when the application starts!<\/p>\n\n\n\n
\u0410nd\nvoila! This time for real \ud83d\ude0a.<\/p>\n\n\n\n
Example\napplication<\/h2>\n\n\n\n
For assurance that the\nabove code is working, you can look at the live sample application. Try it!<\/p>\n\n\n\n
The following code\nsamples have also been added to the GoogleAnalyticsService\n<\/em>service for accessing Google Analytics<\/em>:<\/p>\n\n\n
<\/p>\n
\/\/ Send page view event to Google Analytics\n  public send(pageUrl: string): void {\n    \/\/ Send\n    window.ga('set', 'page', pageUrl);\n    window.ga('send', 'pageview');\n  }\n\n  \/\/ Send event tracking event to Google Analytics\n  public event(eventCategory: string, eventAction: string): void {\n    \/\/ Send\n    window.ga('send', 'event', eventCategory, eventAction);\n  }\n<\/code><\/pre>\n
These methods follow the instructions of Google Analytics<\/em> to work with SPA applications.<\/p>\n
The methods are used by the Home<\/em>, Second Page<\/em> pages and the button Just an Event<\/em> to send information to Google Analytics<\/em> about the user’s actions.<\/p>\n\n\n
\"1\"<\/figure>\n\n\n\n
It is visible from the above screen that:<\/p>\n\n\n\n
  1. The script\nanalytics.js<\/em> is downloaded from the\nbrowser<\/li>
  2. When\ntransitioning from page to page and pressing the button, a post of data to the collect<\/em> address of Google Analytics, <\/em>occurs.<\/li><\/ol>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    In these two posts, I\nhave tried to examine and describe in words and examples three different\napproaches to achieving the objectives of both topics:<\/p>\n\n\n\n
    • Download\nthe third-party JavaScript<\/em> library in\nAngular<\/em> application<\/li>
    • “Hook”\nto the initializing of an Angular<\/em>\napplication<\/li><\/ul>\n\n\n\n
      I hope you have not\nbeen bored and that it will be helpful for you if you need to program things\nlike above mentioned, to choose an approach that best serves you.<\/p>\n\n\n\n
      Author: Aleksandar Gyonov<\/p>\n\n\n
      <\/p>\n