![]() We'll make our Angular application project tinier by extracting a styles workspace library, convert styles.scss to a Sass partial, bundle it as part of a workspace library stylesheet and configure our application project to link to this stylesheet.Īs we did in a previous chapter, we start by generating a workspace library and clean it up as it will only contain stylesheets, not TypeScript files.Įnter fullscreen mode Exit fullscreen mode Listing 6 (repeated). This is similar to how we're used to tools like Webpack and Browserify bundling JavaScript and TypeScript files. Instead, they are bundled into a single stylesheet. At least not when we reference our application's static assets. Unlike vanilla CSS, Sass' import statements aren't loaded one at a time, asynchronously. Note that Sass uses convention to find the file whether it's name has an underscore prefix or not. Sass partials are bundled by using import statements, for example './lib/global'. When using Sass, we can split a stylesheet into Sass partials, which are conventionally have names prefixed with an underscore ( _), for example _global.scss. The global stylesheet can contain generic styles, element type styles, CSS objects, and utility styles.Ī global stylesheet grows larger and more complex as an application evolves. ![]() Try it out one more time to make sure that everything is set up correctly.Īngular applications are generated with a global stylesheet called styles.css or in our case styles.scss as we're using Sass. 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. #EDIT COMPONENT PRINCIPLE APP UPDATE#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 ![]() #EDIT COMPONENT PRINCIPLE APP FULL#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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |