Skip to content

Commit 1a6ff71

Browse files
manfredsteyermanfredsteyer
committed
feat(nf): add logger
1 parent 46b861b commit 1a6ff71

24 files changed

+607
-562
lines changed

‎libs/mf-tools/tutorial/index.md

+119-119
Original file line numberDiff line numberDiff line change
@@ -24,114 +24,114 @@ If you don't want to do the upstream tutorial first, you can use [this example](
2424

2525
3. Open your shell's `app.routes.ts` and add the following routes:
2626

27-
```typescript
28-
[...]
29-
30-
// Add this import:
31-
import { WebComponentWrapper, WebComponentWrapperOptions, startsWith } from '@angular-architects/module-federation-tools';
32-
33-
[...]
34-
35-
36-
export const APP_ROUTES: Routes = [
37-
38-
[...]
39-
// Add these routes:
40-
{
41-
path: 'react',
42-
component: WebComponentWrapper,
43-
data: {
44-
type: 'script',
45-
remoteEntry: 'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
46-
remoteName: 'react',
47-
exposedModule: './web-components',
48-
elementName: 'react-element'
49-
} as WebComponentWrapperOptions
50-
},
51-
52-
{
53-
path: 'angular1',
54-
component: WebComponentWrapper,
55-
data: {
56-
type: 'script',
57-
remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
58-
remoteName: 'angular1',
59-
exposedModule: './web-components',
60-
elementName: 'angular1-element'
61-
} as WebComponentWrapperOptions
62-
},
63-
64-
{
65-
path: 'angular2',
66-
component: WebComponentWrapper,
67-
data: {
68-
type: 'script',
69-
remoteEntry: 'https://gray-pond-030798810.azurestaticapps.net//remoteEntry.js',
70-
remoteName: 'angular2',
71-
exposedModule: './web-components',
72-
elementName: 'angular2-element'
73-
} as WebComponentWrapperOptions
74-
},
75-
76-
{
77-
matcher: startsWith('angular3'),
78-
component: WebComponentWrapper,
79-
data: {
80-
type: 'script',
81-
remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
82-
remoteName: 'angular3',
83-
exposedModule: './web-components',
84-
elementName: 'angular3-element'
85-
} as WebComponentWrapperOptions
86-
},
87-
88-
{
89-
path: 'vue',
90-
component: WebComponentWrapper,
91-
data: {
92-
type: 'script',
93-
remoteEntry: 'https://mango-field-0d0778c10.azurestaticapps.net/remoteEntry.js',
94-
remoteName: 'vue',
95-
exposedModule: './web-components',
96-
elementName: 'vue-element'
97-
} as WebComponentWrapperOptions
98-
},
99-
100-
{
101-
path: 'angularjs',
102-
component: WebComponentWrapper,
103-
data: {
104-
type: 'script',
105-
remoteEntry: 'https://calm-mud-0a3ee4a10.azurestaticapps.net/remoteEntry.js',
106-
remoteName: 'angularjs',
107-
exposedModule: './web-components',
108-
elementName: 'angularjs-element'
109-
} as WebComponentWrapperOptions
110-
},
111-
112-
{
113-
matcher: startsWith('angular3'),
114-
component: WebComponentWrapper,
115-
data: {
116-
type: 'script',
117-
remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
118-
remoteName: 'angular3',
119-
exposedModule: './web-components',
120-
elementName: 'angular3-element'
121-
} as WebComponentWrapperOptions
122-
},
123-
124-
125-
// THIS needs to be the last route!!!
126-
{
127-
path: '**',
128-
component: NotFoundComponent
129-
}
130-
131-
];
132-
```
133-
134-
**Remarks:** The URL matcher ``startsWith`` makes the shell to ignore the remaining part of the URL. This is necessary when the loaded micro frontend uses a router too.
27+
```typescript
28+
[...]
29+
30+
// Add this import:
31+
import { WebComponentWrapper, WebComponentWrapperOptions, startsWith } from '@angular-architects/module-federation-tools';
32+
33+
[...]
34+
35+
36+
export const APP_ROUTES: Routes = [
37+
38+
[...]
39+
// Add these routes:
40+
{
41+
path: 'react',
42+
component: WebComponentWrapper,
43+
data: {
44+
type: 'script',
45+
remoteEntry: 'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
46+
remoteName: 'react',
47+
exposedModule: './web-components',
48+
elementName: 'react-element'
49+
} as WebComponentWrapperOptions
50+
},
51+
52+
{
53+
path: 'angular1',
54+
component: WebComponentWrapper,
55+
data: {
56+
type: 'script',
57+
remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
58+
remoteName: 'angular1',
59+
exposedModule: './web-components',
60+
elementName: 'angular1-element'
61+
} as WebComponentWrapperOptions
62+
},
63+
64+
{
65+
path: 'angular2',
66+
component: WebComponentWrapper,
67+
data: {
68+
type: 'script',
69+
remoteEntry: 'https://gray-pond-030798810.azurestaticapps.net//remoteEntry.js',
70+
remoteName: 'angular2',
71+
exposedModule: './web-components',
72+
elementName: 'angular2-element'
73+
} as WebComponentWrapperOptions
74+
},
75+
76+
{
77+
matcher: startsWith('angular3'),
78+
component: WebComponentWrapper,
79+
data: {
80+
type: 'script',
81+
remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
82+
remoteName: 'angular3',
83+
exposedModule: './web-components',
84+
elementName: 'angular3-element'
85+
} as WebComponentWrapperOptions
86+
},
87+
88+
{
89+
path: 'vue',
90+
component: WebComponentWrapper,
91+
data: {
92+
type: 'script',
93+
remoteEntry: 'https://mango-field-0d0778c10.azurestaticapps.net/remoteEntry.js',
94+
remoteName: 'vue',
95+
exposedModule: './web-components',
96+
elementName: 'vue-element'
97+
} as WebComponentWrapperOptions
98+
},
99+
100+
{
101+
path: 'angularjs',
102+
component: WebComponentWrapper,
103+
data: {
104+
type: 'script',
105+
remoteEntry: 'https://calm-mud-0a3ee4a10.azurestaticapps.net/remoteEntry.js',
106+
remoteName: 'angularjs',
107+
exposedModule: './web-components',
108+
elementName: 'angularjs-element'
109+
} as WebComponentWrapperOptions
110+
},
111+
112+
{
113+
matcher: startsWith('angular3'),
114+
component: WebComponentWrapper,
115+
data: {
116+
type: 'script',
117+
remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
118+
remoteName: 'angular3',
119+
exposedModule: './web-components',
120+
elementName: 'angular3-element'
121+
} as WebComponentWrapperOptions
122+
},
123+
124+
125+
// THIS needs to be the last route!!!
126+
{
127+
path: '**',
128+
component: NotFoundComponent
129+
}
130+
131+
];
132+
```
133+
134+
**Remarks:** The URL matcher `startsWith` makes the shell to ignore the remaining part of the URL. This is necessary when the loaded micro frontend uses a router too.
135135

