Merge pull request #2 from maxceem/feature/cross-imports

Cross Imports

Author: urwithat

.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>