David Lejeune •
Embark on the journey of Angular17
npm i -g @angular/cli is your friend. It’s always necessary to use the latest version of Angular for performance and security reasons.
To start a project, usually use ng new myApp. Angular’s CLI will then offer options like adding routing and specifying stylesheet syntax. Here’s the command I always use:
ng new myApp --routing --style=sass --minimal
--routing Want multiple pages in your app? Angular’s routing is well-made and essential for any respectable application.
--style=sass Personal preference. If you can write SCSS, you can write SASS. Just remove the ; semicolons and { braces }, and maintain indentation.
--minimal Personal preference. Angular includes sufficient testing tools like Karma and Jasmine. Removing these tools reduces the number of base files, making a project’s base reading much simpler. You can always add your own tools later when needed (hello, Cypress).
With all these, you’re ready to start your application with only what’s strictly necessary and in good conditions.
Angular’s CLI is powerful, generating pipes, components, services, and everything else in an Angular application without manual steps. For instance, the command ng generate component myNewComponent creates a new component in the ./src/app folder of your application. Check the full list of available commands on the Angular website.
This file communicates with webpack to operate your application as needed. When using ng generate command, Angular reads this file and creates the requested functionality based on the passed parameters, known as schematics. For example, for the command I use most in a project (ng generate component or ng g c for short), here are the parameters I use (line 9 in the angular.json file):
"@schematics/angular:component": {
"inlineStyle": true,
"style": "sass",
"skipTests": true,
"standalone": true,
"changeDetection": "OnPush"
},
“inlineStyle”: true : Allows writing style directly in components, applying it solely to your component. I almost never write inline styles since using Tailwind in my projects (more on this soon).
“style”: “sass” : Again, for styles, SCSS with less noise. Recommended.
“skipTests”: true: The generated component won’t have a default test file. Tests are useful as projects grow, but initially may add unnecessary complexity.
“standalone”: true: A standalone component imports what it needs and can be used anywhere it’s imported itself. No need to consider modules, imports, exports, declarations… more on this later in the article.
“changeDetection”: “OnPush”: The primary reason is to encourage smart coding. This parameter obliges the use of observables and signals to update component values. More on this later; you can also check this article to understand what it means.
All future components generated by the CLI will have these default parameters, speeding up your workflow.
Having worked on medium to large-sized applications with modules, you’ll often find yourself needing a component in multiple places where it wasn’t initially planned. When tied to your module, you need to export your component and then re-import the module into another module that will use it. It’s already starting to get confusing, right?
A standalone component imports its dependencies and always operates independently. Here’s an example:
@Component({
selector: 'app-login',
standalone: true,
imports: [NgOptimizedImage, RouterLink],
templateUrl: './login.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoginComponent { }
The component declared here imports routerLink for navigation and ngSrc to optimize images. No need to declare these imports in a module; they will always be accessible no matter where our component is used. This means that if we want to use this component in another standalone component, simply add it to the list of its imports (and in the HTML template), and it will function normally without any extra effort.
@Component({
selector: 'app-home-page',
standalone: true,
imports: [LoginComponent],
templateUrl: './home-page.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePageComponent { }
And that’s it! Goodbye modules, we won’t miss you. Don’t forget that you can also do this for pipes and directives.
Something the Angular team downplays or fails to highlight: the extensive use of the RxJS library by the framework. This library might (and probably will) have its own article, but in short, Angular uses it to manage application events (like the router) and HTTP requests. I struggled a lot to grasp this library, so don’t get discouraged. The possibilities are truly incredible. However, be aware that this library also brings its share of issues not extensively described by Angular (including memory leaks) that can discourage beginners.
This entails ensuring minimal use of .subscribe(), ensuring your subjects are properly takeUntilDestroy(), and using | async in your templates as much as possible.
Enjoy launching your first Angular project! Feel free to contact us for additional questions about the article or Angular in general.
