create-sitecore-jss 22.2.0-canary.9 → 22.2.1-canary.1

package/dist/initializers/react/index.js

@@ -52,7 +52,7 @@ class ReactInitializer {
             yield (0, common_1.transform)(templatePath, mergedArgs);
             const isDev = (0, common_1.isDevEnvironment)(args.destination);
             const pkgPath = path_1.default.resolve(`${args.destination}${path_1.sep}package.json`);
-            const pkg = (0, common_1.openJsonFile)(pkgPath);
+            const pkg = (0, common_1.openPackageJson)(pkgPath);
             if (isDev) {
                 Object.entries(pkg.scripts).forEach(([key, value]) => {
                     // Can't rewire `eject` script
@@ -61,14 +61,14 @@ class ReactInitializer {
                     // It's required to start each command using `react-app-rewired`, to solve duplicate `react` issue
                     pkg.scripts[key] = value.replace('react-scripts', 'react-app-rewired');
                 });
-                (0, common_1.writeJsonFile)(pkg, pkgPath);
+                (0, common_1.writePackageJson)(pkg, pkgPath);
             }
             else {
                 // Don't need to rewire anything if we are not in the dev env
                 delete pkg.devDependencies['react-app-rewired'];
                 // Remove webpack overrides
                 (0, common_1.removeFile)(path_1.default.resolve(`${args.destination}${path_1.sep}config-overrides.js`));
-                (0, common_1.writeJsonFile)(pkg, pkgPath);
+                (0, common_1.writePackageJson)(pkg, pkgPath);
             }
             const response = {
                 nextSteps: [`* Connect to Sitecore with ${chalk_1.default.green('jss setup')} (optional)`],

package/dist/initializers/react/prompts.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prompts = void 0;
 const common_1 = require("../../common");
-exports.prompts = [...common_1.clientAppPrompts, ...common_1.sxpPrompts, ...common_1.styleguidePrompts];
+exports.prompts = [...common_1.clientAppPrompts, ...common_1.styleguidePrompts];

package/dist/initializers/react-native/prompts.js

@@ -4,6 +4,5 @@ exports.prompts = void 0;
 const common_1 = require("../../common");
 exports.prompts = [
     ...common_1.clientAppPrompts.filter((p) => p.name !== 'fetchWith'),
-    ...common_1.sxpPrompts,
     ...common_1.styleguidePrompts,
 ];

package/dist/initializers/vue/prompts.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prompts = void 0;
 const common_1 = require("../../common");
-exports.prompts = [...common_1.clientAppPrompts, ...common_1.sxpPrompts, ...common_1.styleguidePrompts];
+exports.prompts = [...common_1.clientAppPrompts, ...common_1.styleguidePrompts];

package/dist/templates/angular/.env

@@ -21,14 +21,12 @@ GRAPH_QL_ENDPOINT=
 # Uses your `package.json` config `appName` if empty.
 SITECORE_SITE_NAME=
 
-<% if (!locals.xmcloud) { -%>
-# The way in which layout and dictionary data is fetched from Sitecore
-FETCH_WITH=<%- fetchWith %>
-<% } -%>
-
 # Your default app language.
 DEFAULT_LANGUAGE=
 
+# The way in which layout and dictionary data is fetched from Sitecore
+FETCH_WITH=<%- fetchWith %>
+
 # Sitecore JSS npm packages utilize the debug module for debug logging.
 # https://www.npmjs.com/package/debug
 # Set the DEBUG environment variable to 'sitecore-jss:*' to see all logs:

package/dist/templates/angular/README.md

@@ -3,11 +3,51 @@
 <!---
 @TODO: Update to next version docs before release
 -->
-
 [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-angular.html)
 
-<!---
-@TODO: Verify the link for angular xmcloud when documentation is ready
--->
 
-[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-angular.html)
+## App setup
+
+1. `npm install`
+1. `npm install -g @sitecore-jss/sitecore-jss-cli`
+1. `jss setup`
+
+> This setup is optional to get started with development, as it assumes you have Sitecore installed.
+>
+> If you answer "yes", you would need to provide the path to your Sitecore installation's "Website" folder.
+
+## Development server
+
+Run `jss start`.
+
+The app will be built and webpack server will be started. So it's expected that the browser will open with `http://localhost:3000` and familiar default welcome content is rendered.
+
+The app will automatically reload if you change any of the source files.
+
+When running the development server, it automatically sets up a sitecore mock server configures a proxy that forwards all requests to `/sitecore` to that sitecore mock server. Check `proxy.conf.js` to see mock server and proxy implementation.
+
+### Congratulations!
+
+The app is now running in dev mode sourcing data from local files and is not connected to Sitecore in any way.
+
+## App deployment
+
+### Pre-requisites
+
+1. Sitecore instance has JSS packages installed.
+1. Sitecore is configured for this JSS app.
+
+### Steps
+
+Run `jss deploy package`.
+
+This step will:
+
+* Run the production bundle of your app.
+* Generate the app manifest.
+* Generate a package with the manifest and production bundle.
+* Install the package over HTTP on your Sitecore instance.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/dist/templates/angular/angular.json

@@ -49,7 +49,12 @@
               ],
               "baseHref": "/",
               "aot": true,
-              "optimization": true,
+              "//": [
+                "You might want to adjust the optimization entry to workaround a bug with bootstrap warnings caused by Angular",
+                "The warnings may occur during build and when running connected mode. Check below for possible fixes.",
+                "https://github.com/ng-bootstrap/ng-bootstrap/issues/4306"
+              ],
+              "optimization": "true",
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.2.1-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -15,15 +15,18 @@
   },
   "scripts": {
     "ng": "ng",
-    "lint": "ng lint <%- appName %> --fix",
+    "lint:yml": "ts-node ./scripts/lint-yml.ts",
+    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
     "e2e": "ng e2e",
     "jss": "jss",
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
     "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",
+    "build": "npm-run-all --serial bootstrap --serial build:client build:server",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component",
     "start:angular": "ng serve -o",
+    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
     "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory.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:client": "cross-env-shell ng build --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",
@@ -57,12 +60,13 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~15.0.0",
     "@ngx-translate/http-loader": "~8.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-angular": "~22.2.1-canary",
     "apollo-angular": "~6.0.0",
     "bootstrap": "^5.3.3",
     "core-js": "~3.37.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
+    "lodash": "^4.17.21",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "~0.14.7"
@@ -78,27 +82,32 @@
     "@angular/cli": "~17.3.8",
     "@angular/compiler-cli": "~17.3.11",
     "@angular/language-service": "~17.3.11",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.1-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.1-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.1-canary",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "~20.14.10",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
+    "body-parser": "~1.20.2",
     "chalk": "~4.1.0",
     "chokidar": "^3.5.2",
     "codelyzer": "~6.0.1",
     "constant-case": "^3.0.4",
+    "cookie-parser": "~1.4.5",
     "cross-env": "~7.0.3",
     "del-cli": "^5.0.0",
     "dotenv": "^16.0.0",
     "dotenv-webpack": "^7.1.0",
+    "enhanced-resolve": "5.7.0",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
+    "express": "~4.17.1",
+    "fs-extra": "~9.1.0",
     "isomorphic-fetch": "^3.0.0",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
@@ -112,6 +121,7 @@
     "npm-run-all": "~4.1.5",
     "protractor": "^7.0.0",
     "ts-node": "~10.9.2",
-    "typescript": "~5.2.2"
+    "typescript": "~5.2.2",
+    "yaml-lint": "^1.2.4"
   }
 }

