We extracted an assets workspace library and bundled static files.
The image element references the logo from the assets library. The first step is to generate a workspace library and clean it up as it won't contain TypeScript files, only static files.Įnter fullscreen mode Exit fullscreen mode Listing 8.
We'll generate an assets workspace library, extract our static assets to it, configure the workspace and update references to use the assets library. Generated Angular applications also come with the static file favicon.ico which is referenced in index.html. We can reference these assets from DOM element attributes and stylesheets by using absolute paths, for example and. When we generate an Angular application, it comes with an empty assets directory for static file assets such as icons, images, and web fonts. We'll create workspace libraries which the application can import through the scope. Create and update an Nx workspace with a single Angular application. Execute the commands in Listing 1.Įnter fullscreen mode Exit fullscreen mode Listing 1. To demonstrate this, we'll create an Nx workspace with a single Angular application. Afterwards, we'll discuss the benefits of the different tactics and techniques we use to apply the tiny application project strategy.Ĭreate an Nx workspace with an Angular application We'll walk through the commands and steps to set up a full Nx Angular workspace and apply a tiny application project strategy. Instead, let's kick this up a notch by extracting workspace libraries for static assets, styles, and environments. However, we won't walk through creating this type of library in this article. This shell library variant is also the one that keeps the least amount of logic in the application project which is very suitable for our purpose. For workspaces with a single application like this one, a feature shell library is a good choice. One tactic of this strategy is to use one of the shell library patterns for orchestration of initialisation, configuration and routing. We do this by encapsulating business logic and configuration in workspace libraries. In Nx workspaces, we can follow a strategy of keeping our Angular application projects as tiny as possible to have less reasons to change the application project and enable reuse of common code. This article is part of the Angular Architectural Patterns series.
Cover photo by John Moeses Bauan on Unsplash.
0 kommentar(er)
