Angular

Angular Development in Enterprise

Published Oct 31, 2019

Updated Feb 14, 2023

8 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

There are a few posts that teach you how to develop Angular applications but some of them are missing some of the tips that I'm going to mention here.

FYI: some of the tips can be used in any kind of enterprise app, not just angular.

I'm not going to get into detail on how to apply each one of the tips or tools. I will only talk about them overall for you to start applying them in your Angular enterprise project.

Remember that all tips mentioned are not mandatory but will help your team to write cleaner, better, and more scalable application.

Content Structure

-Typing -SASS -State Management -Libraries -Monorepos -NPM for Enterprise -Lazy Loading -Components -Component Libraries -Reactive Programming with RxJS -Compilation -Design Systems -Angular with Bazel -VS Code Tools

Typing

Typing with TypeScript

When working on such a big application, like an enterprise application, with a big number of developers, typing your code is very important. This will help the developers in preventing mistakes and understanding the code base faster.

so... stop using any Please, stop it!

Typescript Entities -classes -enums -interfaces (and types)

DON'T DO:

  tasks$: any;

DO:

tasks$: Observable<Task[]>;

SASS

Time to power up your CSS with SASS. By using SASS, you are going to be more DRY which means you won't be repeating yourself. Your CSS code will be more structured, cleaner, and more readable.

When creating a new Angular project using the CLI, it will ask you "what stylesheet format would you like to use?", select SCSS.

If you want to get started with SASS, visit the official docs:

https://sass-lang.com/guide.

State management

It is very important to handle the state of your application. By handling the state of your app, you will gain some of the benefits like:

-Better performance: The way Angular works when using state, the data updates can flow down through your components relying on slices of the store.

-Centralized immutable state: The state living in a central location inside of your app.

-Save time: Imagine you have an application with a very elaborated workflow where you have to write a bunch of data in the forms and click multiple buttons. Thanks to a tool like Redux Dev Tools, it allows you to travel in time in your application so you don't have to do all the workflow again to test your app - you can simply go to a specific point.

-Easy to test: All state updates are handled in reducers which are pure functions. Pure functions are extremely simple to test, as it is simply input in and assert against output.

A lot of people don't like using state management tools, so they decide to just use RxJS and services. If you have a very good data flow you may not need to handle the state with some of the tools previously mentioned, but you essentially are going to be inventing the wheel. If you are going to do that, you might as well use a tool that is used by millions of developers.

Libraries

If you are working in a big company the probability of you need to share multiple pieces of code is probably very high, so why would you make your engineers rewrite existing code? Thanks to Angular libraries you can avoid this by creating a sharable code like components, services, etc across your organization. Libraries will allow your apps to avoid code inconsistencies and different standards and will help your company to save money.

How to create a library? https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

NPM for Enterprise

After talking about Angular libraries you may be wondering: how can I share them across my organization?

Well, NPM offers solutions for enterprise applications. Your public npm package will be kept private and only visible/available to your organization.

To learn more about NPM Enterprise visit: https://www.npmjs.com/products/enterprise

Monorepos

Not everything is pretty with Angular libraries when working on enterprise applications.

-Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages -Every shared library needs to have its own CI/CD workflow -Each CI/CD workflow should handle versioning of changes -There can be mismatches with different npm packages for angular projects which can lead to apps being broken -In general, harder to do changes across multiple apps and libraries as these are all in their own repository

If you are working on an enterprise project, it's recommended to organize your code in bigger parts like common service, UI components, etc. Thanks to the Nrwl team, we can accomplish this when working with monorepos by using Nx in our angular projects.

Lazy Loading

Thanks to lazy loading, we can improve the performance of our applications dramatically. Imagine you have a huge enterprise app and you don't want the app to take a long time to load. People will lose their minds and will stop using your app. Lazy loading will help us achieve a better performance of our app by loading our ngModules on demand. Some of the advantages of lazy loading your angular app are:

-High performance in bootstrap time on initial load -Modules are grouped according to their functionality (feature modules) -Smaller code bundles to download on initial load -Activate/download a code module by navigating to a route

If you want to learn more about lazy loading, take a look at the official Angular docs or this awesome article/tutorial.

https://angular.io/guide/lazy-loading-ngmodules

https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304

Components

When creating an Angular app, I would suggest that you create 2 kinds of components: the smart and the dumb components.

Smart components are the only ones that have access to the services usually via DI and the source of data. The dumb components will be used as pure functions hence no side effects should be created by them (something comes in and something comes out).

Can I use smart/dumb components with state management?

Yes, you can apply the concept of smart and dumb components when doing state management with tools like NgRx.

