Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Better Angular Architectures With Angular Libra...

Better Angular Architectures With Angular Libraries

Angular offers many possibilities when it comes to the separation and architecture of your application. There is often code that you not only want to reuse within your application, but also make available to other applications in your organization or over the web via package managers like npm. This is where Angular's libraries come into play. In this talk, Fabian Gosebrink will highlight how Angular libraries are created, what the Angular Package Format is good for, and how we can move code from an existing application into an Angular library to reuse the code across multiple applications. This makes maintainability and architecture of Angular applications a breeze.

Fabian Gosebrink

October 13, 2022
Tweet

More Decks by Fabian Gosebrink

Other Decks in Technology

Transcript

  1. import { XyzModule } from ‘folder’; @NgModule({ imports: [ XyzModule

    ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  2. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  3. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  4. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  5. @NgModule({ imports: [ ]}) export class AppModule {} @NgModule({ declarations:

    [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  6. import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule

    ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  7. import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule

    ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent public-api.ts export * from ‘./xyz.module’
  8. import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule

    ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent public-api.ts MyComponent export * from ‘./xyz.module’
  9. import { XyzModule, MyComponent } from ‘lib’ @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent public-api.ts MyComponent export * from ‘./xyz.module’
  10. import { XyzModule, MyComponent } from ‘lib’ @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent public-api.ts MyComponent export * from ‘./xyz.module’
  11. import { XyzModule, MyComponent } from ‘lib’ @NgModule({ imports: [

    XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent public-api.ts MyComponent export * from ‘./xyz.module’ export * from ‘./my.component’
  12. @NgModule({ providers: [MyService] }) export class XyzModule MyService public-api.ts import

    { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule ]}) export class AppModule {} export * from ‘./xyz.module’
  13. @NgModule({ providers: [MyService] }) export class XyzModule MyService public-api.ts import

    { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule ]}) export class AppModule {} import { MyService } from ‘lib’; constructor(private srv: MyService) {} export * from ‘./xyz.module’
  14. @NgModule({ providers: [MyService] }) export class XyzModule MyService public-api.ts import

    { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule ]}) export class AppModule {} import { MyService } from ‘lib’; constructor(private srv: MyService) {} export * from ‘./xyz.module’ export * from ‘./my.service’
  15. @NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’

    }) MyService public-api.ts @NgModule({ imports: [ ]}) export class AppModule {} export * from ‘./xyz.module’
  16. @NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’

    }) MyService public-api.ts @NgModule({ imports: [ ]}) export class AppModule {} import { MyService } from ‘lib’; constructor(private srv: MyService) {} export * from ‘./xyz.module’
  17. @NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’

    }) MyService public-api.ts @NgModule({ imports: [ ]}) export class AppModule {} import { MyService } from ‘lib’; constructor(private srv: MyService) {} export * from ‘./xyz.module’ export * from ‘./my.service’
  18. $ ng new demorepo –-createApplication=false $ cd demorepo $ ng

    generate app my-real-app $ ng generate library my-lib