cross import demo

e2e tests are NOT supported

Author: maxceem

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.DS_Store

extra-webpack.config.js

@@ -3,6 +3,13 @@ const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').defaul
 module.exports = (config, options) => {
   const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
 
+  // we have to list here all the microapps which we would like to use in imports
+  // so webpack doesn't tries to import them
+  singleSpaWebpackConfig.externals = {
+    '@topcoder/micro-frontends-navbar-app':
+      '@topcoder/micro-frontends-navbar-app',
+  };
+
   // Feel free to modify this webpack config however you'd like to
   return singleSpaWebpackConfig;
 };

src/app/app.component.html

@@ -8,6 +8,8 @@ <h1>Angular child app example</h1>
   />
 
   <div><a routerLink="/micro-frontends-react-route">Link to React child app</a></div>
+
+  <tc-ex-auth-demo></tc-ex-auth-demo>
 </div>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { setAppMenu } from '@topcoder/micro-frontends-navbar-app';
+import appMenu from './constants/appMenu';
 
 @Component({
   selector: 'tc-ex-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'micro-frontends-angular-app';
+
+  ngOnInit(): void {
+    // when app starts it should set its side menu structure
+    setAppMenu('/micro-frontends-angular-route', appMenu);
+  }
 }

src/app/app.module.ts

@@ -4,11 +4,13 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { EmptyRouteComponent } from './empty-route/empty-route.component';
+import { AuthDemoComponent } from './auth-demo/auth-demo.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    EmptyRouteComponent
+    EmptyRouteComponent,
+    AuthDemoComponent
   ],
   imports: [
     BrowserModule,

src/app/assets/images/angular-green.svg

@@ -0,0 +1,18 @@
+<h2>Authentication</h2>
+<div *ngIf="authUserTokens.loading">Authentication...</div>
+<div *ngIf="!authUserTokens.loading && authUserTokens.error">Authentication Error: {{authUserTokens.error.message}}</div>
+<div *ngIf="!authUserTokens.loading && !authUserTokens.error && authUserTokens.value.tokenV3">
+  User is logged-in <button (click)="logout()">Logout</button>
+
+  <h3>User Profile</h3>
+  <div *ngIf="authUserProfile.loading">User Profile Loading...</div>
+  <div *ngIf="!authUserProfile.loading && authUserProfile.error">Profile Loading Error: {{authUserProfile.error.message}}</div>
+  <ul *ngIf="!authUserProfile.loading && !authUserProfile.error && authUserProfile.value">
+    <li><strong>Handle:</strong> {{authUserProfile.value.handle}}</li>
+    <li><strong>First Name:</strong> {{authUserProfile.value.firstName}}</li>
+    <li><strong>Last Name:</strong> {{authUserProfile.value.lastName}}</li>
+  </ul>
+</div>
+<div *ngIf="!authUserTokens.loading && !authUserTokens.error && !authUserTokens.value.tokenV3">
+  User is logged-out <button (click)="login()">Login</button>
+</div>

src/app/assets/images/angular-grey.svg

@@ -0,0 +1,59 @@
+import { Component, OnInit, NgZone } from '@angular/core';
+import {
+  login,
+  logout,
+  getAuthUserTokens,
+  getAuthUserProfile,
+} from '@topcoder/micro-frontends-navbar-app';
+
+@Component({
+  selector: 'tc-ex-auth-demo',
+  templateUrl: './auth-demo.component.html',
+})
+export class AuthDemoComponent implements OnInit {
+  authUserTokens = { loading: true, error: null, value: null };
+  authUserProfile = { loading: true, error: null, value: null };
+  login = login;
+  logout = logout;
+  constructor(private zone: NgZone) {}
+
+  ngOnInit(): void {
+    // get authenticated user tokens
+    getAuthUserTokens()
+      .then((tokens) => {
+        // as this promise is not handled by Zone we
+        // have to manually trigger change detection
+        this.zone.run(() => {
+          this.authUserTokens.value = tokens;
+          this.authUserTokens.loading = false;
+        });
+      })
+      .catch((error) => {
+        // as this promise is not handled by Zone we
+        // have to manually trigger change detection
+        this.zone.run(() => {
+          this.authUserTokens.error = error;
+          this.authUserTokens.loading = false;
+        });
+      });
+
+    // as get authenticated user profile
+    getAuthUserProfile()
+      .then((profile) => {
+        // as this promise is not handled by Zone we
+        // have to manually trigger change detection
+        this.zone.run(() => {
+          this.authUserProfile.value = profile;
+          this.authUserProfile.loading = false;
+        });
+      })
+      .catch((error) => {
+        // as this promise is not handled by Zone we
+        // have to manually trigger change detection
+        this.zone.run(() => {
+          this.authUserProfile.error = error;
+          this.authUserProfile.loading = false;
+        });
+      });
+  }
+}

src/app/assets/images/home-green.svg

@@ -0,0 +1,24 @@
+/**
+ * Angular app side menu structure
+ */
+import angularIcon from '../assets/images/angular-grey.svg';
+import angularActiveIcon from '../assets/images/angular-green.svg';
+import homeIcon from '../assets/images/home.svg';
+import homeActiveIcon from '../assets/images/home-green.svg';
+
+const appMenu = [
+  {
+    title: 'Angular App',
+    path: '/micro-frontends-angular-route',
+    icon: angularIcon,
+    activeIcon: angularActiveIcon,
+  },
+  {
+    title: 'Home',
+    path: '/micro-frontends-angular-route/home',
+    icon: homeIcon,
+    activeIcon: homeActiveIcon,
+  },
+];
+
+export default appMenu;

src/app/assets/images/home.svg

@@ -0,0 +1,12 @@
+declare module '@topcoder/micro-frontends-navbar-app' {
+  export const login: any;
+  export const logout: any;
+  export const setAppMenu: any;
+  export const getAuthUserTokens: any;
+  export const getAuthUserProfile: any;
+}
+
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}