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.

Transcript

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
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) {}
71. $ ng generate library my-lib
73. $ ng build my-lib
74. $ ng build my-lib --watch
77. $ ng lint my-lib
78. $ ng test my-lib
79. $ ng test my-lib –-watch=false
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
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/
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" } }