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:
Written tutorial: nx.dev/tutorials/angular-stan...
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

Пікірлер: 45

  • @nxdevtools
    @nxdevtools Жыл бұрын

    Further useful infos: Tutorial: nx.dev/tutorials/angular-standalone-tutorial Final result repo: github.com/nrwl/nx-recipes/tree/main/standalone-angular-app Slack Community: go.nrwl.io/join-slack

  • @Nabulio85
    @Nabulio85Ай бұрын

    Really great. Thank you for your explanations. I've been working with Angular for five years and I'm just launching it with Nx.

  • @user-sm9pm1rx2r
    @user-sm9pm1rx2r5 ай бұрын

    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 :)

  • @carlosabud
    @carlosabud Жыл бұрын

    Great video man, keep it up!

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    💯Juri rocks!!

  • @AgustinCampon
    @AgustinCampon4 ай бұрын

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

  • @dryphresque7113
    @dryphresque71132 ай бұрын

    Thank you for the video, a understand a lot 👍

  • @jairusshole8622
    @jairusshole86222 ай бұрын

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

  • @nxdevtools

    @nxdevtools

    2 ай бұрын

    You're welcome - Juri

  • @sambio2122
    @sambio21229 ай бұрын

    Bravo ❤ 🎉!!!

  • @fieryscorpion
    @fieryscorpion7 ай бұрын

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

  • @Santon-Motho
    @Santon-Motho11 ай бұрын

    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

  • @nxdevtools

    @nxdevtools

    11 ай бұрын

    💙 we will 💪 - Juri

  • @leiayuri
    @leiayuri2 ай бұрын

    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.

  • @muhamedkarajic
    @muhamedkarajic Жыл бұрын

    We want for the CI also a video :)

  • @foreignworkers2006
    @foreignworkers20069 ай бұрын

    Kudos

  • @igorr4682
    @igorr4682 Жыл бұрын

    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

  • @juristr

    @juristr

    11 ай бұрын

    Hey, sorry you feel that you didn’t find it useful for learning more about the topic. Any particular parts you didn’t like? Or want me (us) to improve on?

  • @MartinPultz
    @MartinPultz11 ай бұрын

    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

  • @leonardocamargo5412
    @leonardocamargo5412 Жыл бұрын

    If I need to create a small module within the application. For example: Customer module, which has only the following components: Registration form page; Edit form page; Page of the table with the list of customers. NX will create a local library of clients. As this is a small module, won't separating it into a local library make the project too big and cumbersome? Besides, as a local library will be, instead of installing its own dependencies, is it okay if I use the dependencies globally in the application?

  • @KiffinGish
    @KiffinGish10 ай бұрын

    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?

  • @tm-tk8ez

    @tm-tk8ez

    8 ай бұрын

    literally my question! I was so curious how he would use the ui lib. I've came across this video while looking for a help: I'd like to have one common library that would provide material-based components. @nx/angular:library generates a standalone component by default and I'd imagine such library would be a module which would provide multiple non-standalone components. From brief look, feels like nx generators does not support such approach, or am I wrong?

  • @HarveyDaclan
    @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?

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    scss is a weirder piece to work with for Nx. You can do stuff like make a project for it to "bucket" it into it's own space, but usually the way I handle things with styles is to create a lib (or multiple libs) with shared components that use the styles in question. (I also tend to go for tailwind though!! lol)

  • @aritrobiswas1731
    @aritrobiswas173110 ай бұрын

    nx graph is showing static load instead of dynamic. In browser page is lazy loading , anyone facing the same issue ?

  • @valikonen
    @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?

  • @sivuyilemagutywa5286

    @sivuyilemagutywa5286

    Жыл бұрын

    Try adding an IONIC app in an Angular CLI Workspace, Angular Workspace is good for simple projects, but with NX, it can save a lot of time. For I don't see a reason to ever use Angular CLI Workspace, even for small apps. Nx is more than just a Workspace.

  • @fieryscorpion
    @fieryscorpion7 ай бұрын

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

  • @BobMazzo
    @BobMazzoАй бұрын

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

  • @Matheus_1582
    @Matheus_1582 Жыл бұрын

    Como introduzir isso no IONIC...???

  • @ernstdettbarn3822
    @ernstdettbarn38226 ай бұрын

    Nice nice nice

  • @iliasdinia6475
    @iliasdinia64755 ай бұрын

    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

  • @nemanjazivaljevic1656
    @nemanjazivaljevic1656 Жыл бұрын

    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.

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    You can use Nx to create multiple libs to section your components better, but iirc, we don't run our own "nx bundler" for Angular apps - we just use Angular's builder for this - and tree-shaking should be happening at that level. I wonder though if it's possible that you are referencing the unused components somehow so that they wouldn't get tree-shaken? 🤔

  • @punplatuna
    @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?

  • @juristr

    @juristr

    Жыл бұрын

    Hey! Yeah you can. The structure I show in the video is really just one possible way of structuring. But yeah, usually you structure the folders based on the domain area, meaning if you have shared things that can be used across the entire app you'd place them there. That's mostly just for developers as a help to orientate. A structure could be modules/

  • @alessandrocolinucci3315

    @alessandrocolinucci3315

    Жыл бұрын

    @@juristr Great answer and structure! I have a small question I hope you can help me with it because this drives me crazy: let's suppose we have the use case of the video, different "orders" and "products" domains, with linting for bounding rules. In this case, I have NgRx installed, and in the "orders" domain I want to show the top 10 products to make an upsell. I can achieve this with an NgRx selector that is declared in a "data-access" lib of the "products" domain. How can I use this selector inside a lib in the "orders" domain without breaking the linting rules for boundaries?

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    @@alessandrocolinucci3315 NgRx makes for an interesting case when it comes to creating out a separate data-access lib. Here's an older video where I address that issue exactly: kzread.info/dash/bejne/qpulqpOQh7W0mKQ.htmlm30s

  • @alessandrocolinucci3315

    @alessandrocolinucci3315

    Жыл бұрын

    ​@@Supaship6000 That's a great tip! Thank you

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    @@alessandrocolinucci3315 glad it helped!

  • @ankushkalia6982
    @ankushkalia6982 Жыл бұрын

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

  • @valikonen

    @valikonen

    Жыл бұрын

    At least with module federation, yes.

  • @Supaship6000

    @Supaship6000

    Жыл бұрын

    This is one of the more requested features we've seen. I don't believe we have a generator for this yet to automate the process, but it can be done manually by moving around files!

  • @aram5642
    @aram564244 минут бұрын

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

  • @iliasdinia6475
    @iliasdinia64755 ай бұрын

    Great video! However you do everything way too fast. That makes it a struggle for less experienced developers

Келесі