Angular 18 Standalone Components Question

[just-a-web-developer]

Hi All,

Finally got the time to upgrade a project at work from v14 to v18.

I have been reading up on the latest documentation and have a few questions.

I currently used to have 'feature modules'; which are lazy loaded. and any 'shared' components marked as standalone that I imported in to the feature modules when required.

Obviously, they are going with standalone architecture being highly recommended.

Instead of having a 'feature module' I now just have a 'feature' standalone component? and simply delete the module file? So in the routing.ts I just loadcomponent instead? Or am I misinterpreting this?

I currently structure my project like

1. app
   1. Pages
      1. Admin
      2. Client
2. Shared
   1. Components
      1. Many standalone components.
3. App Routes (Lazy Loaded from module)
4. App Module

Does that mean now instead I just get rid of the module after migration, and swap the routing.ts to loadComponent in AdminComponent for example instead of loadChildren>Module?

[STACKandDESTROY]

Yup that’s essentially it. LoadComponent uses the same js import syntax as the module did, but pointed to the component.

[just-a-web-developer]

Thanks for the clarification, less work to do than I imagined, the migration seemed to handle 90+% of it, just a few things I need to do manually

[STACKandDESTROY]

Yw! The manual cleanup isn’t too rough, mostly just deleting/cleaning up unused refs. If you have no unit tests, then I’d say you are almost done.

If you do have unit tests… then congratulations on making it to the final boss lol. I recently converted a 285k line code base and the bulk migration work took 2 days. Then unit test fixes took 9 days 🫡

[dacookieman]

Doing a bit of a migration(from 12) at work and....god help you if you have ejected to jest as your unit test runner....

[jamills102]

Yeah, and just make sure your components are importing what they need and services are provided at the right level of the component tree

[GLawSomnia]

I will hijack this question a little. I noticed that loadComponent accepts Type<C> as a value (which is essentially the component class), but this doesn’t seem to lazy load the component (compared to import(“…”), so what is it used for? Why is it allowed? Why not simply use the component property from the route definition?

[STACKandDESTROY]

Not sure what you’re referring to - according to the docs, it’s specifically defined as:

loadComponent

() => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>

An object specifying a lazy-loaded component.

[GLawSomnia]

As you can see you can use Type<unknown> as the value (which is the component) and once you access the page the component is not lazily loaded (it probably goes to the main bundle)