136136
**Remarks:** Please note that we are using `type: 'script'` here. This is needed for classic webpack setups as normally used in the Vue and React world as well as for Angular before version 13. Beginning with version 13, the CLI emits EcmaScript module instead of "plain old" JavaScript files. Hence, when loading a remote compiled with Angular 13 or higher, you need to set `type` to `module`. In our case, however, the remotes we find at the shown URLs in the cloud are Angular 12-based, hence we need `type: 'script'`.
137137

@@ -149,20 +149,20 @@ If you don't want to do the upstream tutorial first, you can use [this example](
149149

150150
5. Open your shell's `bootstrap.ts` and use the `bootstrap` helper function found in `@angular-architects/module-federation-tools` for bootstrapping:
151151

152-
```typescript
153-
import { AppModule } from './app/app.module';
154-
import { environment } from './environments/environment';
155-
import { bootstrap } from '@angular-architects/module-federation-tools';
152+
```typescript
153+
import { AppModule } from './app/app.module';
154+
import { environment } from './environments/environment';
155+
import { bootstrap } from '@angular-architects/module-federation-tools';
156156

157-
bootstrap(AppModule, {
158-
production: environment.production,
159-
appType: 'shell',
160-
});
161-
```
157+
bootstrap(AppModule, {
158+
production: environment.production,
159+
appType: 'shell',
160+
});
161+
```
162162

163-
Remarks: This special bootstrap function takes care of some **workarounds** necessary to run several versions of Angular side by side.
163+
Remarks: This special bootstrap function takes care of some **workarounds** necessary to run several versions of Angular side by side.
164164

165-
6. Start your ``shell`` and the ``mfe1`` project (e. g. by calling `npm run run:all`) and try it out.
165+
6. Start your `shell` and the `mfe1` project (e. g. by calling `npm run run:all`) and try it out.
166166

167167
## Part 2: Inspect the Web-Component-based Micro Frontends
168168

0 commit comments

Comments
 (0)