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

Angular Architekturen with Angular Libraries

Angular Architekturen 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 via package managers such as npm over the Internet. This is where Angular's libraries come in.

In this talk, Fabian Gosebrink will explain how Angular Libraries are created, what the Angular Package format is good for, and how we can move code from an existing application to an Angular Library for reuse across multiple applications. This makes the maintainability and architecture of Angular applications easy.

Fabian Gosebrink

October 15, 2019
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 export * from ‘./xyz.module’ public-api.ts
  8. import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule

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

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

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

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

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

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

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

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

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

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