package/dist/templates/angular/proxy.conf.js

@@ -1,10 +1,28 @@
 /*
-  When the app runs in connected mode, some of the requests should be
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  When the app runs in connected mode, Sitecore is present and some of the requests should be
   proxied to the Sitecore API
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling angular-cli to proxy requests to the API paths to this express instance.
+
+  See /scripts/disconnected-mode-proxy.ts for the proxy API server configuration.
 */
+const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
 const environment = require('./src/environments/environment.js').environment;
 
-const PROXY_CONFIG = [
+const port = 3043;
+
+const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ? [
+  {
+    context: ['/data', '/sitecore'],
+    target: `http://localhost:${port}`,
+    secure: false,
+  },
+] : [
   {
     context: [
       // API endpoints
@@ -12,12 +30,12 @@ const PROXY_CONFIG = [
       // media items
       '/-',
       // visitor identification
-      '/layouts',
+      '/layouts'
     ],
     target: environment.sitecoreApiHost,
     secure: false,
-    changeOrigin: true,
-  },
+    changeOrigin: true
+  }
 ];
 
 module.exports = PROXY_CONFIG;

package/dist/templates/angular/scripts/bootstrap.ts

@@ -1,4 +1,8 @@
 import 'dotenv/config';
+import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { generateConfig } from './generate-config';
+const projects = require('../angular.json').projects;
+const chalk = require('chalk');
 
 /*
   BOOTSTRAPPING
@@ -7,15 +11,30 @@ import 'dotenv/config';
   and the global config module.
 */
 
-/*
-   PLUGINS GENERATION
-*/
-require('./generate-plugins');
+const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+
+if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
+  throw new Error(chalk.red("GraphQL requests to Dictionary and Layout services are not supported in disconnected mode."))
+}
 
 /*
   CONFIG GENERATION
+  Generates the /src/environments/environment.js file which contains runtime configuration
+  that the app can import and use.
+
+  This is generated rather than using Angular environments because of the need to set config params
+  based on build arguments, which env files don't directly allow.
 */
