Angular

Angular Libraries with Nx for Enterprise Apps

Nov 20, 2019

7 min read

What is Nx?

Nx is an extensible dev tool for monorepos.

"Using Nx, you can add TypeScript, Cypress, Jest, Prettier, Angular, React, Next.js, and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. Nx fully integrates with the other modern tools you already use and love." - Nx Team.

Why Use Angular Libraries?

You should use Angular libraries because sharing code across one app is easy, but sharing code between different projects requires extra steps.

When we do encounter services or components that can be reused across different teams and projects, and that ideally do not change very often, we may want to build an Angular Library.

Downside Of Using Libraries?

You have to link your library to your main project, and rebuild it on every change.
You will need to keep syncing your project with the latest version of the library.

Advatanges Of Using Libraries?

We need to think and build these modules with reusability in mind.
Publish and share these libraries with other teams or projects.

What are Monorepos?

Monorepos are a source control pattern, in which essentially all of the codebase lives in the same repository. All projects will always use the latest version of the code. That's one of the reasons why Nx comes in handy when working with libraries.

Advatanges Of Using Angular Monorepos?

Same library version for every app.
Ease of maintenance: when you update a shared library, you update it for all apps.
No conflicts between versions.

For more information on Angular Monorepos

Let's Get Our Hands Dirty

Run the following command in your terminal to install Nx globally.

npm install -g @nrwl/schematics

Create a Nx Workspace. When asked about 'preset', select empty.

npx create-nx-workspace@latest thisdot

When asked what CLI should power your Nx workspace - select Angular CLi

Nx Workspace Structure

Add the capability to create Angular applications via:

ng add @nrwl/angular --defaults

Create a new angular app inside of your Nx workspace.

ng g @nrwl/angular:application employees

Then it will ask you which stylesheet format would you like to use. Select sass. carbon (2)

press enter

The next question will be, "Would you like to configure routing for this application? (y/N)" Type y

press enter

Project Structure

Serve the Angular app, and go to http://localhost:4200.

ng serve employees

You should see something like this: Screen Shot 2019-11-20 at 5.41.29 PM

For this app, we are going to create a library that contains an employee interface that will be shared across multiple applications.

Create a sharable interface with the following command:

ng g @nrwl/workspace:lib employee

Go to libs/employee/src/lib/employee.ts and "copy-paste" the following:

export interface Employee {
  id: number;
  name: string;
}

Go to your app.component.ts file inside of your employees application.

Whenever you need to use the employee's interface inside of this workspace, you will import it to your file as following:

import { Employee } from '@thisdot/employee';

Note: If You are using vscode and doens't recognize it - restart vscode.

A cool thing about Nx is that, if you have your backend inside of this workspace, you can reuse this interface as well.

Creating A UI Library

To create the ui library, run the following command:

ng g @nrwl/angular:lib ui

Your project structure will look like this:

Now go to your ui.module.ts. You file should look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule]
})
export class UiModule {}

Time To Create A Component In Our UI Library

Run the following command:

ng g component employee-list --project=ui --export

Your project structure should look like this Screen Shot 2019-11-20 at 5.54.14 PM

Now lets go to your employee-list.component.ts file insdie of our ui library.

You will add the employee interface we created.
You will create an input that takes an array of employees.
We will add a trackBy function just for you to see how we create one for optimization.

Your file should look like this:

import { Component, OnInit, Input } from '@angular/core';
import { Employee } from '@thisdot/employee';
@Component({
  selector: 'thisdot-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.scss']
})
export class EmployeeListComponent implements OnInit {
  @Input() employees: Employee[];
  constructor() { }

  ngOnInit() {}

  trackById(employee: Employee) {
    return employee ? employee.id : null;
  }
}

Inside of your employee.component.html file

<ul>
  <li *ngFor="let e of employees; trackBy: trackById(e)">{{ e.name }}</li>
</ul>

As you can see, I'm using the trackBy function to promote better performance of our app.

For more information on trackby visit this link.

Creating A Service

Run the following command to create a service inside of our ui library:

ng g s employee --project=ui

Now go to your ui library, and search for your employee.service file, and make sure it looks like the following:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Employee } from '@thisdot/employee';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  employees$: Observable<Employee[]>;
  constructor(private http: HttpClient) {
    this.employees$ = this.http.get<Employee[]>(
      'https://my-json-server.typicode.com/devpato/nx-fake-data/employees'
    );
  }
}

