Standalone APIs in Angular v16

Find out about the latest improvements in the routing APIs and all the tooling that landed in v16. Find out how you can create apps with ng new, migrate apps with new standalone migrations, and more!
Learn more about Angular v16 → goo.gle/angula...
Migrate an existing Angular project to standalone → goo.gle/3HnTMFR
Getting started with standalone components → goo.gle/angula...
Watch more videos about Angular v16 → goo.gle/Angula...
Subscribe to Angular → goo.gle/Angular
#Angular

[@Angular]

Learn more about Angular v16 → goo.gle/angular-v16
Migrate an existing Angular project to standalone → goo.gle/3HnTMFR
Getting started with standalone components → goo.gle/angular-standalone-routing

[@BojanKogoj]

I stay up to date with everything Angular related, but this video is the first time i saw there is a migration as well! Nice

[@CompCohen]

The docs show that loadComponent() is still implemented like so
export const ROUTES: Route[] = [
{path: 'admin', loadComponent: () => import('./admin/panel.component').then(mod => mod.AdminPanelComponent)},
// ...
];

[@LeandroTassinari]

What is the difference between component import and component module import? Can the two coexist?
When migrating to v16 and also migrating to the standalone component, it got confusing.

[@toxaq]

Component import directly imports a standalone component.

[@ahmedrashad494]

Is this method correct, because I applied the same as you did, but it shows me an error, but with this method it works fine .. import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-products',
standalone: true,
imports: [CommonModule],
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent {
}...... this is teh route >>> {
path: 'products',
loadComponent: () =>
import('./Components/products/products.component').then(
(m) => m.ProductsComponent
),
},

[@CompCohen]

Looks they got it wrong in the video. The docs show that loadComponent() is still implemented like so
export const ROUTES: Route[] = [
{path: 'admin', loadComponent: () => import('./admin/panel.component').then(mod => mod.AdminPanelComponent)},
// ...
];

[@ahmedrashad494]

@@CompCohen Thank you

[@BillMoates-wh7mp]

I don't understand

[@BillMoates-wh7mp]

This may not be a good idea.

[@envo2199]

improving dev experience == improving noob experience.
never understood what is hard about learning modules

[@YordanTGeorgiev]

True but I see one very good outcome of standalone components is that now we can see each component dependencies very easy

[@totallynotchosen183]

what is bad about improving noob experience? you said it like its a bad thing

[@envo2199]

@@totallynotchosen183 because i have to learn how to read and understand and debug this aproach also

[@totallynotchosen183]

@@envo2199 thats the quirk of webdev world. Always new stuff to learn. Personally I like it more than the alternative.

[@toxaq]

Modules weren’t hard. Sharing components between modules was. Hence why every project unnecessarily had a “SharedModule” that every reused component was thrown in. It was very poor design and good riddance to it.