Angular Standalone Tutorial - Part 2: Project Graph

Run the command: npx nx graph. A browser should open up with the following contents:

Nx creates the graph based on the source code. The projects are not linked in this diagram because we haven't actually finished our application. Once we use the shared components in another project, Nx will create the dependency in the graph. Let's do that now.

Set Up the Router

Configure the routes:

src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { SharedUiModule } from 'shared/ui';

import { AppComponent } from './app.component';
import { NxWelcomeComponent } from './nx-welcome.component';
import { ShopComponent } from './shop/shop.component';

@NgModule({
  declarations: [AppComponent, NxWelcomeComponent, ShopComponent],
  imports: [
    BrowserModule,
    SharedUiModule,
    RouterModule.forRoot([
      {
        path: 'cart',
        loadChildren: () => import('@store/cart').then((m) => m.CartModule),
      },
      {
        path: '**',
        component: ShopComponent,
      },
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

src/app/app.component.html
<router-outlet></router-outlet>

`shared-ui`

Run the @nrwl/angular:component generator with the command:

Terminal

~/store❯

npx nx g @nrwl/angular:component banner --project=shared-ui --export


>  NX  Generating @nrwl/angular:component

CREATE shared/ui/src/lib/banner/banner.component.css
CREATE shared/ui/src/lib/banner/banner.component.html
CREATE shared/ui/src/lib/banner/banner.component.spec.ts
CREATE shared/ui/src/lib/banner/banner.component.ts
UPDATE shared/ui/src/lib/shared-ui.module.ts
UPDATE shared/ui/src/index.ts

Then create a simple Banner component in the generated file:

shared/ui/src/lib/banner/banner.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'store-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css'],
})
export class BannerComponent {
  @Input() text = '';
}

shared/ui/src/lib/banner/banner.component.html
<header>{{ text }}</header>

`cart`

Create a cart-route component:

Terminal

~/store❯

npx nx g @nrwl/angular:component cart-route --project=cart


>  NX  Generating @nrwl/angular:component

CREATE cart/src/lib/cart-route/cart-route.component.css
CREATE cart/src/lib/cart-route/cart-route.component.html
CREATE cart/src/lib/cart-route/cart-route.component.spec.ts
CREATE cart/src/lib/cart-route/cart-route.component.ts
UPDATE cart/src/lib/cart.module.ts

Add the Banner component to the cart route and link back to the main page:

cart/src/lib/cart.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { CartRouteComponent } from './cart-route/cart-route.component';
import { SharedUiModule } from 'shared/ui';

@NgModule({
  declarations: [CartRouteComponent],
  imports: [
    CommonModule,
    SharedUiModule,
    RouterModule.forChild([
      {
        path: '',
        component: CartRouteComponent,
      },
    ]),
  ],
})
export class CartModule {}

cart/src/lib/cart-route/cart-route.component.html
<store-banner text="Welcome to the cart." ></store-banner>
<a routerLink="/">Continue Shopping</a>

`store`

Update the shop component to use the Banner component and link to the cart.

src/app/shop/shop.component.html
<store-banner text="Here is a list of products to buy..." ></store-banner>
<a routerLink="/cart">View Cart</a>

Now run npx nx graph again:

Your graph now shows the dependency lines we expected.

The Project Graph is more than just a visualization - Nx provides tooling to optimize your task-running and even automate your CI based on this graph. This will be covered in more detail in: 4: Task Pipelines.

What's Next

Continue to 3: Task Running