Merge pull request #3 from aboudard/2-angular-16-update

feat: upgrade to angular 16

Author: aboudard

application/ng-shell/package-lock.json

@@ -11,34 +11,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-architects/module-federation": "^15.0.3",
-    "@angular/animations": "^15.2.10",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/forms": "^15.2.10",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@ngrx/store": "^15.4.0",
-    "@ngrx/store-devtools": "^15.4.0",
-    "core": "^15.0.0",
+    "@angular-architects/module-federation": "^16.0.4",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@ngrx/store": "^16.3.0",
+    "@ngrx/store-devtools": "^16.3.0",
+    "core": "^16.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular/cli": "~15.2.10",
-    "@angular/compiler-cli": "^15.2.10",
+    "@angular-devkit/build-angular": "^16.2.14",
+    "@angular/cli": "~16.2.14",
+    "@angular/compiler-cli": "^16.2.12",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ngx-build-plus": "^15.0.0",
+    "ngx-build-plus": "^16.0.0",
     "typescript": "~4.9.5"
   }
 }

application/ng-shell/package.json

@@ -1,14 +1,19 @@
-<ul>
-  <li><span class="title">
+<header>
+	<ul>
+		<li><span class="title">
     {{title}} -
   </span></li>
-  <li><a routerLink="home" routerLinkActive="active">Home</a></li>
-  <li><a routerLink="users" routerLinkActive="active">Users</a></li>
-  <li *ngFor="let remote of remotes">
-    <a [routerLink]="remote.routePath" routerLinkActive="active">{{remote.displayName}}</a>
-  </li>
-  <li class="user"><span>## {{ (user$ | async)?.name }} ##</span></li>
-</ul>
+		<li><a routerLink="home" routerLinkActive="active">Home</a></li>
+		<li><a routerLink="users" routerLinkActive="active">Users</a></li>
+		<li *ngFor="let remote of remotes">
+			<a [routerLink]="remote.routePath" routerLinkActive="active">{{remote.displayName}}</a>
+		</li>
+		<li class="user"><span>## {{ (user$ | async)?.name }} ##</span></li>
+	</ul>
+</header>
 <main>
 <router-outlet></router-outlet>
 </main>
+<footer>
+	<p>Angular / Spring Boot - Module Federation v16</p>
+</footer>

application/ng-shell/src/app/app-routing.module.ts

@@ -5,13 +5,11 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
+    imports: [
+        RouterTestingModule,
         AppComponent
-      ],
-    }).compileComponents();
+    ],
+}).compileComponents();
   });
 
   it('should create the app', () => {

application/ng-shell/src/app/app.component.html

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { getUser } from 'core';
 import { CustomManifest, CustomRemoteConfig } from './utils/config';
 import { getManifest } from '@angular-architects/module-federation';
-import { buildRoutes } from './utils/routes';
+import { buildRoutes } from './utils/routes';
+import { NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, NgFor, RouterOutlet, AsyncPipe]
 })
 export class AppComponent implements OnInit {
 

application/ng-shell/src/app/app.component.spec.ts

@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+
+export const APP_ROUTES: Routes = [
+	{
+		path: 'home', component: HomeComponent, title: 'Home'
+	},
+	{
+		path: 'users', loadChildren: () => import('./users/users.routes').then(m => m.usersRoutes), title: 'Users'
+	},
+	{
+		path: '', redirectTo: 'home', pathMatch: 'full'
+	}
+];

application/ng-shell/src/app/app.component.ts

@@ -1,12 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { CoreService } from 'core';
 import { Observable } from 'rxjs';
 import { getCount } from '../store/counter.selectors';
+import { AsyncPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
-  selector: 'app-home',
-  template: `
+    selector: 'app-home',
+    template: `
     <h2>home works !</h2>
     <p>This is the counter: {{counter$ | async}}</p>
     <p><button class="btn" (click)="getCore()">get core</button></p>
@@ -20,7 +22,9 @@ import { getCount } from '../store/counter.selectors';
     </div>
 
   `,
-  styles: []
+    styles: [],
+    standalone: true,
+    imports: [FormsModule, AsyncPipe]
 })
 export class HomeComponent {