Monday, October 22, 2018

ngx-message-queue

A message queue library for Angular 2+ application components to communication each other. ngx-message-queue library supports message headers and message payload. It also supports message selectors for subscribers to subscribe to only messages with specific message header via msgSelector.

Selectors are a way of attaching a filter to a subscription to perform content based routing. Selectors are typically apply to message headers, If no headers are attached to the message then all the messages will be delivered to subscriber by default. If subscriber is not configuring the msgSelector then all the messages will be delivered to the subscribers i.e. no filters are applied.
Multiple conditions are allowed in the msgSelector.ngx-message-queue was previously knowns as ng2-message-queue.

Example of a message selectors

LogLevel=fatal

age > 13

age>=13 & gender=M

Filter expression can be grouped using parenthesis

age<=5 & ((gender=M & state=NJ) | gender=F)

Supported Operators

=, !=, >, <, >=, <=, &, |

Message header supports only JSON object. Multiple header properties can be posted with single JSON object

getSubscribers(): string[]

publish will put message into queue name. It will also put headers into queue if any. headers are optional but it is best way to process/route/filter the messages quickly without parsing the message payload.

If lazy = true(default), queue name will be created automatically if not exist yet.

subscribe will subscribe for the message posted on the queue name. Whenever queue name receives a new message, callback will be invoked. The callback will return both headers and message payload.

Subscribers can subscribe to only certain messages within the same queue. Let us say you have multiple subscribers listening for log messages with different logging level (debug, info, warn, fatal etc). If you want to configure high priority subscriber who listens for logs with 'fatal' level then use msgSelector as loglevel=fatal

Sunday, September 23, 2018

Developing angular app is easy but deploying it in cloud environment has its own challenges. Spring boot application helps to overcome many of the cloud deployment challenges. Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".

Angular apps can be used as static resources in a web application which uses Spring Boot. In this post I'll show you how to marry Angular App and Sprint Boot web application.

The technology stack required for building angular app are Node.js and Angular CLI. In the example I am using Gradle to build & package the web application.

Node.js is used to install the required packages and dependencies for the angular application.

Angular CLI is used to generate the boilerplate code for angular app using command line interface.

Gradle hepls to build, package the application and automates the deployments.

I am not going to explaing much in details about these tools or frameworks.

Project Structure

The anugular app source files are placed in webapp folder(src\main\webapp) within a spring boot application. The startup Application.java class is annotated with @SpringBootApplcation is placed in src\main\java\com\jsp\jsonformatter\angularboot\.

1

package com.jsp.jsonformatter.angularboot;

2

3

importorg.springframework.boot.SpringApplication;

4

importorg.springframework.boot.autoconfigure.SpringBootApplication;

5

6

@SpringBootApplication

7

publicclassApplication {

8

9

publicstaticvoidmain(String[]args) {

10

SpringApplication.run(Application.class, args);

11

}

12

}

Angular build configuration

The anugular application can be build using ng build and it can be executed & tested using ng serve You need to install the required packages and dependencies using npm install The ng build or ng serve uses the angular-cli.json or angular.json to build & package the angular application.

1

{

2

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

3

"version": 1,

4

"newProjectRoot": "projects",

5

"projects": {

6

"webapp": {

7

"root": "",

8

"sourceRoot": "src",

9

"projectType": "application",

10

"prefix": "app",

11

"schematics": {},

12

"architect": {

13

"build": {

14

"builder": "@angular-devkit/build-angular:browser",

15

"options": {

16

"outputPath": "dist/static",

17

"index": "src/index.html",

18

"main": "src/main.ts",

19

"polyfills": "src/polyfills.ts",

20

"tsConfig": "src/tsconfig.app.json",

21

"assets": [

22

"src/favicon.ico",

23

"src/assets"

24

],

25

"styles": [

26

"src/styles.scss"

27

],

28

"scripts": []

29

},

30

"configurations": {

31

"production": {

32

"fileReplacements": [

33

{

34

"replace": "src/environments/environment.ts",

35

"with": "src/environments/environment.prod.ts"

36

}

37

],

38

"optimization": true,

39

"outputHashing": "all",

40

"sourceMap": false,

41

"extractCss": true,

42

"namedChunks": false,

43

"aot": true,

44

"extractLicenses": true,

45

"vendorChunk": false,

46

"buildOptimizer": true

47

}

48

}

49

},

50

"serve": {

51

"builder": "@angular-devkit/build-angular:dev-server",

52

"options": {

53

"browserTarget": "webapp:build"

54

},

55

"configurations": {

56

"production": {

57

"browserTarget": "webapp:build:production"

58

}

59

}

60

},

61

"extract-i18n": {

62

"builder": "@angular-devkit/build-angular:extract-i18n",

63

"options": {

64

"browserTarget": "webapp:build"

65

}

66

},

67

"test": {

68

"builder": "@angular-devkit/build-angular:karma",

69

"options": {

70

"main": "src/test.ts",

71

"polyfills": "src/polyfills.ts",

72

"tsConfig": "src/tsconfig.spec.json",

73

"karmaConfig": "src/karma.conf.js",

74

"styles": [

75

"src/styles.css"

76

],

77

"scripts": [],

78

"assets": [

79

"src/favicon.ico",

80

"src/assets"

81

]

82

}

83

},

84

"lint": {

85

"builder": "@angular-devkit/build-angular:tslint",

86

"options": {

87

"tsConfig": [

88

"src/tsconfig.app.json",

89

"src/tsconfig.spec.json"

90

],

91

"exclude": [

92

"**/node_modules/**"

93

]

94

}

95

}

96

}

97

},

98

"webapp-e2e": {

99

"root": "e2e/",

100

"projectType": "application",

101

"architect": {

102

"e2e": {

103

"builder": "@angular-devkit/build-angular:protractor",

104

"options": {

105

"protractorConfig": "e2e/protractor.conf.js",

106

"devServerTarget": "webapp:serve"

107

},

108

"configurations": {

109

"production": {

110

"devServerTarget": "webapp:serve:production"

111

}

112

}

113

},

114

"lint": {

115

"builder": "@angular-devkit/build-angular:tslint",

116

"options": {

117

"tsConfig": "e2e/tsconfig.e2e.json",

118

"exclude": [

119

"**/node_modules/**"

120

]

121

}

122

}

123

}

124

}

125

},

126

"defaultProject": "webapp"

127

}

Take a closer look at output path property. The outputPath is defined as dist\static. This is important as the angular app build output will be used as static resource by the Spring Boot applicaiton.

Building Together (Angular + Spring Boot App)

The Gradle build script is used to build the Spring Boot app and it will take care of building Angular app as static resource to the Spring Boot App.

Take a closer at the installAngular and buildAngular task in Gradle script. The installAngular task installs the required packages & dependencies defined in package.json. It uses the npm install command to install the required pacakges.

The buildAngular task uses the "ng build" angular cli command to build the angular project. The output of angular build will be placed in dist\static folder.

The buildAngular task is added as processResouces in the gradle script and the installAngular task is added as dependency to buildAngular task. The gradle build script has been modified to include the angular app's dist directory in soruceSets.