Fix Carousel on Async Wrapped Components

apps/ngu-carousel-example/project.json

@@ -16,7 +16,7 @@
     "build": {
       "executor": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
-        "outputPath": "dist/apps/ngu-carousel-example",
+        "outputPath": "dist/apps/ngu-carousel-example/browser",
         "index": "apps/ngu-carousel-example/src/index.html",
         "main": "apps/ngu-carousel-example/src/main.ts",
         "polyfills": "apps/ngu-carousel-example/src/polyfills.ts",
@@ -93,7 +93,9 @@
           "apps/ngu-carousel-example/src/favicon.ico",
           "apps/ngu-carousel-example/src/assets"
         ],
-        "styles": ["apps/ngu-carousel-example/src/styles.scss"],
+        "styles": [
+          "apps/ngu-carousel-example/src/styles.scss"
+        ],
         "scripts": []
       }
     },
@@ -119,6 +121,61 @@
         "outputPath": "dist/apps/ngu-carousel-example",
         "reportPath": "reports"
       }
+    },
+    "server": {
+      "executor": "@angular-devkit/build-angular:server",
+      "options": {
+        "outputPath": "dist/apps/ngu-carousel-example/server",
+        "main": "apps/ngu-carousel-example/server.ts",
+        "tsConfig": "apps/ngu-carousel-example/tsconfig.server.json",
+        "inlineStyleLanguage": "scss"
+      },
+      "configurations": {
+        "production": {
+          "outputHashing": "media"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "sourceMap": true,
+          "extractLicenses": false,
+          "vendorChunk": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve-ssr": {
+      "executor": "@nguniversal/builders:ssr-dev-server",
+      "configurations": {
+        "development": {
+          "browserTarget": "ngu-carousel-example:build:development",
+          "serverTarget": "ngu-carousel-example:server:development"
+        },
+        "production": {
+          "browserTarget": "ngu-carousel-example:build:production",
+          "serverTarget": "ngu-carousel-example:server:production"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "prerender": {
+      "executor": "@nguniversal/builders:prerender",
+      "options": {
+        "routes": [
+          "/"
+        ]
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "ngu-carousel-example:build:production",
+          "serverTarget": "ngu-carousel-example:server:production"
+        },
+        "development": {
+          "browserTarget": "ngu-carousel-example:build:development",
+          "serverTarget": "ngu-carousel-example:server:development"
+        }
+      },
+      "defaultConfiguration": "production"
     }
   }
-}
+}

apps/ngu-carousel-example/server.ts

@@ -0,0 +1,59 @@
+import 'zone.js/node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import express from 'express';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { AppServerModule } from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/apps/ngu-carousel-example/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

apps/ngu-carousel-example/src/app/app-routing.module.ts

@@ -16,6 +16,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./banner-vertical/banner-vertical.module').then(m => m.BannerVerticalModule)
   },
+  {
+    path: 'wrapped',
+    loadChildren: () =>
+      import('./wrapped/wrapped.module').then(m => m.WrappedModule)
+  },
   {
     path: 'getting-started',
     component: GettingStartedComponent
@@ -28,7 +33,9 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabledBlocking'
+})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

apps/ngu-carousel-example/src/app/app.server.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

apps/ngu-carousel-example/src/app/getting-started/getting-started.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-getting-started',
   templateUrl: './getting-started.component.html',
-  styleUrls: ['./getting-started.component.scss']
+  styleUrls: ['./getting-started.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GettingStartedComponent {}

apps/ngu-carousel-example/src/app/main-nav/main-nav.component.html

@@ -12,6 +12,7 @@
       <a mat-list-item routerLink="/tile">Tile</a>
       <a mat-list-item routerLink="/banner">Banner</a>
       <a mat-list-item routerLink="/banner-vertical">Banner Vertical</a>
+      <a mat-list-item routerLink="/wrapped">Wrapped Carousel</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>

apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts

@@ -1,12 +1,13 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
 @Component({
   selector: 'app-main-nav',
   templateUrl: './main-nav.component.html',
-  styleUrls: ['./main-nav.component.scss']
+  styleUrls: ['./main-nav.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MainNavComponent {
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(

apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.component.html

@@ -0,0 +1,39 @@
+<div class="wrapped-carosuel" *ngIf="carouselTileItems.length">
+  <h2>Wrapped Carousel</h2>
+  <ngu-carousel #myCarousel [inputs]="config" [dataSource]="carouselTileItems">
+    <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5 : 1">
+      &lt;
+    </button>
+
+    <ngu-tile *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani">
+      <ng-container *ngIf="i % 2 === 0">
+        <ng-container
+          *ngTemplateOutlet="card; context: { $implicit: item, index: i }"
+        ></ng-container>
+      </ng-container>
+      <ng-container *ngIf="i % 2 !== 0">
+        <div class="tile" [style.background]="'url(' + item + ')'">
+          <h1>Odd: {{ i + 1 }}</h1>
+        </div>
+      </ng-container>
+    </ngu-tile>
+
+    <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5 : 1">
+      &gt;
+    </button>
+
+    <ul class="myPoint" NguCarouselPoint>
+      <li
+        *ngFor="let i of myCarousel.pointNumbers"
+        [class.active]="i === myCarousel.activePoint"
+        (click)="myCarousel.moveTo(i)"
+      ></li>
+    </ul>
+  </ngu-carousel>
+</div>
+
+<ng-template #card let-item let-i="index">
+  <div class="tile" [style.background]="'url(' + item + ')'">
+    <h1>Even: {{ i + 1 }}</h1>
+  </div>
+</ng-template>