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. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. public-api.ts *.ts package.json

  43. public-api.ts *.ts package.json

  44. public-api.ts *.ts package.json *.d.ts package.json bundles esm5 esm2015

  45. None
  46. None
  47. None
  48. None
  49. None
  50. NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent

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

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

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

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

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

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

    ]}) export class AppModule {} NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
  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
  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
  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
  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
  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
  62. NgModule({ providers: [MyService] }) export class XyzModule MyService

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

    from ‘./xyz.module’ public-api.ts
  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 {}
  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) {}
  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) {}
  67. NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’

    }) MyService export * from ‘./xyz.module’ public-api.ts @NgModule({ imports: [ ]}) export class AppModule {}
  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) {}
  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) {}
  70. None
  71. $ ng generate library my-lib

  72. None
  73. $ ng build my-lib

  74. $ ng build my-lib --watch

  75. None
  76. None
  77. $ ng lint my-lib

  78. $ ng test my-lib

  79. $ ng test my-lib –-watch=false

  80. None
  81. None
  82. $ npm install my-lib/dist

  83. $ npm link my-lib/dist

  84. $ cd my-lib/dist $ npm pack $ npm install my-lib/dist/package.tgz

  85. None
  86. None
  87. None
  88. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 ||

    ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
  89. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 ||

    ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
  90. <major>.<minor>.<patch> https://semver.org/

  91. None
  92. $ npm version patch

  93. $ npm version minor

  94. $ npm version major

  95. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 ||

    ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
  96. { "name": "@fabiangosebrink/angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 ||

    ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None