create-sitecore-jss 22.1.0-canary.9 → 22.2.0-canary.2

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -15,18 +15,15 @@
   },
   "scripts": {
     "ng": "ng",
-    "lint:yml": "ts-node ./scripts/lint-yml.ts",
-    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
+    "lint": "ng lint <%- appName %> --fix",
     "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 --serial build:client build:server",
-    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component",
+    "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: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 --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
+    "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",
@@ -48,66 +45,60 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "~16.2.10",
-    "@angular/common": "~16.2.10",
-    "@angular/compiler": "~16.2.10",
-    "@angular/core": "~16.2.10",
-    "@angular/forms": "~16.2.10",
-    "@angular/platform-browser": "~16.2.10",
-    "@angular/platform-browser-dynamic": "~16.2.10",
-    "@angular/platform-server": "~16.2.10",
-    "@angular/router": "~16.2.10",
+    "@angular/animations": "~17.3.11",
+    "@angular/common": "~17.3.11",
+    "@angular/compiler": "~17.3.11",
+    "@angular/core": "~17.3.11",
+    "@angular/forms": "~17.3.11",
+    "@angular/platform-browser": "~17.3.11",
+    "@angular/platform-browser-dynamic": "~17.3.11",
+    "@angular/platform-server": "~17.3.11",
+    "@angular/router": "~17.3.11",
     "@apollo/client": "^3.3.12",
-    "@ngx-translate/core": "~14.0.0",
-    "@ngx-translate/http-loader": "~7.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~22.1.0-canary",
-    "apollo-angular": "~5.0.2",
-    "bootstrap": "^5.3.1",
-    "core-js": "~3.32.1",
+    "@ngx-translate/core": "~15.0.0",
+    "@ngx-translate/http-loader": "~8.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "~22.2.0-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.1.0",
-    "zone.js": "~0.13.1"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.1",
-    "@angular-devkit/build-angular": "^16.2.10",
-    "@angular-eslint/builder": "^16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.3.1",
-    "@angular-eslint/template-parser": "^16.3.1",
-    "@angular/cli": "~16.2.10",
-    "@angular/compiler-cli": "~16.2.10",
-    "@angular/language-service": "~16.2.10",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
+    "@angular-builders/custom-webpack": "^17.0.2",
+    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular-eslint/builder": "^17.5.2",
+    "@angular-eslint/eslint-plugin": "^17.5.2",
+    "@angular-eslint/eslint-plugin-template": "^17.5.2",
+    "@angular-eslint/schematics": "^17.5.2",
+    "@angular-eslint/template-parser": "^17.5.2",
+    "@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",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "~12.7.9",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "body-parser": "~1.19.0",
+    "@types/node": "~20.14.10",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "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": "^7.22.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsdoc": "32.3.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",
@@ -120,8 +111,7 @@
     "move-cli": "^2.0.0",
     "npm-run-all": "~4.1.5",
     "protractor": "^7.0.0",
-    "ts-node": "~10.9.0",
-    "typescript": "~4.9.5",
-    "yaml-lint": "^1.2.4"
+    "ts-node": "~10.9.2",
+    "typescript": "~5.2.2"
   }
 }

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

@@ -1,28 +1,10 @@
 /*
-  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
+  When the app runs in connected mode, 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 port = 3043;
-
-const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ? [
-  {
-    context: ['/data', '/sitecore'],
-    target: `http://localhost:${port}`,
-    secure: false,
-  },
-] : [
+const PROXY_CONFIG = [
   {
     context: [
       // API endpoints
@@ -30,12 +12,12 @@ const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ?
       // 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,8 +1,4 @@
 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
@@ -11,30 +7,15 @@ const chalk = require('chalk');
   and the global config module.
 */
 
-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."))
-}
+/*
+   PLUGINS GENERATION
+*/
+require('./generate-plugins');
 
 /*
   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.
 */
-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');
+require('./generate-config');
 
 /*
   COMPONENT FACTORY GENERATION

package/dist/templates/angular/scripts/config/index.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugins = require('scripts/temp/config-plugins');
+import { JssConfig } from 'lib/config';
+
+export interface ConfigPlugin {
+  /**
+   * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
+   */
+  order: number;
+  /**
+   * A function which will be called during config generation
+   * @param {JssConfig} config Current (accumulated) config
+   */
+  exec(config: JssConfig): Promise<JssConfig>;
+}
+
+export class JssConfigFactory {
+  public async create(defaultConfig: JssConfig = {}): Promise<JssConfig> {
+    return (Object.values(plugins) as ConfigPlugin[])
+      .sort((p1, p2) => p1.order - p2.order)
+      .reduce(
+        (promise, plugin) => promise.then((config) => plugin.exec(config)),
+        Promise.resolve(defaultConfig)
+      );
+  }
+}
+
+export const jssConfigFactory = new JssConfigFactory();

package/dist/templates/angular/scripts/config/plugins/computed.ts

