Skip to content

Commit 3ccf4fc

Browse files
fboellerfboeller
committed
Rename microfrontend and platform
1 parent 2b1b5b6 commit 3ccf4fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+24783
-1068
lines changed

‎CHANGELOG.md

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎CONTRIBUTING.md

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $ npm install
3333
### Dev platform with micro frontend
3434

3535
```
36-
$ npm start example-micro-frontend
36+
$ npm start bookings
3737
```
3838

3939
A visit to `localhost:4200` shows the dev platform.
@@ -42,21 +42,21 @@ If you click the buttons, you see how the route changes, independent from if the
4242
### Angular platform with micro frontend
4343

4444
```
45-
$ npm run build example-micro-frontend
45+
$ npm run build bookings
4646
$ npm install -g http-server
47-
$ http-server dist/example-micro-frontend --port 4201
47+
$ http-server dist/bookings --port 4201
4848
```
4949

5050
```
51-
$ npm start example-platform
51+
$ npm start train-platform
5252
```
5353

5454
A visit to `localhost:4200` shows the Angular platform.
5555
The bundle file `main.js` is served from `localhost:4201` without hot-reloading.
5656

5757
## Prerequisites
5858

59-
You have an Angular application that acts as a [platform](./projects/example-platform) and an Angular application that acts as a [micro frontend](./projects/example-micro-frontend).
59+
You have an Angular application that acts as a [platform](./projects/train-platform) and an Angular application that acts as a [micro frontend](./projects/bookings).
6060
A build of the micro frontend results in a single build that registers custom elements on loading.
6161

6262
## Usage
@@ -74,7 +74,7 @@ a relative path `./abc` to refer to a route relative to the route `/micro-fronte
7474
To be able to reference your custom element in the routes, you need to create a host component.
7575
You can use the `aerRouting` on the custom element to pass route changes to the micro frontend and to allow the micro frontend to pass route changes to the platform.
7676

77-
[platform/micro-frontend-host.component.ts](./projects/example-platform/src/app/micro-frontend-host/micro-frontend-host.component.ts)
77+
[platform/micro-frontend-host.component.ts](./projects/train-platform/src/app/micro-frontend-host/micro-frontend-host.component.ts)
7878

7979
```typescript
8080
import { Component } from "@angular/core";
@@ -93,7 +93,7 @@ Import `AngularElementsRouterModule` to be able to use the `aerRouting` directiv
9393
Use the schema `CUSTOM_ELEMENTS_SCHEMA` to make Angular accept the custom element in the host component.
9494
Use the path `**` to pass all sub paths to the custom element.
9595

96-
[platform/micro-frontend-host.module.ts](./projects/example-platform/src/app/micro-frontend-host/micro-frontend-host.module.ts)
96+
[platform/micro-frontend-host.module.ts](./projects/train-platform/src/app/micro-frontend-host/micro-frontend-host.module.ts)
9797

9898
```typescript
9999
import { AngularElementsRouterModule } from "ngx-elements-router";
@@ -119,7 +119,7 @@ export class MicroFrontendHostModule {}
119119
Choose a route under which your micro frontend should be loaded.
120120
Use the `LoadBundleGuard` to load the bundle of your micro frontend on the first activation of the route.
121121

122-
[platform/app-routing.module.ts](./projects/example-platform/src/app/app-routing.module.ts)
122+
[platform/app-routing.module.ts](./projects/train-platform/src/app/app-routing.module.ts)
123123

124124
```typescript
125125
import { LoadBundleGuard } from "ngx-elements-router";
@@ -152,7 +152,7 @@ Since Angular 11, your bundle name might be `main-es2015.js`.
152152
Use the `EntryRoutingService` in the Angular component representing the custom element.
153153
This way, route changes are passed to the Angular router in the micro frontend and in the other direction to the platform.
154154

155-
[micro-frontend/entry-component.ts](./projects/example-micro-frontend/src/app/entry.component.ts)
155+
[micro-frontend/entry-component.ts](./projects/bookings/src/app/entry.component.ts)
156156

