Getting Started with Standalone Components in Angular

Join the Angular team's very own Jessica Janiuk as she guides us through the getting started with the brand new Standalone Components feature in Angular.
Join the conversation online:
Angular Twitter → / angular
Jessica's Twitter → / thepunderwoman
Example Code:
github.com/angular/examples/t...

[@kedevked]

Angular keeps on becoming better and better 🎉🙏🏾

[@bestraub98]

Finally! This was the main feature angular was missing, compared to react and vue. It makes refactoring so much easier (just because less files are involved).

[@rajtkbabu]

Amazing feature, when building with react component , we expected something we need here in Angular also.. Thanks you Angular team..

[@lukash9952]

Love this new feature! Used it already in prod project.

[@josephsackeykontor4138]

I love this feature. Finally, it is here

[@yuriimarshalofficial]

Thanks for explaining, I rewrote the project today, removed all modules and set components as standalone. Now I feel like the most standalone programmer with all that provider functions at main.ts file. The framework is moving to splitted direct dependencies more and more. That's the great decision but also I so used to work with modules) For now my feature folder is determined with routing of lazy loading components. Please create more examples of all native modules providers that were wrapped by functions with new naming 🙏❤

[@metric152]

This is a great feature. Looking forward to when this is production ready

[@md.zahidhasansohan6921]

great thanks for that! Very clear and articulate!

[@MelroyvandenBerg]

Thanks for the link to the example code!

[@thominchrist]

Great api, the ngmodule was time consuming for quick startup. But lazy loaded was existing in previous version

[@nahuelleiva8460]

This is an amazing feature because it reduces the number of files you'll need to handle in your project but I think it will be widely used to implement small components rather than bigger ones. For bigger/larger/more complex components, having separate things will be a cleaner and wiser approach. I don't see a component with a certain level of high complexity being developed using standalone components, having that much HTML code inside a single file could be a bit messy to deal with. But it's my guess, I could be wrong.

[@derbenrich]

Yessss! Imho It will nudge you to split your components earlier down to reusable pieces, instead of the ever-growing monstrous components that mingle too much together! :D

[@surajbande5841]

exciting feature! Thank you team for your efforts.. appreciate lot! Looks like Angular is becoming pure components based like other frameworks.. looking forward to using it soon in the project..!!

[@JuanPablodelaTorre]

With the popularization of Single Component Angular Modules (SCAM), standalone components was the most obvious next step. I'm thrilled this happened so seamlessly. ps. Am I the only one weirded out by how clear the mic sound is? now I want to know what microphone was used.

[@markthompson-g]

I can tell you exactly which :) We used the Rode NTG3 for this video. Also, I'm so glad you are enjoying Standalone Components!

[@JuanPablodelaTorre]

@@markthompson-g Hey! Thanks for the tip on the mic! And I'm loving standalone components. Perfect for dynamic instantiation too!

[@stefanitotokocopullo2739]

Great feature and presenattion. Thank you

[@babchenkonikolay911]

This is so clean!

[@otakujsdev]

THANK YOU! for such a great job!

[@NagnathMungade]

Excited to work with this feature.

[@danielm8482]

thanks, very clear presentation

[@joeyvico]

Beautiful!! This new feature sounds promising and it feels Angular is getting lighter and lighter. Thanks

[@malobuchino]

thanks for the video, it was really informative

[@rajivranjan1573]

much easier now! thanks.

[@scottwong365]

How does setting up specs work? Normally we define a testing module with all the imports/declarations.

[@user-iy7rm7dt8x]

Good video. Thank you.

[@Whizyrel]

I see, "I am standing here alone...". Nice entry point 😂

[@elavarasur3458]

NgModules essentially were a skeleton structure which gave angular apps its architecture and making them optional will allow developers to create apps in an unopinionated manner like react. Angular's inbuilt architecture is the one of the best features and an important reason to be adopted by enterprises and they just undid this. This looks like a step backward than forward. Can someone please tell me how this feature and this direction is a good thing....?

[@ki9wi]

can be used for small apps and made learning angular easier for absolute starters not having the modules concept as a must.

[@f1am3d]

I've switched to Enterprise project based on React about a year ago, so I have the competence to compare two ecosystems. Damn, Angular is like a swizz knife has everything you need, has way better documentation and better standards, I kinda miss it. The only flaw is performance in some cases, but I think the Angular team will resolve this issue eventually by switching the compiler to esbuild and by making zone.js and rxjs optional. It can be faster and lighter without losing its versatility.

[@LarsRyeJeppesen]

It is now, and signal-based components will be a total game changer. Signals as component inputs ftw! Cheers

[@sned_dunes]

The documentation was exactly what made me choose Angular over React for my project

[@respostasimples]

great, thanks!!

[@TayambaMwanza]

That pun took me 2 seconds but it definitely hit 🤣

[@AdrianClaudiuDima]

Keep up the good work ! 👌👌🎉🎉 Although it is a very nice feature, I’m afraid it will not be used as per design, especially for the new devs staring with Angular.

[@Gasprasound]

Many thanks

[@sanjaygarg3540]

Amazing!

[@tharindu79]

