Building an Angular app usually results in a bunch of files, mainly consisting of Javascript files, CSS files, and an index.html. An Azure App Service normally wants to host an application using a startup command for a specific stack (PHP, Node, Python, etc.). Technically, you could run your Angular app as a Node app. In that case you would run npm run start or ng serve as the startup command.

As there is no software without bugs, we must always assume there are bugs in our software. Subsequently, it would be very nice if we would be aware of those bugs as well. We cannot always be aware of all the bugs in our software, but we can be aware of all exceptions that occur in our software, using logging and telemetrics services. One of those services is Azure’s Application Insights which, among doing many other things, can collect browser exceptions coming from Javascript-based single page applications and provide much useful information about them.

In my past experience with React, I have always used props.children to render children inside a wrapper or style component. It would look something like this: // Wrapper component: function WrapperComponent(props) { return <div class="wrapper">{{ props.children }}</div> } // Usage: function AppComponent() { return <WrapperComponent><div id="child">I'm a child</div></Wrapper> } Now, as I’m working with Angular, I needed to do the same thing. However, I could never find the correct way to do it.

So I was working on creating a nice extendable skeleton image/svg+xml component when I stumbled upon a problem: I wanted to create a base skeleton style for the component that could be extended outside the component using utility classes. Something like this: // Skeleton template <div class="skeleton"></div> // Skeleton CSS .skeleton { background: lightgray; width: 100%; height: 1em; // etc. } // Implementation of skeleton component // with utility classes <app-skeleton class="rounded p-1"></app-skeleton> However, what happened during runtime was the following: