How do I restructure and streamline my UI by using Angular Workspaces & Libraries?

Anthony Jones

in Angular / JavaScript / CLI / TypeScript / UX/UI Posted on

07/31/2020 10:12 AM

What are Angular Workspaces and Libraries, and why should I care?

Angular version 6 introduced Workspaces and Libraries to accommodate the increasingly popular monorepo pattern. Version 7 made this strategy easier with the addition of the Angular CLI --create-application option and can save you and your organization time, money, confusion refactoring, and more. Ultimately, Angular Workspaces and Libraries provide a way to better organize your code for multiple applications.

Prerequisites:

You’ll want to have a general understanding of Angular CLI, Modules, and Components. The source code is available at https://github.com/briebug/angular-answers-workspaces.

Where are we going?

The end goal is to have multiple applications utilizing dynamic/reusable components and services written in a shared library or libraries.

Most companies start out with one application. You have a few different views, and maybe you’re even using a container presenter model for the organization of code. That’s great, but we want to take that same approach to the next level: multiple applications.

Let’s say you’re part of a team building an online shoe store. You’ve received approval to update/re-write the web app and admin portal in the latest version of Angular. Currently, these two applications each have a unique git repository. Even though you’re working with the same API and database, the components and services interacting with them are kept separate, often duplicating functionality. Enter the Angular Workspace.

Directory structure: How the files relate

Workspaces were introduced in Angular version 6, but the method to create one was a little complicated. The CLI command ng new {app-name} would generate a standard single page application with a src/ directory containing your application. This is great for one application and no libraries, but not so great for a workspace with multiple applications and libraries. It required a fair amount of refactoring to get things right. However, the Angular team saved us this work in version 7 when they introduced the --create-application option.

Now, when creating a workspace, using the command ng new {app-name} --create-application=false generates the base structure and configurations for your workspace. When you generate your first application or library, a new projects/ directory is created with your application or library nested inside.

Step by step

Our first step after generating the Products library was to create a ProductsService allowing us to make a few requests to a json-server “API”. Check out their GitHub page if you want more information on json-server. It’s a great way to mock an API and database for quick prototypes.

From there we have the ProductListComponent, which has an @Output called productClicked. This allows the component using <lib-product-list> to handle the event however it needs to. We've injected the ProductsService through the constructor, and define the products%content%lt;/span> observable in the ngOnInit. Looking at the template, products%content%lt;/span> is iterated over in an *ngFor on the <lib-product> element using the async pipe.

@Component({
 selector: 'lib-product-list',
 template: `
     <lib-product *ngFor="let product of products$ | async" [product]="product" (click)="productClicked.emit(product)"></lib-product>
 `,
 styles: [`
     :host {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         max-width: 900px;
     }
 `]
})
export class ProductListComponent implements OnInit {
 @Output() productClicked = new EventEmitter<Product>();
 products$: Observable<Product[]>;

 constructor(private productsService: ProductsService) {
 }

 ngOnInit() {
  this.products$ = this.productsService.getAllProducts();
 }
}

@Component({
 selector: 'app-root',
 template: `
     <div class="header">
         <h2>Web App</h2>
         <div class="cart">
             <svg>...</svg>

             <span>{{cartAmount | currency:'USD':'symbol':'.0'}}</span>
         </div>
     </div>
     <lib-product-list (productClicked)="handleProductClicked($event)"></lib-product-list>
 `,
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 cartAmount = 0;

 handleProductClicked(product: Product) {
  this.cartAmount = this.cartAmount + product.price;
 }
}

@Component({
 selector: 'lib-manage-product',
 templateUrl: './manage-product.component.html',
 styleUrls: ['./manage-product.component.scss']
})
export class ManageProductComponent implements OnInit {
 form: FormGroup;
 product$: Observable<Product>;

 constructor(private fb: FormBuilder, private productsService: ProductsService, private route: ActivatedRoute) {
 }

 ngOnInit() {
  this.form = this.fb.group({
   imgUrl: '',
   name: '',
   price: ''
  });

  this.product$ = this.route.paramMap.pipe(switchMap(paramMap =>
   this.productsService.getProductById(+paramMap.get('id')))
  );
 }

 saveChanges(productToUpdate: Product) {
  const updatedProduct = {...productToUpdate, ...this.form.value};
  this.productsService.saveChanges(updatedProduct);
  this.form.markAsPristine();
 }
}

How do I restructure and streamline my UI by using Angular Workspaces & Libraries?

Product Lib

Web App

Web Admin App

Recent posts

Sharing Knowledge is in our DNA