Getting Started with Standalone Components in Angular
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- 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/ang... - บันเทิง
![[Full] 4 ต่อ 4 Celebrity EP.910 | 22 ก.ย. 67 | one31](http://i.ytimg.com/vi/4TR3MVpOiw8/mqdefault.jpg)
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).
Amazing feature, when building with react component , we expected something we need here in Angular also..
Thanks you Angular team..
Love this new feature! Used it already in prod project.
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
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!
I love this feature. Finally, it is here
Great api, the ngmodule was time consuming for quick startup.
But lazy loaded was existing in previous version
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 🙏❤
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?
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.
I see, "I am standing here alone...". Nice entry point 😂
This is so clean!
This is a great feature. Looking forward to when this is production ready
How does setting up specs work? Normally we define a testing module with all the imports/declarations.
That pun took me 2 seconds but it definitely hit 🤣
Thanks for the link to the example code!
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..!!
Thanks for the tutorial and English English
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
Excited to work with this feature.
great thanks for that! Very clear and articulate!
Beautiful!! This new feature sounds promising and it feels Angular is getting lighter and lighter. Thanks
Great feature and presenattion. Thank you
Loved those puns 😊
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??
Great video, and I loved the puns 🖖
Good video. Thank you.
Love the way Angular is slowly making itself a clone of React 😆
thanks, very clear presentation
much easier now! thanks.
angular is going to take over the front-end world!!
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.
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
THANK YOU! for such a great job!
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
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.
thanks for the video, it was really informative
Interesting addition 🤔. But, I think I'll stick to the existing modus operandi for components😎.
Is it possible to avoid doing boilerplate import of CommonModule ?
How do standalone components play with federation?
There are no links to the example project as said at the end of the video 😅
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.
What was the vscode theme?
high contrast :)
🙏 great presentation
"This is of a great IMPORTance"😍
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.
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
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 guys, standalone components are stable now?
this is how out minds think, in components rather than modules
great, thanks!!
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
Will standalone components work with scully?
Will this new feature reduce the total blocking time in google web page speed? If yes this is HUGE!
Amazing!
Hi. I hava a doubt. If You create a service to Open diálogs. How do You import the diálogModule in said singleton?
Many thanks
Can these be npm packaged?
In angular 2 also ng module concept was not there
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!
wow and ... wow
Greeeeeat
"Standing Alone" to tell us about StandAlone Components...good one 😂😂
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 ?
...simplified the Angular learning tree... yeah, good luck with that.
Dope
Great !)
What vscode theme is she using? :OO
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.
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
Sick
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
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.
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.
"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
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.
so painful seeing the navigation to dogView using a href...
❤
🎉
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
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.
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
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
She speaks Tahoma
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.
NONONONO ESTA MAL ESO NO. ASI NO ES!!!
Uhmmmm... Angular getting away from being Angular...?
Using href here makes the whole app reload... are you serious Angular ?
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
Cool for standalone components
But are you error using href in a link?