Now go to your index.ts file

Add the service to your file. Your file should look like this:

export * from './lib/ui.module';
export * from './lib/employee.service';

Now go to your ui.module.ts. The file should look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  imports: [CommonModule, HttpClientModule],
  declarations: [EmployeeListComponent],
  exports: [EmployeeListComponent]
})
export class UiModule {}

Note: you can see I have added the HttpClientModule and Nx has added the component for me already.

Time To Use Our UI Library

Go to your employees app, and open the app.module.ts

Inject our library at the top of the file
Then add it to your imports

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { UiModule } from '@thisdot/ui';

@NgModule({
  declarations: [AppComponent],
  imports: [
    UiModule,
    HttpClientModule,
    BrowserModule,
    RouterModule.forRoot([], { initialNavigation: 'enabled' })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Our Ui library is ready to be used in this project.

Now, open your app.component.html file inside of your employees app, and copy paste the following code.

<div class="employees-container">
  <img src="../assets/images/logotdm.png" />
  <h1>Employees</h1>
  <thisdot-employee-list 
  [employees]="employeeService.employees$ | async">
  </thisdot-employee-list>
</div>

This is where I'm injecting the employee-list component we created.

Open in your app.component.ts, and change it to match the example below:

import { Component } from '@angular/core';
import { EmployeeService } from '@thisdot/ui';

@Component({
  selector: 'thisdot-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private employeeService: EmployeeService) {}
}

As you can see, I'm injecting the service we created inside of the ui library.

Go to your app.component.scss file, and add the following code.

.employees-container {
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 200px;
  }
}

Bonus (Shared Assests)

Go to your ui library, and create a subfolder called 'shared-assets', then create another folder called 'images', and add an image there. Then name it as shown on the picture.

Now go to your angular.json, and find assets.

Your file should look like this:

"assets": [
             "apps/employees/src/favicon.ico",
              "apps/employees/src/assets",
            {
              "glob": "**/*",
              "input": "./libs/ui/src/lib/shared-assets",
              "output": "./assets"
            }
          ]

Restart VS Code to make sure it detects all the changes.

Time To Test Our App

In your command line run:

ng serve employees

And We Are Done! :)

About Author:

Pato Software Engineer at This Dot | Auth0 Ambassador Twitter: devpato Stackoverflow: devpato Github: devpato AngularJax Meetup Founder

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.

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

You Don't Need NgRx To Write a Good Angular App

NgRx is a great tool that allows you to manage state and side effects in Angular applications in a Redux-like manner. It streamlines state changes with its unidirectional data flow, and offers a structured approach to handling data and side effects. Numerous posts on our blog detail its strengths and affiliated techniques. Some Angular developers even argue that incorporating NgRx is imperative once an app expands beyond two features. While NgRx can undoubtedly enhance an Angular application or library by simplifying debugging, translating business logic into code, and improving the architecture, it does present a steep learning curve. Despite the provocative title, there is some truth to the statement: your app or library may indeed not need NgRx. Surprisingly, I successfully developed a suite of enterprise Angular libraries over five years without involving NgRx. In that project, we decided to opt out of using a state management library like NgRx because of its steep learning curve. Developers with varying levels of Angular expertise were involved, and the goal was to simplify their experience. My bold assertion is that, with careful consideration of architectural patterns, it is entirely possible to develop a robust app or library using only Angular, without any third-party libraries. Employing select design patterns and leveraging Angular's built-in tools can yield a highly maintainable app, even without a dedicated state management library. Having shared my somewhat audacious opinion, let me now support it by outlining a few patterns that facilitate the development of a maintainable, stateful Angular application or library without NgRx. Services and the Singleton Pattern Services provided in root or a module yield a shared instance across the entire app or module, effectively rendering them singletons. This characteristic makes them ideal for managing and sharing state across components without requiring a dedicated state management tool like NgRx. Particularly, for small to medium-sized applications, a "state service" can be a straightforward and effective alternative to a comprehensive state management solution when implemented correctly. To accurately implement state in a singleton service, consider the following: - Restrict state data to private properties and expose them only through public methods or observables to prevent external mutations. Such a pattern safeguards the integrity of your state by averting unauthorized modifications. - Utilize BehaviorSubjects or signals to enable components to respond to state changes. Both BehaviorSubject and SettableSignal retain the current value and emit it to new subscribers immediately. Components can then subscribe to these to receive the current value and any subsequent updates. - Expose public methods in your service that manage state modifications to centralize the logic for updating the state and incorporate validation, logging, or other necessary side effects. - When modifying state, always return a new instance of the data rather than altering the original data. This ensures that references are broken and components that rely on change detection can accurately detect changes. Good Component Architecture Distinguish your UI components into stateful (containers) and stateless (presentational) components. Stateful components manage data and logic, while stateless components merely receive data via inputs and emit events without maintaining an internal state. Do not get dragged into the rabbit hole of anti-patterns such as input drilling or event bubbling while trying to make as many components presentational as possible. Instead, use a Data Service Layer to provide a clean abstraction over backend API calls and handle error management, data transformation, caching, and even state management where it makes sense. Although injecting a service into a component technically categorizes it as a "smart" component, segregating the data access logic into a separate service layer ultimately enhances modularity, maintainability, scalability, and testability. Immutability A best practice is to always treat your state as immutable. Instead of modifying an object or an array directly, you should create a new copy with the changes. Adhering to immutability ensures predictability and can help in tracking changes. Applying the ChangeDetectionStrategy.OnPush strategy to components whenever possible is also a good idea as it not only optimizes performance since Angular only evaluates the component for changes when its inputs change or when a bound event is triggered, but it also enforces immutability. Change detection is only activated when a different object instance is passed to the input. Leveraging Angular Router Angular's router is a powerful tool for managing application state. It enables navigation between different parts of an application, allowing parameters to be passed along, effectively using the URL as a single source of truth for your application state, which makes the application more predictable, bookmarkable, and capable of maintaining state across reloads. Moreover, components can subscribe to URL changes and react accordingly. You can also employ router resolvers to fetch data before navigating to a route, ensuring that the necessary state is loaded before the route is activated. However, think carefully about what state you store in the URL; it should ideally only contain the state essential for navigating to a specific view of your application. More ephemeral states, like UI state, should be managed in components or services. Conclusion Angular provides lots of built-in tools and features you can effectively leverage to develop robust, maintainable applications without third-party state management libraries like NgRx. While NgRx is undoubtedly a valuable tool for managing state and side effects in large, complex applications, it may not be necessary for all projects. By employing thoughtful design patterns, such as the Singleton Pattern, adhering to principles of immutability, and leveraging Angular's built-in tools like the Router and Services, you can build a highly maintainable and stateful Angular application or library....

Sep 1, 2023

4 mins

Angular

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

Intro To Performance Analytics with Firebase

The Firebase suite includes multiple products, about which you can read more here. In this article, however, I'm going to talk about the Performance Monitoring product. I'm going to show you how to use it in an Angular app, but the process for React, VueJS, etc, is very very similar. What Is Performance Monitoring in Firebase? Thanks to this product, you can observe the performance of your app. By using the product, you see the areas for improvement in your code. This product can help you avoid crashes by increasing your code quality. Features Of Performance Monitoring - Customize monitoring for your app - Automatically measure app startup time, HTTP/S network requests, and more - Gain insight into situations where app performance could be improved Let's get started *Note:* I'm assuming you have a Firebase account, and any project there that can be used throughout this article 1) On the left navbar, inside of a Firebase console, you will see Performance. Click it. This is where your data will be populated after 12-24hrs of monitoring. 2) Now, go to project settings: 3) Then, scroll all the way down, and copy/paste the JSON with all your project settings in a safe place. If you don't see those settings as shown on the screenshot, you might need to register a new web-app for the current project (instructions on how to do this are given on the same page in Project settings > General). 4) Navigate to your project directory in the command line, and run: ` 5)Import the Firebase modules in your app.module.ts ` 6) Inside of your app.module.ts, make sure you add the above modules into the imports array as follows: ` 7) Now, in your service, or wherever you are reading the data from Firebase, you can add a trace to trace the time it takes to load the data. ` Note: *places* is the name of my collection inside of Firebase, and *placesQuery* is the name I gave to my trace. You can name it however you want. __Now your app is ready to start getting tracked by Firebase's performance tooling. __ Remember You can always write custom traces whether you are using Angular, React, or plain Vanilla JS. Time to view our App Performance Note: In order to see your app performance, you need to deploy your app and give Firebase approximately 24 hours to collect some data. 7) Go back to Firebase-> Performance Tab, you should see something like this: You will see this dashboard showing some basic data per country, and per enviroment you have used your app. 8) Now, click on View Traces, and click on the enviroment you want to be the traces. You will see a metrics dashboard If you click on View More, you will see more information about that specific metric. Check it out! 9) Now go back to the previous page and click on device tab. Then click on the trace you created to view the performance data. In my case, my custom trace is placeQuery. 10) After clicking on the custom trace, you will see a dashboard that is similar to the one in the picture below. Click on View More. 11) After clicking on view more, you will see some specific traces realted to your custom trace. As you can see, you have the option to see the metrics depending on different factors like the browser, country, etc. 12) You can also set parameters to see when the performance on the page is below the average by setting a threshold. All of these performance metrics will help you understand how your app performs in different conditions to improve the user experience for your customers....

Jan 28, 2020

5 mins

General

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

Shuchi Mittal, the Head of Cloud enablement at Honeywell, discusses how she as a leader in platform engineering has been able to transform internal platform engineering teams at other organizations by providing teams with value-added services, and how they effectively managed costs. She talks about how to treat these teams as customers, and delivering services that meet the customer needs, but also charging them for their usage. By providing policy-compliant infrastructure and unique services tailored to their requirements, platform engineering teams can showcase their commitment to supporting the success of other teams within an organization. This approach not only fosters trust but also positions platform engineering as a strategic partner rather than just a service provider. By going beyond the basic infrastructure provisioning, the platform engineering team can offer services that help development and product teams streamline their processes and improve efficiency. Shuchi shares her work at Fiserv where she implemented a chargeback system to track usage and costs effectively, incentivizing better development practices. This not only helped in managing costs but also encouraged teams to optimize their resource utilization, leading to improved overall efficiency and more easily scalable systems. Her platform engineering team recognized the importance of effectively managing financial aspects to secure upfront investment for product development. By implementing a billing system based on gigabyte hours, they aligned costs with usage, enabling teams to have a clear understanding of their resource consumption. This approach not only provided transparency but also incentivized teams to adopt cost-effective practices. By strategically managing financial aspects, the platform engineering team gained the trust of stakeholders and secured the necessary resources to drive innovation and deliver value to the organization. Shuchi’s journey of platform engineering serves as a valuable example of how a team can transition from being a basic service provider to becoming an innovation partner within an organization. By building trust, offering value-added services, and strategically managing financial aspects, the platform engineering team successfully elevated their role and became a strategic enabler of innovation. Download this episode here....

