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).
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....?
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.
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
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 🙏❤
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.
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??
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.
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
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
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.
One thing i dont understand about standalone components is the sheer amount of imports you need for even simple components. A material modal takes an absolute ton of modules to work properly and becomes cumbersome to manage. Am i doing something wrong?
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.
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 ?
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
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
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..!!
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
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.
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.
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.
@@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 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).
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 !!!!😁🥳
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.
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.
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.
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
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.
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
Angular keeps on becoming better and better 🎉🙏🏾
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).
Love this new feature! Used it already in prod project.
Amazing feature, when building with react component , we expected something we need here in Angular also..
Thanks you Angular team..
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....?
can be used for small apps and made learning angular easier for absolute starters not having the modules concept as a must.
I agree with you on this. The standalone thing never made any sense to me, just like we are trying to be like react?
I love this feature. Finally, it is here
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.
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
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 🙏❤
Great api, the ngmodule was time consuming for quick startup.
But lazy loaded was existing in previous version
How does setting up specs work? Normally we define a testing module with all the imports/declarations.
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.
I can tell you exactly which :) We used the Rode NTG3 for this video. Also, I'm so glad you are enjoying Standalone Components!
@@markthompson-g Hey! Thanks for the tip on the mic! And I'm loving standalone components. Perfect for dynamic instantiation too!
Thanks for the link to the example code!
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??
I guess that means Shared “components” module now can be rightly replaced by a folder of standalone components?
Exactly
shared components module should not exist at all
This is a great feature. Looking forward to when this is production ready
I see, "I am standing here alone...". Nice entry point 😂
This change turned out to be a lot better than I expected. Glad to see the bloat-ware that Angular is being improved.
Excited to work with this feature.
Is it possible to avoid doing boilerplate import of CommonModule ?
What was the vscode theme?
high contrast :)
How do standalone components play with federation?
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.
It is now, and signal-based components will be a total game changer. Signals as component inputs ftw! Cheers
The documentation was exactly what made me choose Angular over React for my project
Why did you add "!" after dog and index in Input'ing them?
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
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
Great feature and presenattion. Thank you
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.
This is so clean!
How do I upgrade my current project to Angular 14? I want to be able to add title to my routes 🙂
ng update
@@peterniks thank you
Great video, and I loved the puns 🖖
great thanks for that! Very clear and articulate!
That pun took me 2 seconds but it definitely hit 🤣
One thing i dont understand about standalone components is the sheer amount of imports you need for even simple components. A material modal takes an absolute ton of modules to work properly and becomes cumbersome to manage. Am i doing something wrong?
Super cool! What is the VS Code skin you’re using?
I think that's VS Code's high contrast theme
@@JeromeGuarin that is correct!
Hi. I hava a doubt. If You create a service to Open diálogs. How do You import the diálogModule in said singleton?
Great guys, standalone components are stable now?
There are no links to the example project as said at the end of the video 😅
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.
Ya, she actually says they are using the "routerLink" directive, but then they type an "href". Oops.
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 ?
angular is going to take over the front-end world!!
In angular 2 also ng module concept was not there
Love the way Angular is slowly making itself a clone of React 😆
Will this new feature reduce the total blocking time in google web page speed? If yes this is HUGE!
Will standalone components work with scully?
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
Very cool, I'm using standalone components only since it got out, my app got no modules whatsoever
How did it affect your bundle size?
As Fit suit asked, I'm also interested to know the bundle size. How did it compare to the old version?
@@fitsuit1555 It reduces the bundle size. In my case "initial chunk" file size decreased by around 3% after getting rid of all NgModules.
thanks, very clear presentation
Can these be npm packaged?
Thanks for the tutorial and English English
Cool for standalone components
But are you error using href in a link?
THANK YOU! for such a great job!
Beautiful!! This new feature sounds promising and it feels Angular is getting lighter and lighter. Thanks
much easier now! thanks.
thanks for the video, it was really informative
"This is of a great IMPORTance"😍
What is the meaning of "!" in "@Input() dog!: Dog;"?
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
Loved those puns 😊
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..!!
Will this increase the build size with all the imports? and is there any use for modules at all after this? Shared import maybe?
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
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.
Good video. Thank you.
What vscode theme is she using? :OO
Interesting addition 🤔. But, I think I'll stick to the existing modus operandi for components😎.
Very interesting, but I am a bit concerned about editing templates as a string (no IDE support) inside of a component file
VS Code supports syntax highlight and intellisense for inline templates. But you can still use a separate HTML file for the template as usual.
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.
Finally, coping up with react and other web frameworks.
saludos seria muy bueno si estuviera también en español para la comunidad que no hablamos ingles fluido... gracias
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.
Do you have any plan of removing RxJS completly from Angular ?
Hopefully not. Promises suck
@@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.
@@pepew7102 I dont think A gular should be dummed down by looking at older frameworks like you mentioned. Observables are vastly superior to promises.
@@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).
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
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 !!!!😁🥳
I doubt they will change from class components to function components. And they really shouldn't.
this is how out minds think, in components rather than modules
great, thanks!!
So Angular is becoming more like React and Vue?
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.
🙏 great presentation
Amazing!
Many thanks
"Standing Alone" to tell us about StandAlone Components...good one 😂😂
Greeeeeat
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.
What's your thought process for how this would work?
This is a really bad idea. Like incredibly bad. Please don't do this lol
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.
There are advantages, especially in replacing the SCAM pattern
ua-cam.com/users/shortsiSDAA0fdnZo
...simplified the Angular learning tree... yeah, good luck with that.
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.
you're not alone here. you'll have to group them anyway at the end
❤
Great !)
Dope
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
She just wanted to redirect from `/` to `/list` not any page.
🎉
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
"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
so painful seeing the navigation to dogView using a href...
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.
wow and ... wow
Sick
so many puns hahaha!
Watering down to react level
Neh, it is good to have options. ng-modules will not dissapear, standalone components will just replace the SCAM pattern
How is it watering down to have components manage dependencies directly? I actually found it's easier to organize your codebase than shared module.
Using href here makes the whole app reload... are you serious Angular ?
She speaks Tahoma
Uhmmmm... Angular getting away from being Angular...?
NONONONO ESTA MAL ESO NO. ASI NO ES!!!
is this AI?
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