create-sitecore-jss 22.10.0-canary.9 → 22.11.0-canary.2

package/dist/templates/angular/angular.json

@@ -1,133 +1,133 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "cli": {
-    "analytics": false
-  },
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "<%- appName %>": {
-      "root": ".",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
-          "options": {
-            "outputPath": "dist/browser/",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
-            "assets": ["src/assets", "src/favicon.ico"],
-            "styles": ["src/styles.css"],
-            "scripts": [],
-            "allowedCommonJsDependencies": [
-              "zen-observable",
-              "js-sha256",
-              "url-parse",
-              "graphql-request",
-              "debug"
-            ],
-            "customWebpackConfig": {
-              "path": "./webpack.config.js"
-            }
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "baseHref": "/",
-              "aot": true,
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.js",
-                  "with": "src/environments/environment.prod.js"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
-          "options": {
-            "buildTarget": "<%- appName %>:build",
-            "port": 3000,
-            "proxyConfig": "proxy.conf.js"
-          },
-          "configurations": {
-            "production": {
-              "buildTarget": "<%- appName %>:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "<%- appName %>:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [],
-            "styles": ["src/styles.css"],
-            "assets": ["src/assets", "src/favicon.ico"]
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "main": "server.bundle.ts",
-            "tsConfig": "src/tsconfig.server.json",
-            "deleteOutputPath": false,
-            "outputHashing": "none"
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "sourceMap": false,
-              "optimization": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.js",
-                  "with": "src/environments/environment.prod.js"
-                }
-              ]
-            }
-          }
-        }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "style": "css"
-    },
-    "@schematics/angular:directive": {
-      "prefix": "app"
-    }
-  }
-}
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "<%- appName %>": {
+      "root": ".",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "outputPath": "dist/browser/",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles.css"],
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "zen-observable",
+              "js-sha256",
+              "url-parse",
+              "graphql-request",
+              "debug"
+            ],
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "baseHref": "/",
+              "aot": true,
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.js",
+                  "with": "src/environments/environment.prod.js"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "buildTarget": "<%- appName %>:build",
+            "port": 3000,
+            "proxyConfig": "proxy.conf.js"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "<%- appName %>:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "<%- appName %>:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": ["src/styles.css"],
+            "assets": ["src/assets", "src/favicon.ico"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "main": "server.bundle.ts",
+            "tsConfig": "src/tsconfig.server.json",
+            "deleteOutputPath": false,
+            "outputHashing": "none"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "sourceMap": false,
+              "optimization": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.js",
+                  "with": "src/environments/environment.prod.js"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

package/dist/templates/angular/package.json

@@ -1,119 +1,118 @@
-{
-  "name": "<%- appName %>",
-  "version": "0.1.0",
-  "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
-  "config": {
-    "appName": "<%- appName %>",
-    "rootPlaceholders": [
-      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
-    ],
-    "sitecoreDistPath": "/dist/<%- appName %>",
-    "sitecoreConfigPath": "/App_Config/Include/zzz",
-    "buildArtifactsPath": "./dist",
-    "graphQLEndpointPath": "/sitecore/api/graph/edge",
-    "language": "en"
-  },
-  "scripts": {
-    "ng": "ng",
-    "lint": "ng lint <%- appName %> --fix",
-    "jss": "jss",
-    "start:connected": "npm-run-all --serial bootstrap start:angular start:watch-components",
-    "build": "npm-run-all --serial bootstrap build:client build:server",
-    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component --no-manifest",
-    "start:angular": "ng serve -o",
-    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory/index.ts --watch",
-    "build:client": "cross-env-shell ng build --configuration=production --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
-    "build:server": "cross-env-shell ng run <%- appName %>:server:production --output-path=$npm_package_config_buildArtifactsPath",
-    "postbuild:server": "move-cli ./dist/main.js ./dist/server.bundle.js",
-    "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
-    "graphql:update": "ts-node --project src/tsconfig.webpack-server.json ./scripts/update-graphql-fragment-data.ts",
-    "install-pre-push-hook": "ts-node --project src/tsconfig.webpack-server.json ./scripts/install-pre-push-hook.ts"
-  },
-  "private": true,
-  "author": {
-    "name": "Sitecore Corporation",
-    "url": "https://jss.sitecore.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sitecore/jss.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sitecore/jss/issues"
-  },
-  "homepage": "https://jss.sitecore.com",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@angular/animations": "~18.2.13",
-    "@angular/common": "~18.2.13",
-    "@angular/compiler": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/forms": "~18.2.13",
-    "@angular/platform-browser": "~18.2.13",
-    "@angular/platform-browser-dynamic": "~18.2.13",
-    "@angular/platform-server": "~18.2.13",
-    "@angular/router": "~18.2.13",
-    "@apollo/client": "^3.12.9",
-    "@ngx-translate/core": "~15.0.0",
-    "@ngx-translate/http-loader": "~8.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "<%- version %>",
-    "apollo-angular": "~8.0.2",
-    "bootstrap": "^5.3.3",
-    "core-js": "~3.45.0",
-    "graphql": "15.10.1",
-    "graphql-tag": "~2.11.0",
-    "rxjs": "~7.8.2",
-    "tslib": "^2.8.1",
-    "zone.js": "~0.14.7",
-    "reflect-metadata": "^0.2.2"
-  },
-  "devDependencies": {
-    "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.2.14",
-    "@angular-eslint/builder": "^18.4.3",
-    "@angular-eslint/eslint-plugin": "^18.4.3",
-    "@angular-eslint/eslint-plugin-template": "^18.4.3",
-    "@angular-eslint/schematics": "^18.4.3",
-    "@angular-eslint/template-parser": "^18.4.3",
-    "@angular/cli": "~18.2.13",
-    "@angular/compiler-cli": "~18.2.13",
-    "@angular/language-service": "~18.2.13",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "<%- version %>",
-    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
-    "@types/jasmine": "~3.6.7",
-    "@types/node": "~22.9.0",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
-    "chalk": "~4.1.0",
-    "chokidar": "^4.0.3",
-    "codelyzer": "~6.0.1",
-    "constant-case": "^3.0.4",
-    "cross-env": "~7.0.3",
-    "del-cli": "^5.0.0",
-    "dotenv": "^17.2.1",
-    "dotenv-webpack": "^8.1.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "48.7.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "jasmine-core": "~3.7.1",
-    "jasmine-spec-reporter": "~6.0.0",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "~1.5.4",
-    "move-cli": "^2.0.0",
-    "npm-run-all2": "^7.0.1",
-    
-    "ts-node": "~10.9.2",
-    "typescript": "~5.4.0"
-  },
-  "overrides": {
-    "request": {
-      "form-data": "^2.5.5"
-    }
-  }
-}
+{
+  "name": "<%- appName %>",
+  "version": "0.1.0",
+  "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
+  "config": {
+    "appName": "<%- appName %>",
+    "rootPlaceholders": [
+      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
+    ],
+    "sitecoreDistPath": "/dist/<%- appName %>",
+    "sitecoreConfigPath": "/App_Config/Include/zzz",
+    "buildArtifactsPath": "./dist",
+    "graphQLEndpointPath": "/sitecore/api/graph/edge",
+    "language": "en"
+  },
+  "scripts": {
+    "ng": "ng",
+    "lint": "ng lint <%- appName %> --fix",
+    "jss": "jss",
+    "start:connected": "npm-run-all --serial bootstrap start:angular start:watch-components",
+    "build": "npm-run-all --serial bootstrap build:client build:server",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component --no-manifest",
+    "start:angular": "ng serve -o",
+    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory/index.ts --watch",
+    "build:client": "cross-env-shell ng build --configuration=production --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
+    "build:server": "cross-env-shell ng run <%- appName %>:server:production --output-path=$npm_package_config_buildArtifactsPath",
+    "postbuild:server": "move-cli ./dist/main.js ./dist/server.bundle.js",
+    "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
+    "graphql:update": "ts-node --project src/tsconfig.webpack-server.json ./scripts/update-graphql-fragment-data.ts",
+    "install-pre-push-hook": "ts-node --project src/tsconfig.webpack-server.json ./scripts/install-pre-push-hook.ts"
+  },
+  "private": true,
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sitecore/jss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "homepage": "https://jss.sitecore.com",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@angular/animations": "~20.3.10",
+    "@angular/common": "~20.3.10",
+    "@angular/compiler": "~20.3.10",
+    "@angular/core": "~20.3.10",
+    "@angular/forms": "~20.3.10",
+    "@angular/platform-browser": "~20.3.10",
+    "@angular/platform-browser-dynamic": "~20.3.10",
+    "@angular/platform-server": "~20.3.10",
+    "@angular/router": "~20.3.10",
+    "@apollo/client": "^3.12.9",
+    "@ngx-translate/core": "~15.0.0",
+    "@ngx-translate/http-loader": "~8.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "<%- version %>",
+    "apollo-angular": "~11.0.0",
+    "bootstrap": "^5.3.3",
+    "core-js": "~3.45.0",
+    "graphql": "~16.11.0",
+    "graphql-tag": "^2.12.6",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^20.0.0",
+    "@angular-devkit/build-angular": "^20.3.9",
+    "@angular-eslint/builder": "^20.5.1",
+    "@angular-eslint/eslint-plugin": "^20.5.1",
+    "@angular-eslint/eslint-plugin-template": "^20.5.1",
+    "@angular-eslint/schematics": "^20.5.1",
+    "@angular-eslint/template-parser": "^20.5.1",
+    "@angular/cli": "~20.3.9",
+    "@angular/compiler-cli": "~20.3.10",
+    "@angular/language-service": "~20.3.10",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
+    "@types/jasmine": "~3.6.7",
+    "@types/node": "~22.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "chalk": "~4.1.0",
+    "chokidar": "^4.0.3",
+    "codelyzer": "~6.0.1",
+    "constant-case": "^3.0.4",
+    "cross-env": "~7.0.3",
+    "del-cli": "^5.0.0",
+    "dotenv": "^17.2.1",
+    "dotenv-webpack": "^8.1.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "48.7.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "jasmine-core": "~3.7.1",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "~1.5.4",
+    "move-cli": "^2.0.0",
+    "npm-run-all2": "^7.0.1",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.8.0"
+  },
+  "overrides": {
+    "request": {
+      "form-data": "^2.5.5"
+    }
+  }
+}