Loved those puns 😊

[@arjunshinde7]

Its a great improvement towards moving to functional based programming from class based ones. I wish this will become the default in angular future. Makes beginners user friendly developers experience. Congratulations Angular !!!!😁🥳

[@catalintudorciurte309]

I doubt they will change from class components to function components. And they really shouldn't.

[@MelroyvandenBerg]

When I use: `ng generate component DogsList --flat --standalone`. I no longer get the CommonModule as imports nor implements OnInit by default in my generated code. is that correct??

[@olivierboisse1678]

Is it normal to not have the routerModule in the imports array of DogViewComponent (which is using ActivatedRoute from @angular/router) ? Do we need to add the module into the imports array only when we are using this module into the component template ?

[@seabird021186]

Sample of Demo is not good, If you use : Learn More This page will reload all scripts, images, including [main.js] . So, I recommend you demo with using [routerLink] to reload only script.

[@GeoffTripoli]

Ya, she actually says they are using the "routerLink" directive, but then they type an "href". Oops.

[@zoro9878]

angular is going to take over the front-end world!!

[@fordiebody1981]

Finally, coping up with react and other web frameworks.

[@dr.d3600]

Cool for standalone components But are you error using href in a link?

[@shivrajdeopa1571]

🙏 great presentation

[@AbhiroopSantra]

Love the way Angular is slowly making itself a clone of React 😆

[@artemmalieiev7500]

Is it possible to avoid doing boilerplate import of CommonModule ?

[@CoderCoronet]

Super cool! What is the VS Code skin you’re using?

[@JeromeGuarin]

I think that's VS Code's high contrast theme

[@markthompson-g]

@@JeromeGuarin that is correct!

[@adietltesa]

Hi. I hava a doubt. If You create a service to Open diálogs. How do You import the diálogModule in said singleton?

[@durairajrajendiran9725]

Great guys, standalone components are stable now?

[@collinsk8754]

Interesting addition 🤔. But, I think I'll stick to the existing modus operandi for components😎.

[@turyng-or1js]

"This is of a great IMPORTance"😍

[@djglxxii]

What about service dependencies? For example, a service that depends on the HttpClientModule. Who imports that? I don't like the idea of the consuming component having to know about dependencies of dependencies.

[@robertotomas]

How do standalone components play with federation?

[@nathanalberg]