Apr 16, 2024

2 mins

Engineering LeadershipSoftware Engineering

Angular Libraries with Nx for Enterprise Apps

What is Nx?

Why Use Angular Libraries?

Downside Of Using Libraries?

Advatanges Of Using Libraries?

What are Monorepos?

Advatanges Of Using Angular Monorepos?

Let's Get Our Hands Dirty

Nx Workspace Structure

Project Structure

Creating A UI Library

Time To Create A Component In Our UI Library

Creating A Service

Time To Use Our UI Library

Bonus (Shared Assests)

Time To Test Our App

And We Are Done! :)

Pato Vargas

You might also like

You Don't Need NgRx To Write a Good Angular App

Overview of the New Signal APIs in Angular

Intro To Performance Analytics with Firebase

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You might also like

You Don't Need NgRx To Write a Good Angular App

Overview of the New Signal APIs in Angular

Intro To Performance Analytics with Firebase

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

What is Nx?

Why Use Angular Libraries?

Downside Of Using Libraries?

Advatanges Of Using Libraries?

What are Monorepos?

Advatanges Of Using Angular Monorepos?

Let's Get Our Hands Dirty

Nx Workspace Structure

Project Structure

Creating A UI Library

Time To Create A Component In Our UI Library

Creating A Service

Time To Use Our UI Library

Bonus (Shared Assests)

Now, I'm Going to Show You How to Share Assets Between Projects.

Time To Test Our App

And We Are Done! :)

Pato Vargas

You Don't Need NgRx To Write a Good Angular App

Overview of the New Signal APIs in Angular

Intro To Performance Analytics with Firebase

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You Don't Need NgRx To Write a Good Angular App

Overview of the New Signal APIs in Angular

Intro To Performance Analytics with Firebase

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal