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.

Transcript

37. @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
38. import { XyzModule } from ‘folder’; @NgModule({ imports: [ XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
39. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [ XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
40. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [ XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent] }) export class XyzModule MyComponent
41. MyComponent import { XyzModule } from ‘folder’; @NgModule({ imports: [ XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
42. @NgModule({ imports: [ ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
43. import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule ]}) export class AppModule {} @NgModule({ declarations: [MyComponent], exports: [MyComponent] }) export class XyzModule MyComponent
44. 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’
45. 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’
46. 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’
47. 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’
48. 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’
49. @NgModule({ providers: [MyService] }) export class XyzModule MyService
50. @NgModule({ providers: [MyService] }) export class XyzModule MyService public-api.ts export * from ‘./xyz.module’
51. @NgModule({ providers: [MyService] }) export class XyzModule MyService public-api.ts import { XyzModule } from ‘lib’ @NgModule({ imports: [ XyzModule ]}) export class AppModule {} export * from ‘./xyz.module’
52. @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’
53. @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’
54. @NgModule({ providers: [] }) export class XyzModule @Injectable({ providedIn: ‘root’ }) MyService public-api.ts @NgModule({ imports: [ ]}) export class AppModule {} export * from ‘./xyz.module’
55. @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’
56. @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’
58. $ ng new demorepo –-createApplication=false $ cd demorepo $ ng generate app my-real-app $ ng generate library my-lib
61. $ ng build my-lib
62. $ ng build my-lib --watch
64. $ ng lint my-lib
65. $ ng test my-lib
66. $ ng test my-lib –-watch=false
75. $ npm install my-lib/dist
76. $ npm link my-lib/dist
77. $ cd my-lib/dist $ npm pack $ npm install my-lib/dist/package.tgz
81. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^12.2.0", "@angular/core": "^12.2.0" }, "dependencies": { "tslib": "^2.3.0" } }
82. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^10.1.6", "@angular/core": "^10.1.6" }, "dependencies": { "tslib": "^2.0.0" } }
83. <major>.<minor>.<patch> https://semver.org/
84. { "name": "@fabiangosebrink/angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^10.1.6", "@angular/core": "^10.1.6" }, "dependencies": { "tslib": "^2.0.0" } }
88. $ npx create-nx-workspace@latest
89. $ npx create-nx-workspace@latest $ nx generate @nrwl/angular:app my-first-app $ nx generate @nrwl/angular:library <nameOfLib>