// app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
@Component({
  selector: 'sc-root',
  template: `
    <h1>Hello {{ title }}</h1>
  `
})
export class AppComponent {
  title = 'Angular';
}

// main.ts
if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
  {
    path: 'roles',
    children: [{
      path: '',
      component: RolesComponent,
    }, {
      path: 'details/:id',
      component: RolesDetailsComponent,
    }],
  },
  {
    path: 'admin',
    component: AdminComponent,
  },
  {
    path: 'product',
    component: ProductComponent,
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  },
];

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => 
      import('./dashboard/dashboard.module')
       .then(m => m.DashboardModule),
  },
  {
    path: 'roles',
    loadChildren: () =>
      import('./roles/roles.module')
        .then(m => m.RolesModule),
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module')
        .then(m => m.AdminModule),
  },
  {
    path: 'product',
    loadChildren: () =>
      import('./product/product.module')
        .then(m => m.ProductModule),
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  },
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule { }

ng generate component standalone --standalone

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule], // <-- all imports goes here
  templateUrl: './standalone.component.html',
  styleUrls: ['./standalone.component.scss']
})
export class StandaloneComponent implements OnInit {
  ...
}

const routes = [
  {
    path: 'standalone',
    component: StandaloneComponent,
  },
  ...
];

const routes = [
  {
    path: 'standalone-lazy',
    loadComponent: () => import('./components/standalone-lazy.component')
    	.then(s => s.StandaloneLazyComponent),
  },
]

// dashboard.routes.ts

const routes = [{
  path: '',
  component: DashboardComponent
}];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule],
})
export class DashboardRoutingModule {

}

export const routes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
}];

const routes = [{
  path: '',
  component: RolesComponent
}, {
  path: 'details/:id',
  component: RoleDetailsComponent
}];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule],
})
export class RolesRoutingModule { }

export const routes = [{
  path: '',
  component: RolesComponent
}, {
  path: 'details/:id',
  component: RoleDetailsComponent
}];

export default [{
  path: '',
  component: RolesComponent
}, {
  path: 'details/:id',
  component: RoleDetailsComponent
}];

import {
  bootstrapApplication,
} from '@angular/platform-browser';

bootstrapApplication(
  AppComponent, {
    providers: []
  }
);

@NgModule({
  declarations: [AppComponent],
  bootstrap:    [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
})
export class AppModule { }

@Component({
  selector: 'app-root',
  standalone: true, // <- add standalone
  imports: [], // <- and imports array
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
}

bootstrapApplication(
  AppComponent, 
  {
    providers: [
      importProvidersFrom([
        BrowserModule,
        RouterModule.forRoot(routes),
        BrowserAnimationsModule,
      ])
    ]
  }
)

importProvidersFrom([
  BrowserModule,
  RouterModule.forRoot(routes),
  BrowserAnimationsModule,
  HttpClientModule,
]),

npm i -S weather-widget

@NgModule({
  imports: [
    ...,
    // import library NgModule
    WeatherWidgetModule,
    ...
  ]
})
export class AppModule { }

<sc-weather-widget
  [city]="cityDetails">
</sc-weather-widget>

@NgModule({
  imports: [
    ...,
    // import component directly
    WeatherWidgetComponent,
    ...
  ]
})
export class DashboardComponent { }

bootstrapApplication(AppComponent)
  .then((ref) => {
    const wc = createCustomElement(
      HelloComponent, {
        injector: ref['injector'],
      }
    );
  });

// get a hand on the environment injector
const app = await createApplication({
  providers: [
    /* your global providers here */
  ],
});

// create a constructor of a custom element
const NgElementCtor = createCustomElement(TestStandaloneCmp, {
  injector: app.injector
});

// register in a browser
customElements.define('test-standalone-cmp', NgElementCtor);

import { 
  EditEmployeePage as NewEditEmployeePage,
} from './components/employees/edit-employee';
import { EditEmployeePage } from './employees/edit-employee';
...

provideRouter([
  {
    path: 'edit-employee/:id',
    component: NewEditEmployeePage,
    canMatch: () => inject(FeatureFlagService).isNewEditEmployeePageEnabled
  },
  {
    path: 'edit-employee/:id',
    component: EditEmployeePage
  }
])

@Component(...)
export Class AutocompleteComponent {
  ...
}

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [
    AutocompleteComponent
  ],
  exports: [AutocompleteComponent],
})
export Class AutocompleteModule {
  ...
}