When using smart and dumb components, you are going to come up with the need of using Input() and Output() to communicate between components. People have asked me: how far should I chain my components? I try to keep them to 1 level up and 1 level down. There may be special scenarios where you do 2 levels up and 2 levels down of component communication using Input() and Output() but please try to avoid this.

If you want to learn more about Smart and dumb components, take a look at this link: https://medium.com/@jtomaszewski/how-to-write-good-composable-and-pure-components-in-angular-2-1756945c0f5b

Component Libraries

When working on enterprise Angular application, it is common to make mistakes and stop following standards and company's practices. A way to achieve consistency in your applications is by using component libraries like:

- PrimeNG: http://primefaces.org/primeng/#/

- Angular Material: https://material.angular.io/

- NgBoostrap: https://ng-bootstrap.github.io/#/home

- Ng-Zorro: https://ng.ant.design/docs/introduce/en

- NgSemantic: https://ng-semantic.herokuapp.com/#/

In my personal opinion, for an enterprise application, PrimeNG is the way to go. They have over 80 components that are easy to customize via CSS and multiple companies in the industry use PrimeNG which translates to good support by the community.

Design Systems

You may be wondering: what about custom components? Once again, keeping the standards of your company, the design, and the consistency in your application is very important. If your company doesn't have a designated UX/UI designer, taking a look at design systems will be a good place to start for keeping this consistency in your application's design.

Here are some great resources:

-Semantic UI: https://semantic-ui.com/ -PrimeNG: https://www.primefaces.org/designer/primeng -Material Design: https://material.io/design/ -Polaris Shopify: https://polaris.shopify.com/ -Ant Design: https://ant.design/

Reactive Programming with RxJS

Time to start thinking reactively in Angular applications. We have an awesome library called RxJS that will help us achieve this.

When working with enterprise projects you are probably going to encounter getting data from multiple sources that depend on each other, or you will have to play a lot with multiple observable to achieve reactive programming. If this is the case, I'd suggest you take a declarative approach when using observables.

Benefits of a declarative approach: -Leverage the power of RxJs observables and operators -Effectively combine streams -Easily share observables -Readily react to user's action

To learn more about reactive programming, I'd suggest you take this course: https://www.pluralsight.com/courses/rxjs-angular-reactive-development

When working on the Angular project, if I have to consume promises I try to convert them to an observable. I do this because I want my app to be as reactive as possible. There are a few specific cases where I wouldn't convert promises to observables.

To learn more about Observables and Promises: https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13

https://stackoverflow.com/questions/50269671/when-to-use-promise-over-observable

Compilation

Ivy is the new generation of the Angular compiler. Ivy will help you with your bundle size, re-build times, run-time performances, backward compatibility and more.

To learn more about Ivy: https://angular.io/guide/ivy https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf https://medium.com/js-imaginea/ivy-a-look-at-the-new-render-engine-for-angular-953bf3b4907a

Angular with Bazel

Thanks to the Google team, now we have this awesome tool called Bazel in our hands. Bazel allows us to build and test our backend and frontend with the same tool.

Bazel also helps your organization with continuous integration and it also helps with the build time. Bazel only builds what is necessary because Bazel uses a caching strategy where it only compiles what it has been changed or what is new.

learn more about bazel: https://blog.ninja-squad.com/2019/05/14/build-your-angular-application-with-bazel/

https://bazel.build/

VS Tools

After several years in the industry, I have noticed that having the same environment settings can help us avoid merge conflicts and have a consistent codebase, especially when working with multiple developers across different teams.

The following plugins for VS Code will help your team develop your next Angular project.

-Angular Snippets (Version 8). -Angular Console. -Angular Schematics. -Prettier. -TS Lint. -Auto Rename Tag. -Highlight Matching Tag. -HTML Snippets. -IntelliSense for CSS class names in HTML. -JavaScript (ES6) code snippets. -RxJs Snippets. -Paste JSON as Code.

Got more?

If you have any other suggestions on how to help a team be successful in their enterprise project, put some comments and I will add them to the article.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Pato Vargas
Google Developer Expert on Angular and Web Technologies, Google Women Techmaker Ambassador, Auth0 Ambassador, Media Developer Expert at Cloudinary, Platzi Master Coach, and SpringBoard mentor.
@devpato @devpato

Using HttpClient in Modern Angular Applications

