I created a service SocketService, basically it initializes the socket to let the app listen on the port. This service also interacts with some components.
// socket.service.ts
export class SocketService {
constructor() {
// Initializes the socket
}
...
}
I know the code in SocketService's constructor() only starts to run when a component use SocketService.
And usually the code in app.ts looks like this:
// app.ts
import {SocketService} from './socket.service';
...
class App {
constructor () {}
}
bootstrap(App, [SocketService]);
However, I want this service run when the app starts. So I made a trick, just add private _socketService: SocketService in App's constructor(). So now the codes look like this:
// app.ts (new)
import {SocketService} from './socket.service';
...
class App {
constructor (private _socketService: SocketService) {}
}
bootstrap(App, [SocketService]);
Now it works. The problem is sometimes the codes in SocketService's constructor() run, sometimes not. So how should I do it correctly? Thanks
Stuart's answer points in the right direction, but it's not easy to find information on APP_INITIALIZER. The short version is you can use it to run initialization code before any of your other application code runs. I searched for a while and found explanations here and here, which I will summarize in case they disappear from the web.
APP_INITIALIZER is defined in angular/core. You include it in your app.module.ts like this.
import { APP_INITIALIZER } from '@angular/core';
APP_INITIALIZER is an OpaqueToken (or an InjectionToken since Angular 4) that references the ApplicationInitStatus service. ApplicationInitStatus is a multi provider. It supports multiple dependencies and you can use it in your providers list multiple times. It is used like this.
@NgModule({
providers: [
DictionaryService,
{
provide: APP_INITIALIZER,
useFactory: (ds: DictionaryService) => () => return ds.load(),
deps: [DictionaryService],
multi: true
}]
})
export class AppModule { }
This provider declaration tells the ApplicationInitStatus class to run the DictionaryService.load() method. load() returns a promise and ApplicationInitStatus blocks the app startup until the promise resolves. The load() function is defined like this.
load(): Promise<any> {
return this.dataService.getDiscardReasons()
.toPromise()
.then(
data => {
this.dictionaries.set("DISCARD_REASONS",data);
}
)
}
Set up like that the dictionary gets loaded first and the other parts of the app can safely depend on it.
Edit: Be aware that this will increase the up-front load time for you app by however long the load() method takes. If you want to avoid that you could use a resolver on your route instead.
Move the logic in your SocketService constructor to a method instead and then call that in your main component's constructor or ngOnInit
SocketService
export class SocketService{
init(){
// Startup logic here
}
}
App
import {SocketService} from './socket.service';
...
class App {
constructor (private _socketService: SocketService) {
_socketService.init();
}
}
bootstrap(App, [SocketService]);
Also see APP_INITIALIZER, which is described as;
A function that will be executed when an application is initialized.