I think its important to highlight that the lazy load method is `loadComponent`.... not `loadChildren` ... which is how other parts of my app are lazy loading modules... I didnt realize this and was getting `Error: ASSERTION ERROR: NgModule 'LoginPageComponent' is not a subtype of 'NgModuleType'. [Expected=> null != null

[@gurpreetsingh6785]

Will standalone components work with scully?

[@feelwang]

I guess that means Shared “components” module now can be rightly replaced by a folder of standalone components?

[@catalintudorciurte309]

Exactly

[@dusannovakovic8606]

shared components module should not exist at all

[@maxstetsenko8626]

Great !)

[@derrickc2823]

Will this increase the build size with all the imports? and is there any use for modules at all after this? Shared import maybe?

[@catalintudorciurte309]

This feature is especially usefull to replace the shared module pattern, where you just threw everything in there and imported it everywhere. The downside of standalone components, compared to ng-modules is that they provide no dependency encapsulation. So, the rule of thumb will be: "Will I need to hide dependencies and expose only SOME components?" Then you go for an ng-module, otherwise for standalone components

[@Tomas-ir8xl]

No, it actually decreases production bundle size (especially if you import only specific directives and pipes instead of importing whole "CommonModule" and "RouterModule" everywhere). Just migrated a small project and the "initial chunk" file size decreased by around 3% after migration.

[@kenlnetherland]

Can these be npm packaged?

[@LimitlessMinds]

There are no links to the example project as said at the end of the video 😅

[@cykablyat867]

Greeeeeat

[@holycrimpsauce]

Dope

[@softlion2023]

saludos seria muy bueno si estuviera también en español para la comunidad que no hablamos ingles fluido... gracias

[@bensadik]

Very cool, I'm using standalone components only since it got out, my app got no modules whatsoever

[@fitsuit1555]

How did it affect your bundle size?

[@pazzuto]

As Fit suit asked, I'm also interested to know the bundle size. How did it compare to the old version?

[@Tomas-ir8xl]

@@fitsuit1555 It reduces the bundle size. In my case "initial chunk" file size decreased by around 3% after getting rid of all NgModules.

[@miroslavpetrov3006]

Will this new feature reduce the total blocking time in google web page speed? If yes this is HUGE!

[@ben-barbier]

❤

[@LuadoO]

What vscode theme is she using? :OO

[@sharathmohan8316]

this is how out minds think, in components rather than modules

[@rk1484]

In angular 2 also ng module concept was not there

[@tusharbhattacharya6215]

What was the vscode theme?

[@markthompson-g]

high contrast :)

[@randomlee101]

How do I upgrade my current project to Angular 14? I want to be able to add title to my routes 🙂

[@peterniks]

ng update

[@randomlee101]

@@peterniks thank you

[@onlinetech2023]

🎉

[@RobbieSherman]

Why did you add "!" after dog and index in Input'ing them?

[@williamboshi1855]

Iirc ? Is "type or null or undefined" while ! Is "I know I'm not initialising my var but trust me bro it won't be null" cause Angular will inject the value and typescript doesn't know that

[@dimitritsikaridze6220]

it's because of tsconfig option strictTemplateChecking is set to true edit: correction - it's just property "strict" that is set to true in tsconfig which applies all kinds of strict settings, if you want to get rid of "!" you need to set new property strictTemplateChecking to false

[@jonathancalderon9083]

I saw you were using the "redirect" as the first route,I learned at Docs that should precede the wildcard. anyways, the explanation was extremely good

[@LettuceBunnies]

She just wanted to redirect from `/` to `/list` not any page.

[@datguy4104]

Sick

[@samuelmadaras4377]

What is the meaning of "!" in "@Input() dog!: Dog;"?

[@Angular]

That's called the "Non-null assertion operator" and it asserts that the value of the input passed into the component won't be null. Here's more information: www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

[@Meolafon]

Very interesting, but I am a bit concerned about editing templates as a string (no IDE support) inside of a component file

[@JuanPablodelaTorre]

VS Code supports syntax highlight and intellisense for inline templates. But you can still use a separate HTML file for the template as usual.

[@Tomas-ir8xl]

You don't have to use inline templates with "standalone" components. The feature helps you get rid of NgModules, it has nothing to do with inline html template.

[@murilomorilonalmeida143]

"Import...tance." and "view... of that." The face after the jokes killed me. x) Angular is more awesome...er. Btw, What a weird vscode theme. o.o

[@programmercouple]

"Standing Alone" to tell us about StandAlone Components...good one 😂😂

[@WesFanMan]

...simplified the Angular learning tree... yeah, good luck with that.

[@manit77]

it would be cool if the standalone component can define its own route. Then there would not be a need to define it in app routes or module routes.

[@Angular]

What's your thought process for how this would work?

[@datguy4104]

This is a really bad idea. Like incredibly bad. Please don't do this lol

[@theanswer1993]

So Angular is becoming more like React and Vue?

[@TayambaMwanza]

This is something the Angular team has been aiming for a while, ngModules was always a temporary solution, I don't think you can say that standalone components is really special to any particular framework it's just that Angular didn't have it.

[@andreip.8321]

so painful seeing the navigation to dogView using a href...

[@pepew7102]

Do you have any plan of removing RxJS completly from Angular ?

[@LarsRyeJeppesen]

Hopefully not. Promises suck

[@pepew7102]

@@LarsRyeJeppesen The reason why Angular is struggling to survive is mainly RxJS (and modules). It's adding unecessary complexity. React, Vue, Svelte, Solid, etc are working perfectly fine without RxJS.

[@LarsRyeJeppesen]

@@pepew7102 I dont think A gular should be dummed down by looking at older frameworks like you mentioned. Observables are vastly superior to promises.

[@pepew7102]

@@LarsRyeJeppesen I agree that observables are more powerful than promises but also a lot more complicated to understand. And most of the time the power of observables is just not necessary (for example http requests).

[@catalintudorciurte309]

Angular is coupled forever with rxjs. It will never go away. Nor should it go away. Rxjs is one of the most rewarding libraries there are

[@chaka1530]

Are there people who are fan of modules, or I am the only one? I like when the enterprise projects are structured in a neat way using NgModules. Switching to standalone components seems unnecessary and potentially messy as the app grows.

[@fetis26]

you're not alone here. you'll have to group them anyway at the end

[@mentoriii3475]

As an experienced react dev I'm happy when i see angular becoming better, glad the team is working extra hard to improve angular and make it on par with react

[@theanswer1993]

What is the advantage if you are already fine with the module approach? As far as I see it's just a simplified version of Angular for those coming from React and Vue aka less skilled developers who want to get into Angular but can't figure out Modules. So I see this more of a survival move from Google as Angular started to become less and less popular as noobs don't want to start with it.

[@catalintudorciurte309]

There are advantages, especially in replacing the SCAM pattern

[@back-ups7919]

She speaks Tahoma

[@HasanBGuner]

Good info but not professional. Because it doesn't talk about concrete roadmap. What is the place of module and component in the future. Doesn't give confidence about how to design for future compliance.

[@cmntkxp]

Watering down to react level

[@catalintudorciurte309]

Neh, it is good to have options. ng-modules will not dissapear, standalone components will just replace the SCAM pattern

[@TayambaMwanza]

How is it watering down to have components manage dependencies directly? I actually found it's easier to organize your codebase than shared module.

[@davidcaravan]

Using href here makes the whole app reload... are you serious Angular ?

[@Guptasir1993]

Hi Angular Team, My request is to remove package.json and node modules in your next versions... As it affects in my projects as devloper we need to setup locally angular project..But it become complex ..more errors are comming My opinion,we can use angular without package.json..Just like Deno works..We move forward we can inhance performance and any body can upgrade the angular project.. Please look into these case . Thanks Aayush Gupta

[@braco0000]

Uhmmmm... Angular getting away from being Angular...?

[@balaloha]

is this AI?