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
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.
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)}, // ... ];
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 ), },
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)}, // ... ];
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.
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
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
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.
Component import directly imports a standalone component.
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)},
// ...
];
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
),
},
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)},
// ...
];
@@CompCohen Thank you
I don't understand
This may not be a good idea.
improving dev experience == improving noob experience.
never understood what is hard about learning modules
True but I see one very good outcome of standalone components is that now we can see each component dependencies very easy
what is bad about improving noob experience? you said it like its a bad thing
@@totallynotchosen183 because i have to learn how to read and understand and debug this aproach also
@@envo2199 thats the quirk of webdev world. Always new stuff to learn. Personally I like it more than the alternative.
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.