package/dist/templates/angular/scripts/generate-component-factory/template.ts

@@ -28,6 +28,7 @@ export const components = [
 @NgModule({
   imports: [
     AppComponentsSharedModule,
+    ${declarations.join('\n    ')}
     JssModule.withComponents([
       ${registrations.join('\n      ')}
     ], [
@@ -38,9 +39,6 @@ export const components = [
     JssModule,
     AppComponentsSharedModule,
   ],
-  declarations: [
-    ${declarations.join('\n    ')}
-  ],
 })
 export class AppComponentsModule { }
 `;

package/dist/templates/angular/server.bundle.ts

@@ -5,6 +5,7 @@ import 'reflect-metadata';
 import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { AppServerModule, renderModule } from './src/main.server';
+import { JSS_SERVER_LAYOUT_DATA, JSS_SERVER_VIEWBAG } from './src/app/injection-tokens';
 
 export * from './src/main.server';
 
@@ -73,8 +74,8 @@ function renderView(
       url: path,
       extraProviders: [
         // custom injection with the initial state that SSR should utilize
-        { provide: 'JSS_SERVER_LAYOUT_DATA', useValue: transferState },
-        { provide: 'JSS_SERVER_VIEWBAG', useValue: state.viewBag },
+        { provide: JSS_SERVER_LAYOUT_DATA, useValue: transferState },
+        { provide: JSS_SERVER_VIEWBAG, useValue: state.viewBag },
       ],
     })
       .then((html) => callback(null, { html }))

package/dist/templates/angular/src/app/ViewBag.ts

@@ -0,0 +1,4 @@
+export interface ViewBag {
+    [key: string]: unknown;
+    dictionary: { [key: string]: string };
+}

package/dist/templates/angular/src/app/app.component.ts

@@ -1,23 +1,24 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { JssContextService } from './jss-context.service';
 import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  /* eslint-disable-next-line @angular-eslint/prefer-standalone */
+  standalone: false,
 })
-export class AppComponent implements OnDestroy {
+export class AppComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
+  private translate = inject(TranslateService);
+  private jssContextService = inject(JssContextService);
 
-  constructor(
-    translate: TranslateService,
-    jssContextService: JssContextService,
-  ) {
-    this.contextSubscription = jssContextService.state.subscribe(jssState => {
+  ngOnInit() {
+    this.contextSubscription = this.jssContextService.state.subscribe((jssState: { language: string }) => {
       // listen for language changes
       if (jssState.language) {
-        translate.use(jssState.language);
+        this.translate.use(jssState.language);
       }
     });
   }

package/dist/templates/angular/src/app/app.module.ts

@@ -13,6 +13,9 @@ import { JssMetaService } from './jss-meta.service';
 import { JssContextService } from './jss-context.service';
 
 @NgModule({
+  declarations: [
+    AppComponent,
+  ],
   imports: [
     HttpClientModule,
     GraphQLModule,
@@ -37,7 +40,6 @@ import { JssContextService } from './jss-context.service';
     // the Sitecore Experience Editor will not work correctly when a base tag is used.
     { provide: APP_BASE_HREF, useValue: '/' },
   ],
-  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

package/dist/templates/angular/src/app/app.server.module.ts

@@ -7,6 +7,8 @@ import { AppComponent } from './app.component';
 import { JssContextService } from './jss-context.service';
 import { JssContextServerSideService } from './jss-context.server-side.service';
 import { JssTranslationServerLoaderService } from './i18n/jss-translation-server-loader.service';
+import { JSS_SERVER_VIEWBAG } from './injection-tokens';
+import { ViewBag } from './ViewBag';
 
 @NgModule({
   imports: [
@@ -19,13 +21,10 @@ import { JssTranslationServerLoaderService } from './i18n/jss-translation-server
       loader: {
         provide: TranslateLoader,
         useFactory: (
-          ssrViewBag: {
-            [key: string]: unknown;
-            dictionary: { [key: string]: string };
-          },
+          ssrViewBag: ViewBag,
           transferState: TransferState
         ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
-        deps: ['JSS_SERVER_VIEWBAG', TransferState],
+        deps: [JSS_SERVER_VIEWBAG, TransferState],
       },
     }),
   ],