feat: update to angular 18, standalone app and zoneless

.github/workflows/nodejs.yml

@@ -15,18 +15,22 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ['18.13.0', '20']
+        node-version: ['20', '18.13.0']
 
     steps:
       - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
       - name: Build
         run: |
-          npx nx run-many --target=build --all
+          pnpx nx run-many --target=build --all
         env:
           CI: true

.github/workflows/npm-publish.yml

@@ -15,25 +15,33 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                version: 9
             - uses: actions/setup-node@v4
               with:
                   node-version: 18.13.0
-            - run: npm ci
+            - run: pnpm install
 
     publish-npm:
         needs: build
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                version: 9
             - uses: actions/setup-node@v4
               with:
                   node-version: 18.13.0
                   registry-url: https://registry.npmjs.org/
                   scope: '@ngu'
             - name: Build and Publish
               run: |
-                   npm ci
-                   npx nx run-many --target=build --all
+                   pnpm install
+                   pnpx nx run-many --target=build --all
                    cd dist/libs/ngu/carousel
                    npm publish --access=public
               shell: bash

.prettierignore

@@ -1,5 +1,8 @@
 package.json
 *.yml
 
-/.nx/cache
 .angular
+
+/.nx/cache
+/.nx/workspace-data
+

apps/ngu-carousel-e2e/project.json

@@ -3,15 +3,14 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/ngu-carousel-e2e/src",
   "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["ngu-carousel-example"],
   "targets": {
     "lint": {
       "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["apps/ngu-carousel-e2e/**/*.{js,ts}"]
+        "lintFilePatterns": ["{projectRoot}/**/*.{js,ts}"]
       }
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["ngu-carousel-example"]
+  }
 }

apps/ngu-carousel-example/project.json

@@ -2,6 +2,8 @@
   "name": "ngu-carousel-example",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "sourceRoot": "apps/ngu-carousel-example/src",
+  "prefix": "app",
   "generators": {
     "@schematics/angular:component": {
       "style": "scss"
@@ -10,16 +12,14 @@
       "strict": true
     }
   },
-  "sourceRoot": "apps/ngu-carousel-example/src",
-  "prefix": "app",
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser-esbuild",
+      "executor": "@angular-devkit/build-angular:application",
       "options": {
         "outputPath": "dist/apps/ngu-carousel-example/browser",
         "index": "apps/ngu-carousel-example/src/index.html",
-        "main": "apps/ngu-carousel-example/src/main.ts",
-        "polyfills": ["zone.js"],
+        "browser": "apps/ngu-carousel-example/src/main.ts",
+        "polyfills": [],
         "tsConfig": "apps/ngu-carousel-example/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
@@ -51,9 +51,7 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
@@ -82,8 +80,8 @@
     "test": {
       "executor": "@angular-devkit/build-angular:karma",
       "options": {
-        "main": "apps/ngu-carousel-example/src/test.ts",
-        "polyfills": ["zone.js", "zone.js/testing"],
+        "browser": "apps/ngu-carousel-example/src/test.ts",
+        "polyfills": [],
         "tsConfig": "apps/ngu-carousel-example/tsconfig.spec.json",
         "karmaConfig": "apps/ngu-carousel-example/karma.conf.js",
         "inlineStyleLanguage": "scss",
@@ -98,10 +96,7 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "lintFilePatterns": [
-          "apps/ngu-carousel-example/**/*.ts",
-          "apps/ngu-carousel-example/**/*.html"
-        ]
+        "lintFilePatterns": ["{projectRoot}/**/*.ts", "{projectRoot}/**/*.html"]
       }
     },
     "generate-bundle": {

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

@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { provideServerRendering } from '@angular/platform-server';
+import { APP_ROUTES } from './app.routes';
+
+export const appServerConfig: ApplicationConfig = {
+  providers: [provideRouter(APP_ROUTES), provideAnimations(), provideServerRendering()]
+};

apps/ngu-carousel-example/src/app/app.component.spec.ts

@@ -16,18 +16,19 @@ describe('AppComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent, MainNavComponent],
-      imports: [
+    imports: [
         NoopAnimationsModule,
         LayoutModule,
         MatButtonModule,
         MatIconModule,
         MatListModule,
         MatSidenavModule,
         MatToolbarModule,
-        RouterTestingModule
-      ]
-    }).compileComponents();
+        RouterTestingModule,
+        MainNavComponent,
+        AppComponent
+    ]
+}).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,13 +8,16 @@ import { NguCarouselConfig } from '@ngu/carousel';
 import { interval, Observable } from 'rxjs';
 import { map, startWith, take } from 'rxjs/operators';
 import { slider } from './slide-animation';
+import { MainNavComponent } from './main-nav/main-nav.component';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   animations: [slider],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MainNavComponent]
 })
 export class AppComponent implements AfterViewInit {
   images = ['assets/bg.jpg', 'assets/car.png', 'assets/canberra.jpg', 'assets/holi.jpg'];

apps/ngu-carousel-example/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { APP_ROUTES } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(APP_ROUTES),
+    provideAnimations(),
+    provideExperimentalZonelessChangeDetection()
+  ]
+};

apps/ngu-carousel-example/src/app/app.routes.ts

@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+
+export const APP_ROUTES: Routes = [
+  {
+    path: 'banner',
+    loadComponent: () => import('./banner/banner.component').then(m => m.BannerComponent)
+  },
+  {
+    path: 'tile',
+    loadComponent: () => import('./tile/tile.component').then(m => m.TileComponent)
+  },
+  {
+    path: 'tile-2-images',
+    loadComponent: () =>
+      import('./tile-2-images/tile-2-images.component').then(m => m.Tile2ImagesComponent)
+  },
+  {
+    path: 'banner-vertical',
+    loadComponent: () =>
+      import('./banner-vertical/banner-vertical.component').then(m => m.BannerVerticalComponent)
+  },
+  {
+    path: 'wrapped',
+    loadComponent: () => import('./wrapped/wrapped.component').then(m => m.WrappedComponent)
+  },
+  {
+    path: 'getting-started',
+    component: GettingStartedComponent
+  },
+  {
+    path: '',
+    redirectTo: 'tile',
+    pathMatch: 'full'
+  }
+];

apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.component.spec.ts

@@ -9,9 +9,8 @@ describe('BannerVerticalComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [BannerVerticalComponent],
-      imports: [NguCarousel]
-    }).compileComponents();
+    imports: [NguCarousel, BannerVerticalComponent]
+}).compileComponents();
   }));
 
   beforeEach(() => {