error-stack-parser | Extract meaning from JS Errors | Architecture library

I've set up an Angular development workflow using Docker. However, building the docker and serving the Angular app is a bit slow and takes around ~7 minutes (considering all base images pre-downloaded).

./package.json:

Here I am subscribing notification$ of Notification service in App.Component.ts. Every thing is going good, I have changed value in ngOnInit of App.Component.ts but its view not rendering/updating accordingly.

But when go on another view I found view has changed accordingly(but not at the same time its value changed).

App.Component.ts :

Update

After @developer033 mentioned, I am running npm run server:prod and app is running in the prod mode. But I am not sure, how do I verify it is AOT optimized?

If I inspect main.bundle.js in to check if it has code for main.browser.aot.ts:

I see is of main.browser.ts and not of main.browser.aot.ts So I am not sure wheter I am using AOT build or not.

Original Post

Ok, I am able to compile my Angular2 project in AOT mode with Webpack and it creates two folder one is "dist" and other is "compiled", but I am not sure how to run the AOT project after compiling.

Build Command:

"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail"

After compile, I run the command :

npm run webpack-dev-server

Now the app runs but I am not sure whether it is even utilizing AOT compiled code or not. I see no difference in both AOT and non AOT app in the browser.

AOT:

Without AOT:

tsconfig.webpack.json: