Documentation
Guides
Development

## Component Structure

Fuse uses route based component loading strategy. There are componentless and empty-path routes specifically structured to load components without hard coding them into templates. This provides great extensibility and scalability to the app and we strongly suggest you to follow the same path.

Here's the diagram of the Fuse's default component structure for the reference:

AppComponent
LayoutComponent
Layout
Navigation
Header
<router-outlet>
Footer

## AppComponent

This is the entry point of the application. It imports all the necessary modules in order for Fuse and your app to work. All 3rd party modules also imported and configured here.

## LayoutComponent

This component makes the layout switching easier. Fuse provides variety of different layouts like ClassicLayout or EnterpriseLayout and this component can load or switch those layouts at any time.

To understand how LayoutComponent works, look at this portion of the `app.routing.ts` file:

// Admin routes { path : '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], component : LayoutComponent, resolve : { initialData: InitialDataResolver, }, children : [ // Apps {path: 'apps', children: [ // Dashboards {path: 'dashboard', children: [ ... ] }

As you can see, there is an empty-path route at the beginning of the Admin routes which essentially loads the `LayoutComponent` into the `<router-outlet>` of the AppComponent.

After that, `LayoutComponent` loads the selected layout. All layouts includes a `<router-outlet>` in their templates which then loads the actual component that's being requested depending on the active route.

More detailed information about layouts can be found in the Customization > Theme layouts section of this documentation.

## Layout

This is the selected layout that's being loaded by the `LayoutComponent`. All layouts located at the `app/layout/layouts/` directory and these layouts include common components like Navigation, Header and Footer.