After I compiled and ran in browser, I found 2 errors.
I verified the code and there is no issue on the code. Still i get the following error at runtime.
[AuthenticationService -> AuthenticationService -> AuthenticationService]:
NullInjectorError: No provider for AuthenticationService!
at NullInjector.get (http://localhost:4200/vendor.js:9122:27)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:32142:33)
at Object.get (http://localhost:4200/vendor.js:30407:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12128:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:22059:12)
at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:151:150)
at getNodeInjectable (http://localhost:4200/vendor.js:12236:44)
defaultErrorLogger @ core.js:4196
handleError @ core.js:4244
(anonymous) @ core.js:27807
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27074
(anonymous) @ core.js:27807
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27147
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27135
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27735
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 NullInjectorError: R3InjectorError(AppModule)[AuthenticationService -> AuthenticationService -> AuthenticationService]:
NullInjectorError: No provider for AuthenticationService!
at NullInjector.get (http://localhost:4200/vendor.js:9122:27)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:32142:33)
at Object.get (http://localhost:4200/vendor.js:30407:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12128:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:22059:12)
at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:151:150)
at getNodeInjectable (http://localhost:4200/vendor.js:12236:44)
(anonymous) @ main.ts:12
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27735
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
sockjs.js:2999 WebSocket connection to 'ws://localhost:4200/sockjs-node/739/5ofwcuvj/websocket' failed: WebSocket is closed before the connection is established.
WebSocketTransport.close @ sockjs.js:2999
SockJS._transportTimeout @ sockjs.js:844
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
SockJS._connect @ sockjs.js:823
SockJS._receiveInfo @ sockjs.js:803
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1598
wrapFn @ zone-evergreen.js:1218
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
XMLHttpRequest.send (async)
scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto. @ zone-evergreen.js:1449
AbstractXHRObject._start @ sockjs.js:1606
(anonymous) @ sockjs.js:1495
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
AbstractXHRObject @ sockjs.js:1494
XHRLocalObject @ sockjs.js:2915
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:731
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
(anonymous) @ client:176
./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node @ vendor.js:67879
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32

(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.
After I compiled and ran in browser, I found 2 errors.
I verified the code and there is no issue on the code. Still i get the following error at runtime.

[AuthenticationService -> AuthenticationService -> AuthenticationService]:
NullInjectorError: No provider for AuthenticationService!
at NullInjector.get (http://localhost:4200/vendor.js:9122:27)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:32142:33)
at Object.get (http://localhost:4200/vendor.js:30407:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12128:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:22059:12)
at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:151:150)
at getNodeInjectable (http://localhost:4200/vendor.js:12236:44)
defaultErrorLogger @ core.js:4196
handleError @ core.js:4244
(anonymous) @ core.js:27807
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27074
(anonymous) @ core.js:27807
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27147
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27135
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27735
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 NullInjectorError: R3InjectorError(AppModule)[AuthenticationService -> AuthenticationService -> AuthenticationService]:
NullInjectorError: No provider for AuthenticationService!
at NullInjector.get (http://localhost:4200/vendor.js:9122:27)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at R3Injector.get (http://localhost:4200/vendor.js:19388:33)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:32142:33)
at Object.get (http://localhost:4200/vendor.js:30407:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:12128:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:22059:12)
at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:151:150)
at getNodeInjectable (http://localhost:4200/vendor.js:12236:44)
(anonymous) @ main.ts:12
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27735
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
sockjs.js:2999 WebSocket connection to 'ws://localhost:4200/sockjs-node/739/5ofwcuvj/websocket' failed: WebSocket is closed before the connection is established.
WebSocketTransport.close @ sockjs.js:2999
SockJS._transportTimeout @ sockjs.js:844
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
SockJS._connect @ sockjs.js:823
SockJS._receiveInfo @ sockjs.js:803
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1598
wrapFn @ zone-evergreen.js:1218
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
XMLHttpRequest.send (async)
scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto. @ zone-evergreen.js:1449
AbstractXHRObject._start @ sockjs.js:1606
(anonymous) @ sockjs.js:1495
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
AbstractXHRObject @ sockjs.js:1494
XHRLocalObject @ sockjs.js:2915
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:731
SockJSClient @ SockJSClient.js:43
initSocket @ socket.js:20
(anonymous) @ client:176
./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node @ vendor.js:67879
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.