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.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

October 15, 2019
Tweet

Transcript

  1. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32.
  33. 33.
  34. 34.
  35. 35.
  36. 36.
  37. 37.
  38. 38.
  39. 39.
  40. 40.
  41. 41.
  42. 45.
  43. 46.
  44. 47.
  45. 48.
  46. 49.
  47. 51.

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

    ]}) export class AppModule {} NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  48. 52.

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

    XyzModule ]}) export class AppModule {} NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  49. 53.

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

    XyzModule ]}) export class AppModule {} NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
  50. 54.

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

    XyzModule ]}) export class AppModule {} NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  51. 55.

    @NgModule({ imports: [ ]}) export class AppModule {} NgModule({ declarations:

    [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  52. 56.

    import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule

    ]}) export class AppModule {} NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  53. 57.

    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
  54. 58.

    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
  55. 59.

    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
  56. 60.

    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
  57. 61.

    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
  58. 64.

    NgModule({ providers: [MyService] }) export class XyzModule MyService export *

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

    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) {}
  60. 66.

    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) {}
  61. 67.

    NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’

    }) MyService export * from ‘./xyz.module’ public-api.ts @NgModule({ imports: [ ]}) export class AppModule {}
  62. 68.

    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) {}
  63. 69.

    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) {}
  64. 70.
  65. 72.
  66. 75.
  67. 76.
  68. 80.
  69. 81.
  70. 85.
  71. 86.
  72. 87.
  73. 91.
  74. 97.
  75. 98.
  76. 99.
  77. 100.
  78. 101.
  79. 102.
  80. 103.
  81. 104.
  82. 105.