@@ -0,0 +1,21 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set computed config props.
+ * The "graphQLEndpoint" is an example of making a _computed_ config setting
+ * based on other config settings.
+ */
+class ComputedPlugin implements ConfigPlugin {
+  // should come after other plugins (but before fallback)
+  order = 10;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      graphQLEndpoint:
+        config.graphQLEndpoint || `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
+    });
+  }
+}
+
+export const computedPlugin = new ComputedPlugin();

package/dist/templates/angular/scripts/config/plugins/fallback.ts

@@ -0,0 +1,23 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This config will set fallback values for properties that were left empty
+ * If neither env, nor other places had a proper value, this will ensure a fallback is set
+ */
+class FallbackPlugin implements ConfigPlugin {
+  // should always come last
+  order = 100;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      defaultLanguage: config.defaultLanguage || 'en',
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
+      <% if (!locals.xmcloud) { -%>
+      layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
+      <% } -%>
+    });
+  }
+}
+
+export const fallbackPlugin = new FallbackPlugin();

package/dist/templates/angular/scripts/config/plugins/package-json.ts

@@ -0,0 +1,22 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import packageConfig from 'package.json';
+
+/**
+ * This plugin will set config props based on package.json.
+ */
+class PackageJsonPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    if (!packageConfig.config) return config;
+
+    return Object.assign({}, config, {
+      sitecoreSiteName: config.sitecoreSiteName || packageConfig.config.appName,
+      graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
+      defaultLanguage: config.defaultLanguage || packageConfig.config.language,
+    });
+  }
+}
+
+export const packageJsonPlugin = new PackageJsonPlugin();

package/dist/templates/angular/scripts/config/plugins/scjssconfig.ts

@@ -0,0 +1,29 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set config props based on scjssconfig.json.
+ * scjssconfig.json may not exist if you've never run `jss setup` (development)
+ * or are depending on environment variables instead (production).
+ */
+class ScJssConfigPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    let scJssConfig;
+    try {
+      scJssConfig = require('scjssconfig.json');
+    } catch (e) {
+      return config;
+    }
+
+    if (!scJssConfig) return config;
+
+    return Object.assign({}, config, {
+      sitecoreApiKey: config.sitecoreApiKey || scJssConfig.sitecore?.apiKey,
+      sitecoreApiHost: config.sitecoreApiHost || scJssConfig.sitecore?.layoutServiceHost,
+    });
+  }
+}
+
+export const scjssconfigPlugin = new ScJssConfigPlugin();

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

@@ -1,7 +1,8 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
-const packageConfig = require('../package.json');
+import { jssConfigFactory } from './config';
+import { JssConfig } from 'lib/config';
 
 /**
  * Generate config
@@ -10,91 +11,70 @@ const packageConfig = require('../package.json');
  * 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',
-  };
 
-  if (!outputPath) {
-    outputPath = 'src/environments/environment.js';
-  }
+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: '/',
+};
 
-  // require + combine config sources
-  const scjssConfig = transformScJssConfig();
-  const packageJson = transformPackageConfig();
+generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
+generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
 
-  // 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);
+/**
+ * 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);
+    });
+}
 
-  // 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}`';
+/**
+ * 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';
+  }
 
   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`;
-  });
-  // 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 += `config.${prop} = process.env.${constantCase(prop)} || "${config[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/generate-plugins.ts

@@ -0,0 +1,28 @@
+import {
+  generatePlugins,
+  ModuleType,
+  PluginDefinition,
+} from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/*
+  PLUGINS GENERATION
+  NOTE: pluginName: the name of the plugin in the src/lib folder
+  Generates the `/src/temp/{pluginName}-plugins.ts` file, which exports list of plugins
+
+  Generating the plugins is optional, and it can be maintained manually if preferred.
+
+  The default convention uses the plugin's filename (without the extension) as the first part of the component
+  name. For example, the file `/lib/page-props-factory/plugins/exampleName.ts` would map to plugin `exampleNamePlugin`.
+*/
+
+const pluginDefinitions: PluginDefinition[] = [
+  {
+    distPath: 'scripts/temp/config-plugins.ts',
+    rootPath: 'scripts/config/plugins',
+    moduleType: ModuleType.ESM,
+  },
+];
+
+pluginDefinitions.forEach((definition) => {
+  generatePlugins(definition);
+});

package/dist/templates/angular/scripts/temp/gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

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();
+generateConfig('src/environments/environment.js');
 
 let jssConfig;
 
@@ -47,7 +47,9 @@ 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

@@ -2,10 +2,13 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import 'reflect-metadata';
-import 'zone.js/dist/zone-node';
+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';
 
@@ -99,5 +102,20 @@ 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 };
+export {
+  renderView,
+  parseRouteUrl,
+  setUpDefaultAgents,
+  apiKey,
+  siteName,
+  clientFactory,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+  defaultLanguage,
+  graphQLEndpointPath,
+  graphQLEndpoint,
+};

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

@@ -10,7 +10,6 @@ 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({
@@ -31,7 +30,6 @@ 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.