-require('./generate-config');
+function writeConfig(configOverride: { production: boolean, sitecoreApiHost?: string }, outputPath?: string) {
+  if (disconnected) {
+    configOverride.sitecoreApiHost = `http://localhost:${projects['<%- appName %>'].architect.serve.options.port}`;
+  }
+
+  generateConfig(configOverride, outputPath);
+}
+
+writeConfig({ production: false });
+writeConfig({ production: true }, 'src/environments/environment.prod.js');
 
 /*
   COMPONENT FACTORY GENERATION

package/dist/templates/angular/scripts/generate-config.ts

@@ -1,8 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
-import { jssConfigFactory } from './config';
-import { JssConfig } from 'lib/config';
+const packageConfig = require('../package.json');
 
 /**
  * Generate config
@@ -11,70 +10,91 @@ import { JssConfig } from 'lib/config';
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
+export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
+  const defaultConfig = {
+    production: false,
+    sitecoreApiHost: '',
+    sitecoreApiKey: 'no-api-key-set',
+    sitecoreSiteName: process.env.SITECORE_SITE_NAME,
+    sitecoreLayoutServiceConfig: 'jss',
+    defaultLanguage: 'en',
+    defaultServerRoute: '/',
+    layoutServiceConfigurationName: 'default',
+  };
 
-const defaultConfigValue: JssConfig = {
-  production: false,
-  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
-  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
-  sitecoreSiteName: process.env[`${constantCase('sitecoreSiteName')}`],
-  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
-  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
-  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
-  defaultServerRoute: '/',
-};
-
-generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
-generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
-
-/**
- * Generates the JSS config based on config plugins (under ./config/plugins)
- * and then writes the config to disk.
- * @param {string} outputPath the output path of the generated config.
- * @param {JssConfig} [defaultConfig] Default configuration.
- * @param {[key: string]:unknown} [configOverrides] configuration values that override the generated ones.
- */
-export function generateConfig(
-  outputPath: string,
-  defaultConfig: JssConfig = defaultConfigValue,
-  configOverrides?: { [key: string]: unknown }
-) {
-  jssConfigFactory
-    .create(defaultConfig)
-    .then((config) => {
-      writeConfig(Object.assign(config, configOverrides), outputPath);
-    })
-    .catch((e) => {
-      console.error('Error generating config');
-      console.error(e);
-      process.exit(1);
-    });
-}
-
-/**
- * Writes the config object to disk with support for environment variables.
- * @param {JssConfig} config JSS configuration to write.
- * @param {string} outputPath the outputh path of the generated config.
- */
-export function writeConfig(config: JssConfig, outputPath?: string) {
   if (!outputPath) {
     outputPath = 'src/environments/environment.js';
   }
 
+  // require + combine config sources
+  const scjssConfig = transformScJssConfig();
+  const packageJson = transformPackageConfig();
+
+  // optional:
+  // do any other dynamic config source (e.g. environment-specific config files)
+  // Object.assign merges the objects in order, so the
+  // package.json config can override the calculated config,
+  // scjssconfig.json overrides it,
+  // and finally config passed in the configOverrides param wins.
+  const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
+
+  // The GraphQL endpoint is an example of making a _computed_ config setting
+  // based on other config settings.
+  const computedConfig: { [key: string]: string } = {};
+  computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
+
   let configText = `/* eslint-disable */
-  // Do not edit this file, it is auto-generated at build time!
-  // See scripts/bootstrap.ts to modify the generation of this file.
-  const config = {};\n`;
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/bootstrap.ts to modify the generation of this file.
+const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]
-      ?.toString()
-      .trim()}";\n`;
+    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]?.toString().trim()}";\n`;
+  });
+  // Set computed values, allowing override with environment variables
+  Object.keys(computedConfig).forEach((prop) => {
+    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
+      computedConfig[prop]?.toString().trim()
+    };\n`;
   });
-
   configText += `module.exports.environment = config;`;
 
   const configPath = path.resolve(outputPath);
   console.log(`Writing runtime config to ${configPath}`);
   fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
 }
+
+function transformScJssConfig() {
+  // scjssconfig.json may not exist if you've never run setup
+  // so if it doesn't we substitute a fake object
+  let config;
+  try {
+    config = require('../scjssconfig.json');
+  } catch (e) {
+    return {};
+  }
+
+  if (!config) {
+    return {};
+  }
+
+  return {
+    sitecoreApiKey: config.sitecore.apiKey,
+    sitecoreApiHost: config.sitecore.layoutServiceHost,
+  };
+}
+
+function transformPackageConfig() {
+  const packageAny = packageConfig;
+
+  if (!packageAny.config) {
+    return {};
+  }
+
+  return {
+    sitecoreSiteName: packageAny.config.appName,
+    defaultLanguage: packageAny.config.language || 'en',
+    graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
+  };
+}

package/dist/templates/angular/scripts/update-graphql-fragment-data.ts

@@ -9,7 +9,7 @@ import { generateConfig } from './generate-config';
 //
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-generateConfig('src/environments/environment.js');
+generateConfig();
 
 let jssConfig;
 
@@ -47,9 +47,7 @@ fetch(jssConfig.graphQLEndpoint, {
   .then((result) => result.json())
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter(
-      (type: { possibleTypes: Array<string> }) => type.possibleTypes !== null
-    );
+    const filteredData = result.data.__schema.types.filter((type: { possibleTypes: Array<string>; }) => type.possibleTypes !== null);
 
     const filteredResult = { ...result };
     filteredResult.data.__schema.types = filteredData;

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

@@ -6,9 +6,6 @@ import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';
-import { clientFactory } from './src/app/lib/graphql-client-factory';
-import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
-import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
 
 export * from './src/main.server';
 
@@ -102,20 +99,5 @@ function parseRouteUrl(url: string) {
 
 const apiKey = environment.sitecoreApiKey;
 const siteName = environment.sitecoreSiteName;
-const defaultLanguage = environment.defaultLanguage;
-const graphQLEndpointPath = environment.graphQLEndpointPath;
-const graphQLEndpoint = environment.graphQLEndpoint;
 
-export {
-  renderView,
-  parseRouteUrl,
-  setUpDefaultAgents,
-  apiKey,
-  siteName,
-  clientFactory,
-  dictionaryServiceFactory,
-  layoutServiceFactory,
-  defaultLanguage,
-  graphQLEndpointPath,
-  graphQLEndpoint,
-};
+export { renderView, parseRouteUrl, setUpDefaultAgents, apiKey, siteName };

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

@@ -10,6 +10,7 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { JssTranslationClientLoaderService } from './i18n/jss-translation-client-loader.service';
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
+import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssMetaService } from './jss-meta.service';
 
 @NgModule({
@@ -30,6 +31,7 @@ import { JssMetaService } from './jss-meta.service';
     // The token is needed in cases when multiple applications are bootstrapped on a page
     { provide: APP_ID, useValue: 'my-app' },
     JssContextService,
+    JssDataFetcherService,
     JssLayoutService,
     JssMetaService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.

package/dist/templates/angular/src/app/components/app-components.shared.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
+import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /*
@@ -13,8 +14,22 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
-  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
-  declarations: [],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    JssModule,
+    FormsModule,
+  ],
+  exports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
+  declarations: [
+    StyleguideSpecimenComponent
+  ],
 })
-export class AppComponentsSharedModule {}
+export class AppComponentsSharedModule { }

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -2,6 +2,7 @@ import { Injectable, Inject, TransferState } from '@angular/core';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
+import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssLayoutService } from './layout/jss-layout.service';
 
 /**
@@ -14,6 +15,7 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
+    protected dataFetcher: JssDataFetcherService,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {

package/dist/templates/{angular-sxp → angular}/src/app/jss-data-fetcher.service.ts

@@ -3,9 +3,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable, lastValueFrom } from 'rxjs';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class JssDataFetcherService {
   constructor(
     private readonly httpClient: HttpClient,

package/dist/templates/angular/src/app/lib/dictionary-service-factory.ts

@@ -1,38 +1,30 @@
 import {
   DictionaryService,
   GraphQLDictionaryService,
-  <% if (!locals.xmcloud) { -%>
   RestDictionaryService,
   constants,
-  <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    const service =
-    <% if (!locals.xmcloud) { -%>
-     process.env.FETCH_WITH === constants.FETCH_WITH.REST
-      ? new RestDictionaryService({
-          apiHost: env.sitecoreApiHost,
-          apiKey: env.sitecoreApiKey,
-          siteName: env.sitecoreSiteName,
-        })
-      : 
-    <% } -%>
-      new GraphQLDictionaryService({
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
+      ? new GraphQLDictionaryService({
           clientFactory,
           siteName: env.sitecoreSiteName,
           /*
-        The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
-        app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
-        otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-        rootItemId: '{GUID}'
-      */
+            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
+            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+            rootItemId: '{GUID}'
+          */
+        })
+      : new RestDictionaryService({
+          apiHost: env.sitecoreApiHost,
+          apiKey: env.sitecoreApiKey,
+          siteName: env.sitecoreSiteName,
         });
-
-    return service;
   }
 }