157157
```typescript
158158
import { EntryRoutingService } from 'ngx-elements-router';
@@ -189,7 +189,7 @@ export class EntryComponent implements OnChanges, OnDestroy {
189189
190190
The module in your micro frontend needs to define the custom element in the browser on bootstrap of the module.
191191
192-
[micro-frontend/app-module.ts](./projects/example-micro-frontend/src/app/app.module.ts)
192+
[micro-frontend/app-module.ts](./projects/bookings/src/app/app.module.ts)
193193
194194
```typescript
195195
import { EntryComponent } from "./entry.component";
@@ -220,7 +220,7 @@ Inside this component, you can use an absolute path `/abc` to refer to a route o
220220
You can use a relative path `./abc` to refer to a route relative to the micro frontend route.
221221
It can itself have a router outlet to mount different components depending on the subpath of the micro frontend.
222222
223-
[micro-frontend/micro-frontend.component.ts](./projects/example-micro-frontend/src/app/micro-frontend.component.ts)
223+
[micro-frontend/micro-frontend.component.ts](./projects/bookings/src/app/micro-frontend.component.ts)
224224
225225
```typescript
226226
@Component({
@@ -241,7 +241,7 @@ If the platform delegates all traffic at `/micro-frontend` to the micro frontend
241241
All other traffic needs to go to a route `**` such that the router module of the micro frontend does not discard it as undefined routes.
242242
This way, you can navigate to links outside of the micro frontend from within the micro frontend.
243243
244-
[micro-frontend/app-routing.module.ts](./projects/example-micro-frontend/src/app/app-routing.module.ts)
244+
[micro-frontend/app-routing.module.ts](./projects/bookings/src/app/app-routing.module.ts)
245245
246246
```typescript
247247
import { NoComponent } from "ngx-elements-router";
@@ -261,7 +261,7 @@ const routes: Routes = [
261261
By default, the Angular router within the micro frontend tries to update the browser url.
262262
Use the `NoopLocationStrategy` to prevent this, such that the platform has the only access.
263263
264-
[micro-frontend/app-routing.module.ts](./projects/example-micro-frontend/src/app/app-routing.module.ts)
264+
[micro-frontend/app-routing.module.ts](./projects/bookings/src/app/app-routing.module.ts)
265265
266266
```typescript
267267
import { NoopLocationStrategy } from "ngx-elements-router";
@@ -300,7 +300,7 @@ To use it, include the `dev-platform.js` in the scripts of your micro frontend i
300300
301301
Setup an `index.html` in the micro frontend app.
302302
303-
[micro-frontend/index.html](./projects/example-micro-frontend/src/index.html)
303+
[micro-frontend/index.html](./projects/bookings/src/index.html)
304304
305305
```html
306306
<!DOCTYPE html>
@@ -335,7 +335,7 @@ To mitigate that, you can pass Zone.js microtask empty events to the micro front
335335
You can use the `EntryZoneService` in the Angular component representing the custom element.
336336
This way, Zone.js micro task empty events are passed to the micro frontend and a change detection cycle is triggered.
337337
338-
[micro-frontend/entry-component.ts](./projects/example-micro-frontend/src/app/entry.component.ts)
338+
[micro-frontend/entry-component.ts](./projects/bookings/src/app/entry.component.ts)
339339
340340
```typescript
341341
import { EntryZoneService } from "ngx-elements-router";
@@ -366,7 +366,7 @@ export class ExampleComponent implements OnChanges, OnDestroy {
366366
367367
Use the `aerRouting` on the custom element to pass micro task empty events to the micro frontend.
368368
369-
[platform/micro-frontend-host.component.ts](./projects/example-platform/src/app/micro-frontend-host/micro-frontend-host.component.ts)
369+
[platform/micro-frontend-host.component.ts](./projects/train-platform/src/app/micro-frontend-host/micro-frontend-host.component.ts)
370370
371371
```typescript
372372
import { Component } from "@angular/core";

‎angular.json

Lines changed: 36 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,66 +3,36 @@
33
"version": 1,
44
"newProjectRoot": "projects",
55
"projects": {
6-
"ngx-elements-router": {
7-
"projectType": "library",
8-
"root": "projects/ngx-elements-router",
9-
"sourceRoot": "projects/ngx-elements-router/src",
10-
"prefix": "aer",
11-
"architect": {
12-
"build": {
13-
"builder": "@angular-devkit/build-angular:ng-packagr",
14-
"options": {
15-
"tsConfig": "projects/ngx-elements-router/tsconfig.lib.json",
16-
"project": "projects/ngx-elements-router/ng-package.json"
17-
},
18-
"configurations": {
19-
"production": {
20-
"tsConfig": "projects/ngx-elements-router/tsconfig.lib.prod.json"
21-
}
22-
}
23-
},
24-
"lint": {
25-
"builder": "@angular-devkit/build-angular:tslint",
26-
"options": {
27-
"tsConfig": [
28-
"projects/ngx-elements-router/tsconfig.lib.json",
29-
"projects/ngx-elements-router/tsconfig.spec.json"
30-
],
31-
"exclude": ["**/node_modules/**"]
32-
}
33-
}
34-
}
35-
},
36-
"example-micro-frontend": {
6+
"bookings": {
377
"projectType": "application",
38-
"root": "projects/example-micro-frontend",
39-
"sourceRoot": "projects/example-micro-frontend/src",
8+
"root": "projects/bookings",
9+
"sourceRoot": "projects/bookings/src",
4010
"prefix": "mf",
4111
"architect": {
4212
"build": {
4313
"builder": "ngx-build-plus:build",
4414
"options": {
4515
"singleBundle": true,
4616
"outputHashing": "none",
47-
"outputPath": "dist/example-micro-frontend",
48-
"index": "projects/example-micro-frontend/src/index.html",
49-
"main": "projects/example-micro-frontend/src/main.ts",
50-
"polyfills": "projects/example-micro-frontend/src/polyfills.ts",
51-
"tsConfig": "projects/example-micro-frontend/tsconfig.app.json",
17+
"outputPath": "dist/bookings",
18+
"index": "projects/bookings/src/index.html",
19+
"main": "projects/bookings/src/main.ts",
20+
"polyfills": "projects/bookings/src/polyfills.ts",
21+
"tsConfig": "projects/bookings/tsconfig.app.json",
5222
"aot": true,
5323
"assets": [
54-
"projects/example-micro-frontend/src/favicon.ico",
55-
"projects/example-micro-frontend/src/assets"
24+
"projects/bookings/src/favicon.ico",
25+
"projects/bookings/src/assets"
5626
],
57-
"styles": ["projects/example-micro-frontend/src/styles.css"],
58-
"scripts": ["projects/ngx-elements-router/src/dev-platform.js"]
27+
"styles": ["projects/bookings/src/styles.css"],
28+
"scripts": ["node_modules/ngx-elements-router/src/dev-platform.js"]
5929
},
6030
"configurations": {
6131
"production": {
6232
"fileReplacements": [
6333
{
64-
"replace": "projects/example-micro-frontend/src/environments/environment.ts",
65-
"with": "projects/example-micro-frontend/src/environments/environment.prod.ts"
34+
"replace": "projects/bookings/src/environments/environment.ts",
35+
"with": "projects/bookings/src/environments/environment.prod.ts"
6636
}
6737
],
6838
"optimization": true,
@@ -90,57 +60,57 @@
9060
"serve": {
9161
"builder": "ngx-build-plus:dev-server",
9262
"options": {
93-
"browserTarget": "example-micro-frontend:build"
63+
"browserTarget": "bookings:build"
9464
},
9565
"configurations": {
9666
"production": {
97-
"browserTarget": "example-micro-frontend:build:production"
67+
"browserTarget": "bookings:build:production"
9868
}
9969
}
10070
},
10171
"extract-i18n": {
10272
"builder": "@angular-devkit/build-angular:extract-i18n",
10373
"options": {
104-
"browserTarget": "example-micro-frontend:build"
74+
"browserTarget": "bookings:build"
10575
}
10676
},
10777
"lint": {
10878
"builder": "@angular-devkit/build-angular:tslint",
10979
"options": {
110-
"tsConfig": ["projects/example-micro-frontend/tsconfig.app.json"],
80+
"tsConfig": ["projects/bookings/tsconfig.app.json"],
11181
"exclude": ["**/node_modules/**"]
11282
}
11383
}
11484
}
11585
},
116-
"example-platform": {
86+
"train-platform": {
11787
"projectType": "application",
118-
"root": "projects/example-platform",
119-
"sourceRoot": "projects/example-platform/src",
88+
"root": "projects/train-platform",
89+
"sourceRoot": "projects/train-platform/src",
12090
"prefix": "app",
12191
"architect": {
12292
"build": {
12393
"builder": "@angular-devkit/build-angular:browser",
12494
"options": {
125-
"outputPath": "dist/example-platform",
126-
"index": "projects/example-platform/src/index.html",
127-
"main": "projects/example-platform/src/main.ts",
128-
"polyfills": "projects/example-platform/src/polyfills.ts",
129-
"tsConfig": "projects/example-platform/tsconfig.app.json",
95+
"outputPath": "dist/train-platform",
96+
"index": "projects/train-platform/src/index.html",
97+
"main": "projects/train-platform/src/main.ts",
98+
"polyfills": "projects/train-platform/src/polyfills.ts",
99+
"tsConfig": "projects/train-platform/tsconfig.app.json",
130100
"aot": true,
131101
"assets": [
132-
"projects/example-platform/src/favicon.ico",
133-
"projects/example-platform/src/assets"
102+
"projects/train-platform/src/favicon.ico",
103+
"projects/train-platform/src/assets"
134104
],
135-
"styles": ["projects/example-platform/src/styles.css"],
105+
"styles": ["projects/train-platform/src/styles.css"],
136106
"scripts": []
137107
},
138108
"configurations": {
139109
"production": {
140110
"fileReplacements": [
141111
{
142-
"replace": "projects/example-platform/src/environments/environment.ts",
143-
"with": "projects/example-platform/src/environments/environment.prod.ts"
112+
"replace": "projects/train-platform/src/environments/environment.ts",
113+
"with": "projects/train-platform/src/environments/environment.prod.ts"
144114
}
145115
],
146116
"optimization": true,
@@ -168,29 +138,29 @@
168138
"serve": {
169139
"builder": "@angular-devkit/build-angular:dev-server",
170140
"options": {
171-
"browserTarget": "example-platform:build"
141+
"browserTarget": "train-platform:build"
172142
},
173143
"configurations": {
174144
"production": {
175-
"browserTarget": "example-platform:build:production"
145+
"browserTarget": "train-platform:build:production"
176146
}
177147
}
178148
},
179149
"extract-i18n": {
180150
"builder": "@angular-devkit/build-angular:extract-i18n",
181151
"options": {
182-
"browserTarget": "example-platform:build"
152+
"browserTarget": "train-platform:build"
183153
}
184154
},
185155
"lint": {
186156
"builder": "@angular-devkit/build-angular:tslint",
187157
"options": {
188-
"tsConfig": ["projects/example-platform/tsconfig.app.json"],
158+
"tsConfig": ["projects/train-platform/tsconfig.app.json"],
189159
"exclude": ["**/node_modules/**"]
190160
}
191161
}
192162
}
193163
}
194164
},
195-
"defaultProject": "ngx-elements-router"
165+
"defaultProject": "train-platform"
196166
}

0 commit comments

Comments
 (0)