Introduction With all the wonderful treats that the Angular team has given us during the recent "renaissance" era, many new developers are joining in on the fun. And one of the challenges they'll face at some point is how to call an API from your Angular application properly. Unfortunately, while searching for a guide on how to do this, they might stumble upon a lot of outdated information. Hence, this article should serve as a reliable guide on how to use the HttpClient in Angular >= 17. The Setup To make an HTTP request in Angular, you can take advantage of the HttpClient provided by the @angular/common/http package. To use it, you'll need to provide it. Here's how you can do that for the whole application using the bootstrapApplication function from @angular/platform-browser: ` With that, you should be good to go. You can now inject the HttpClient into any service or component in your application. Using HttpClient in Services Let's take a common example: You have a database object, say a Movie, and you want to implement CRUD operations on it. Typically, you'll want to create a service that provides methods for these operations. Let's call this service MovieService and create a skeleton for it with a method for getting all movies. ` Implementing the Method using HttpClient Let's assume we have a GraphQL API for our movies. We can implement our getAllMovies using HttpClient to make a request to fetch all movies. First, we will need to define a new type to represent the response from the API. This is especially important when you are using GraphQL, which may return a specific structure, such as: ` When working with a real API, you'll likely use some code generator to generate the types for the response from the GraphQL schema. But for the sake of this example, we'll create an interface to represent the response manually: ` Now, we can implement the getAllMovies method using HttpClient: ` > Note: The post method is used here because we are sending a request body. If you are making a GET request (e.g. to a REST API), you can use the get method instead. The getAllMovies method returns an Observable of MoviesListResponse. In this example, I have typed it explicitly to make it obvious at first glance, but you could also omit the type annotation, and TypeScript should infer it. > Note: While I'm excited about signals as much as the next guy, making HTTP requests is one of the typical async operations for which RxJS Observables are a perfect fit, making a great argument for RxJS still having a solid place in Angular alongside signals. Using the Service in a Component Now that we have our MovieService set up, we can use it as a component to fetch and display all movies. But first, let's create a Movie interface to represent the structure of a movie. Trust me, this will prevent many potential headaches down the line. Although using any at the beginning and implementing the types later is a valid approach in some cases, using data fetched from an API without validating the type will inevitably lead to bugs that are difficult to solve. ` Now, we can start implementing our standalone MoviesComponent: ` In this component, we are calling the getAllMovies method from the MovieService in the constructor to fetch all movies and assign them to the movies property which we will use to display the movies in the template. ` In this case, placing our code inside the constructor is safe because it doesn’t depend on any @Input(). If it were, our code would fail because the inputs aren’t initialized at time of instantiation. That's why it is sometimes recommended to place logic in ngOnInit instead. You could also put this call in an arbitrary method that is called e.g. on a button click. Another way to handle the subscription is to use the async pipe in the template. This way, Angular will automatically subscribe and unsubscribe from the observable for you and you won't have to assign the response to a property in the component. Due to the structure of the returned data, however, we'll need to use the RxJS map operator to extract the movies from the response. ` > Note using the pipe method to chain the map operator to the observable returned by getAllMovies. This is a common pattern when working with RxJS observables introduced in RxJs 5.5. If you see code that uses the map operator directly on the observable and wonder why it isn't working for you, it's likely using an older version of RxJS. Now, we can simply apply the async pipe in the template to subscribe to the observable and display the movies: ` Conclusion HttpClient in Angular is pretty straightforward, but with all the changes to RxJS and Angular in the past few years, it can pose a significant challenge if you're not super-experienced with those technologies and stumble upon outdated resources. Following this article, you should hopefully be able to implement your service using HttpClient to make requests to an API in your modern Angular application and avoid the struggle of copying outdated code snippets....

Mar 27, 2024

4 mins

AngularJavaScript

Incremental Hydration in Angular

Incremental Hydration in Angular Some time ago, I wrote a post about SSR finally becoming a first-class citizen in Angular. It turns out that the Angular team really treats SSR as a priority, and they have been working tirelessly to make SSR even better. As the previous blog post mentioned, full-page hydration was launched in Angular 16 and made stable in Angular 17, providing a great way to improve your Core Web Vitals. Another feature aimed to help you improve your INP and other Core Web Vitals was introduced in Angular 17: deferrable views. Using the @defer blocks allows you to reduce the initial bundle size and defer the loading of heavy components based on certain triggers, such as the section entering the viewport. Then, in September 2024, the smart folks at Angular figured out that they could build upon those two features, allowing you to mark parts of your application to be server-rendered dehydrated and then hydrate them incrementally when needed - hence incremental hydration. I’m sure you know what hydration is. In short, the server sends fully formed HTML to the client, ensuring that the user sees meaningful content as quickly as possible and once JavaScript is loaded on the client side, the framework will reconcile the rendered DOM with component logic, event handlers, and state - effectively hydrating the server-rendered content. But what exactly does "dehydrated" mean, you might ask? Here's what will happen when you mark a part of your application to be incrementally hydrated: 1. Server-Side Rendering (SSR): The content marked for incremental hydration is rendered on the server. 2. Skipped During Client-Side Bootstrapping: The dehydrated content is not initially hydrated or bootstrapped on the client, reducing initial load time. 3. Dehydrated State: The code for the dehydrated components is excluded from the initial client-side bundle, optimizing performance. 4. Hydration Triggers: The application listens for specified hydration conditions (e.g., on interaction, on viewport), defined with a hydrate trigger in the @defer block. 5. On-Demand Hydration: Once the hydration conditions are met, Angular downloads the necessary code and hydrates the components, allowing them to become interactive without layout shifts. How to Use Incremental Hydration Thanks to Mark Thompson, who recently hosted a feature showcase on incremental hydration, we can show some code. The first step is to enable incremental hydration in your Angular application's appConfig using the provideClientHydration provider function: ` Then, you can mark the components you want to be incrementally hydrated using the @defer block with a hydrate trigger: ` And that's it! You now have a component that will be server-rendered dehydrated and hydrated incrementally when it becomes visible to the user. But what if you want to hydrate the component on interaction or some other trigger? Or maybe you don't want to hydrate the component at all? The same triggers already supported in @defer blocks are available for hydration: - idle: Hydrate once the browser reaches an idle state. - viewport: Hydrate once the component enters the viewport. - interaction: Hydrate once the user interacts with the component through click or keydown triggers. - hover: Hydrate once the user hovers over the component. - immediate: Hydrate immediately when the component is rendered. - timer: Hydrate after a specified time delay. - when: Hydrate when a provided conditional expression is met. And on top of that, there's a new trigger available for hydration: - never: When used, the component will remain static and not hydrated. The never trigger is handy when you want to exclude a component from hydration altogether, making it a completely static part of the page. Personally, I'm very excited about this feature and can't wait to try it out. How about you?...

Mar 14, 2025

3 mins

AngularJavaScript

Closer look at the DNA of the OpenFin Platform API

This blog takes a deep dive into the newly launched Platform API by OpenFin. After only a few days of playing around with the software, I realized just how much capacity it has and how many good features there are for developers. Ultimately, this robust set of features will significantly enhance your user’s experience. Before I begin, let's start with a bit of background information on OpenFin! Dictionary API: Application Programming Interface OS: Operating System CSS: Cascading Style Sheets What is OpenFin? Openfin is a tech company focused on modernizing desktops, and accelerating innovation in the financial sector. Simply put, OpenFin is the Operating System of Finance! With this, you get the power you need, the freedom you want, and the security you must have. The Problem If you are in the financial sector, you know that it is very important to be able to visualize everything on one screen when interacting with multiple applications. We usually tend to arrange windows over and over, but that takes time, and our applications do not work with each other, nor do they share all data between them by nature. Most importantly, we have to try to make sure all of these apps are secure! The Solution Platform API of course! What is the OpenFin Platform API? It's a software that will help you build desktop platforms at the speed of light. The Platform API will also facilitate the work of creating a merged user experience across the multiple applications. > “The Platform API is for central architecture teams who want to provide web apps with a unified desktop experience and common look & feel.” - OpenFin Engineer Key Features of the OpenFin Platform API - Layout management (e.g. window drag-and-drop and tabbing) - Customization of window look & feel - Styling via CSS - URL for loading the title bar window - Customization of all Platform APIs (behaviors) - Save and restore your window view. - Window level context (different from FDC3) - “Smart” Manifests to describe platforms via a single .JSON file The Powerful Gridlayout One of my favorite features is their grid layout. This feature has helped me reduce the amount of time it takes to develop an app. It can get pretty complicated to create dynamic grids that work with internal and external windows, by dragging and dropping. Now, if you see it from the end user point of view, this is an awesome idea, because the grid is customizable! Now, I know what you are thinking. And no, you don't need to ask the developer to change the layout of the application. You, as an end user, can change the layout as well. This gives every end user the opportunity to have customs views of their apps that best fit their needs, and grow their productivity. As a developer, I believe this is a huge benefit, since I don't have to worry about writing the code for this dynamic grid, nor do I need to worry about customizing the layout for each end user or client, which allows me to focus on the actual applications that will be used inside of the Platform API. Because a Grid layout is not enough The Platform API gives you the ability to power up your platform not only with custom layouts, but also with tabs! As a developer, I can develop my applications used inside of the platform with the assurance that they can be grouped together on tabs. And one of the coolest things is that you can customize them! If you are an end user of the platform, there are so many benefits here. E.g You can group the tabs by colors, where each color represents windows that belong to a certain group. This is huge. I have seen monitors of people working in the financial sector with 20 open windows and sometimes, users get lost in this. It's hard to manage what's going on. Your perfect setup...always So while working with the Platform API, I found out that you can save the current platform setup. This is an amazing feature. When working with dynamic layout, having to re-arrange things every time the code compiles can become very tedious. Now, imagine the benefits of this for the end users! As a developer, you can easily retrieve the existing snapshot of your saved platform by using the applySnapshot method. ` Thanks to this, you don't have to worry about losing the perfect setup that took you time to arrange. The setup will be always the same as long as you want to apply the saved snapshot! Advanced workflows The Platform API allows you to get the current context of your window. Thanks to this, you can easily save it into the platform's snapshots to re-use the context when the aplySnapShot method is called. The Core Now, let's take a closer look at the core of OpenFin’s Platform API and dive into some code examples. What is the core? It’s the manifest! I like to refer to it as the core because it is what carries all the information which constructs your Platform API project. The manifest is located inside of a .json file AKA the app.json Let’s Get Started Let's create our manifest: ` As you can see, this is the beginning of a new project using the Platform API. All you have to do is declare the "platform" object in your app.json. Now let’s dive into the features to customize the application experience. Customizing the Platform API Window Customize your window's look and feel using css, and by adding defaultWindowOptions. You manifest will look as follows: ` Take a look at this file to see what css selectors are available in the Platform API. You can also replace the default windows that come with the Platform API. To do this, specify the url property as a window option in your manifest. You can import your custom HTML as follows: ` When working with your custom window, all you have to do is consider the following: > This HTML file must specify a div component with the ID layout-container where you want the layout to be rendered. This will ensure that the window has a target to render the layout in. A url can also be specified in windowOptions in a snapshot, or when launching a snapshot via other methods. Window Commands OpenFin enables your Platform API application to work and feel like a native desktop application. That's why Openfin engineers further enhanced this experience by adding commands (with appropriate hotkeys) to help improve user experience. These commands can be added to the platform object inside of your Platform API manifest. ` Window Snapshot Another important property of the manifest is the snapshot. This property defines the structure of your window inside of the Platform. The snapshot needs to contain the window property where we will define the objects that go inside of it like *views*, and you can even define the structure of the *grid* by the layout property each window has. One cool feature about windows is that they can be created and destroyed by the end user, or developer, at any time. ` Window Layout This property defines the structure of your window. The layout works on a grid system. When working with the layouts, you have to add the content property inside of the layouts property. This content property contains an inner property called type. The values inside of the type value are the following: - row - column - stack - component In the following code snippet, you can see how I'm using the the content property with the value stack as my type value. Another thing to notice is that there's content inside of other content. The Platform API allows us to have nested content to have the ability to give our window the structure we want. ` View ComponentState Finally, another property that is worth mentioning is the componentState. This property gives us the option to provide more information about our view. Let's take a look at the following example. ` This view will render the website of https://www.thisdot.co inside of the view. Take a look to this complete example: ` If you want to learn more about the manifest and the Platform API, take a look at the official resources: - https://developers.openfin.co/docs/platform-api - https://cdn.openfin.co/docs/javascript/canary/View.html#~options - https://cdn.openfin.co/docs/javascript/canary/Window.html#~options - https://cdn.openfin.co/docs/javascript/stable/Platform.html Conclusion Working with Platform API has so many wonderful benefits. It gives me the opportunity to create more flexible software with consistent design, better user experience, and greater security. The Platform API has helped me deliver products faster, with better quality, without compromising the security of my software. OpenFin is changing the way we interact with financial software. Don’t miss your chance to use it!...

Mar 23, 2020

8 mins

OpenFin

This Dot AI Field Notes - Anatomy of a Coding Harness

A coding agent is not magic, it’s a loop. We call this a harness. The harness is a deterministic layer of code that wraps an LLM. Claude Code is a harness. Codex is a harness. Pi is a harness. The harness, on initialization, provides to the LLM a system prompt defining all tools the harness implements for the LLM. Without the harness, you cannot read or modify files on the user’s local filesystem without them having to copy-and-pasting by hand. The harness is the final place where engineers can customize how coding agents do work before the LLM takes over. Think of the LLM as a train and the harness as the rails the train rides on. Below… one full task executed by a harness, traced step by step....

May 12, 2026

1 min

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.