Building Modular Angular Apps with the Nx Standalone Project Setup

In this video, we're going to build a Standalone Nx Workspace with Angular. That is a single-project workspace just similar to what the Angular CLI creates. We're going to look into how Nx compares to that, the advantages of using Nx, caching as well as how you can modularize your Angular codebase.

Links:

Chapters:
0:00 Intro
0:49 Creating a new Angular Workspace
4:56 Serving the App
6:09 Testing, Linting and Running e2e tests
7:23 Running Multiple Tasks & Caching
8:20 Using Code Generators
11:20 Building the App for Deployment
12:03 Midway checkpoint!!
12:30 Modularizing your Angular Codebase
15:58 Use the Nx Graph to Visualize your Codebase
16:16 Importing Local Libraries into your Angular App
19:07 Using Module Boundaries to Create More Maintainable Code
24:54 Wrapping Up

[Nabulio]

Really great.

Thank you for your explanations.

I've been working with Angular for five years and I'm just launching it with Nx.

[OussamaDinia]

This is a game changer for us developers, to start using nx and also well structuring our angular apps for progressing towards monorepo only if necessary. it is also a good way to become more familiar with many nx commands. really cool :)

[jairusshole]

I never understood why one would need to use a monorepo until now! Thank you sir!

[AgustinCampon]

On my next project Im gonna try nx ! Looks really solid

[leiayuri]

Nice, would be very nice also. Give some example scenarios how to Setup a CI as you said. I know i can be done you many ways, but maybe try to select the most common scenarios. Thanks for the video.

[dryphresque]

Thank you for the video, a understand a lot 👍

[Santon-Motho]

OMG I finally SEE the value of Nx! This was a gem of a video. I might be assuming too much right now, but I'm excited to explore Nx a lot more now. Please keep uploading such videos

[igorr]

Regrettably, possessing programming knowledge and familiarity with the topic does not automatically translate to being an effective teacher. Alongside technical expertise, proper communication skills and clear pronunciation are imperative to ensure that your audience is on the same page and fully engaged in the learning process

[fieryscorpion]

Great video. This is quite interesting!
Do you have the next video out yet? Thanks!

[valikonen]

I really don't understand why you don't create many projects to use the shared modules. Your scenario can be done simpler with angular cli and don't need an extra layer like NX. I miss something?

[KiffinGish]

Great video, thanks. You create a shared ui component, but what would one use this for? What about shared header and footer components, would they be placed in here also. What about a shared material library?

[aram]

Why does a new library always have to create a component? Couldn't there be a flag to disable this behavior?

[BobMazzo]

Interesting how changing the port num in project.json and e2e\cypress.config.ts is NOT recognized. Cache related I imagine..

[fieryscorpion]

Q: Why is @nx/angular a dependency and not a dev dependency? Can you please explain? Thanks!

[ankushkalia]

Can i convert a standalone app to monorepo setup in future?

[HarveyDaclan]

Hi Juri, thanks for this tutorial. I usually have a shared theme in my projects. How do I share scss files from one library to another? Is this possible in both standalone and monorepo projects?

[MartinPultz]

I noticed that their were some merges around eslint v8 to v9. I thought maybe running the migration from 16.5 to 16.6 might perform that update. Is that something that hasn't quite made it's way into an Nx release, but eventually would self update or do I need to perform that update myself? Feels like the answer is yes it will update, but wasn't sure after my last nx migrate. Cheers! Reply

[iliasdinia]

About the lazy loaded routes, when you type .then and use the onfulfilled function. Did you create that function somewhere ? Could you please explain how and why are you using it ?
It did not work for me, i did plenty of research. In the end I just decided to remove it and use a lazy loaded route without the onfulfilled thing

[nemanjazivaljevic]

Can someone help me with this? I have multiple angular apps that use UI components from libs file. The problem is that nx doesn't tree shake them, it bundle everithing.

[punplatuna]

Hi, I'm new to NX console and I've been trying to follow this tutorial
I have a few questions:
Regarding the shared/ui directory, should I place shared UI components like a navbar or footer there? like shared/ui/src/lib/ui-navbar right ?

If I want to create a UI for a feature, what steps should I follow?