@ManfredSteyerLightweight ArchitecturesWith Angular's Latest InnovationsManfredSteyer
View Slide
@ManfredSteyer
@ManfredSteyerManfred Steyer
@ManfredSteyerNgModules + EcmaScript Modulesimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';[…]@NgModule({imports: [BrowserModule, OtherModule],declarations: [AppComponent, OtherComponent, OtherDirective],providers: [],bootstrap: [AppComponent],})export class AppModule {}TypeScript ModulesAngular Modules
@ManfredSteyer@Component({standalone: true,imports: [[…],FlightCardComponent,CityPipe,CityValidator,],selector: 'flight-search',templateUrl: '…'})export class FlightSearchComponent {[…]}
@ManfredSteyerIt looks like you want to useNgIfDirective and MyComponent.Shall I import it for you?
@ManfredSteyerSmall and Medium Apps:Folder per Feature
@ManfredSteyerSmall and Medium Apps:Folder per Feature// index.ts == Public APIexport *from './flight-booking.routes';
@ManfredSteyerMedium and Large Apps:Folder per Domain
@ManfredSteyerRestricting Access b/w Domains, etc.on a library basis
@ManfredSteyerRestricting Access b/w Domains, etc.on a folder basisCredits to:Rainer Hahnekamp,AngularArchitectsFollow me for more information on this during the next weeks!@softarc/eslint-plugin-sheriff
@ManfredSteyer→@Component({standalone: true,selector: 'app-root',imports: [[…]TicketsModule,],templateUrl: '…'})export class AppComponent {}
@ManfredSteyer→@NgModule({imports: [FlightCardComponent,],declarations: [MyTicketsComponent],})export class TicketsModule { }
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [MyGlobalService,importProvidersFrom(MyModule),]});
@ManfredSteyerng g @angular/core:standalone
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideHttpClient(withInterceptors([authInterceptor]),),provideRouter(APP_ROUTES,withPreloading(PreloadAllModules),withDebugTracing(),),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideLogger(loggerConfig),]});
@ManfredSteyerexport const APP_ROUTES: Routes = [[…]{path: 'flight-booking',canActivate: [() => inject(AuthService).isAuthenticated()],component: FlightBookingComponent},]
@ManfredSteyerexport const APP_ROUTES: Routes = [[…]{path: 'flight-booking',canActivate: [() => inject(AuthService).isAuthenticated()],resolve: {flights: () => inject(FlightService).findAll()},component: FlightBookingComponent},]
@ManfredSteyerexport const authInterceptor: HttpInterceptorFn = (req, next) => {[…]}
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideLogger({level: LogLevel.DEBUG,appenders: [DefaultLogAppender],formatter: (level, cat, msg) => [level, cat, msg].join(';'),}),]});
@ManfredSteyerFree eBook (brand new)ANGULARarchitects.io/standaloneStandalone ComponentsDownload here:
@ManfredSteyerModern Angular:LightweightArchitecturesStandaloneComponents &Migration ScriptsStandalone APIs Functional Services
@ManfredSteyerdSlides & Examples Remote Company Workshopsand Consultinghttp://angulararchitects.io
manfredsteyer
shinmiy
yucamm124
little_rubyist
masatoshiitoh
syossan27
hirokunimaeta
yukana
ffjlabo
qualiarts
octu0
heronshoes
myahagi
lynnandtonic
cassininazir
bcantrill
marcelosomers
jacobian
jensimmons
shpigford
malarkey
colly
trallard
shlominoach
destraynor