The context
The ideas presented in this article are based on extensive experience from large enterprise environment (100 Angular SPAs and 30+ libs )…
To be more precise, the initial impulse to explore this topic was creation of a second “component framework” (think internal Angular Material) following this approach and comparing it to the original one which does NOT use the
ng-packagrsub-entries…
The sub-entries facilitated tree-shaking means that when we import something, eg a MyOrgDropdownModule then we’re only getting implementation of that sub-entry (and sub-entries it explicitly imports, eg it may use MyOrgIconModule ) and nothing else!
Think 1.5 MB vs…
🎙 ️EDIT: Check out Angular Air episode where I walk about the concepts discussed in this article with amazing Justin Schwartzenberger, Alyssa Nicoll and Bonnie @bonnster75 ! 🎙️ 🎉🎉🎉
EDIT: (15.9.2020) Wanna learn about Angular Library Architecture?
In this article we are going to learn how to scaffold new Angular application with clean, maintainable and extendable architecture in almost no time and what are the benefits of doing so. Besides many actionable tips, we’ll also discuss guidelines about where we should implement most common things like reusable services, feature specific components and others…
For the last year and a half…
In this article we’re going to explore various approaches how to implement reactive sub-forms and discuss their trade-offs. At the end you will be able to make informed decision based on the particular use case to deliver best possible experience for your users and great developer experience for your colleagues!
Forms represent one of the most important parts of almost all frontend applications. From a single input field to a multi step wizards, forms enable dialog with the users by providing them with a way to submit many different kinds of data!
When developing Angular application, we will rarely end…
⚡ UPDATE: Check out video presentation from Angular Zurich Meetup & the library itself!
Or any other Web Components in your Angular applications!
In this article we will be focusing on learning how to use Angular elements and other web components in the context of parent ( consumer ) Angular applications. It’s based on hands-on production ready experience from large enterprise organization with more than hundred of SPAs and libraries combined!
Angular Elements and Web Components Refresher
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and…
In this article we’re going to explore…
- what are route path parameters
- how we can access route path parameters in a standard way
- what are the non-routed components
- why it is hard to access route path params in the non -routed components
- how to access them if we really need to
- other ways around the problem
- ⚡StackBlitz working example of the described concepts…
Let’s go!
Angular routing is a very useful and powerful feature which usually “just works” as expected! However, there are some edge cases which deserves special attention…
Imagine a following situation. We have an Angular application with some route and this route defines a…
This article is based on a real life experience from a large enterprise environment with more than 60 SPAs and cca 30 libraries…
Angular libraries are great way to organize code! Angular CLI comes with an amazing built-in support to create, build and test library projects inside of the standard workspace.
Libraries shine the most in environments with multiple Angular applications with a large potential for code reuse and composition!
Libraries can also be of great help in shops which need to spit out client projects at a high cadence! In that case the libraries can represent reusable configurable add-ons…
Schematics are great! They enable us to achieve more in shorter amount of time! But most importantly, we can think less about mundane stuff which leaves our limited attention span to focus on solving real challenges!
Check out video from Angular Meetup Zurich with live coding of custom schematics!
☕☕☕☕☕ 20 minutes read
⚠️ This is a pretty long article which gets into every detail of implementing custom Angular schematics…
This article will teach you how to create tailor made schematics specific to the needs of your project or organization! …
Remember: .pipe() is not .subscribe()!
This article is directed at the beginners trying to increase their RxJs knowledge but can also be a quick refresh or a reference to show to beginners for more experienced developers!
Today we are going to keep it short and straight to the point!
Currently I am working in a rather large organization quite a few teams and projects (more than 40 SPAs) that are in the process of migration to Angular and therefore also RxJs.
This represents a great opportunity to get in touch with the confusing parts of RxJs which can be easy to forget once one masters…
Angular Schematics is a workflow tool for the modern web — official introduction article
Quick Intro
There are many articles on how to build your own Angular schematics but in this one we’re going to focus on using available schematics to the fullest! 💪
Most of the time we will be using
@schematics/angularwhich are provided in Angular CLI out of the box.
What are we going to learn
- Use shortcuts, they are much faster and easier to type, duhhh 😂!
- Skip creation of an initial application
- Generate multiple applications and libs to promote code reuse
- Use schematics from different npm packages
- Set schematics defaults in
angular.jsonfile…
Tomas Trajan
🅰️ Google Developer Expert for Angular #GDE ❤️ ️Typescript 🛠️ Maker of the @releasebutler and Medium Enhanced Stats 🌞 Obviously the bright Future
