create-sitecore-jss 22.2.0-canary.7 → 22.2.0-canary.71

package/dist/bin.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.main = exports.promptDestination = exports.getDestinations = exports.parseArgs = void 0;
+exports.main = exports.promptDestination = exports.getDestination = exports.parseArgs = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importStar(require("path"));
 const chalk_1 = __importDefault(require("chalk"));
@@ -43,7 +43,6 @@ const inquirer_1 = __importDefault(require("inquirer"));
 const init_runner_1 = require("./init-runner");
 const minimist_1 = __importDefault(require("minimist"));
 const common_1 = require("./common");
-const helpers_1 = require("./common/utils/helpers");
 const parseArgs = () => {
     // parse any command line arguments passed into `init sitecore-jss`
     // to pass to the generator prompts and skip them.
@@ -71,7 +70,7 @@ const parseArgs = () => {
     return args;
 };
 exports.parseArgs = parseArgs;
-const getDestinations = (args, templates) => __awaiter(void 0, void 0, void 0, function* () {
+const getDestination = (args, templates) => __awaiter(void 0, void 0, void 0, function* () {
     if (templates.length === 0) {
         throw new Error('Unable to get destinations, provided templates are empty');
     }
@@ -83,30 +82,9 @@ const getDestinations = (args, templates) => __awaiter(void 0, void 0, void 0, f
             ? defaultBaseDestination
             : yield (0, exports.promptDestination)('Where would you like your new app created?', defaultBaseDestination);
     }
-    // work with node-proxy destination if needed
-    const proxyApp = templates.find((template) => template.match(helpers_1.proxyAppMatcher));
-    if (proxyApp) {
-        // put the proxy alongside main app by default
-        const defaultProxyDestination = (0, helpers_1.getDefaultProxyDestination)(destination, proxyApp);
-        let proxyAppDestination = args.proxyAppDestination;
-        if (!proxyAppDestination) {
-            proxyAppDestination = args.yes
-                ? defaultProxyDestination
-                : yield (0, exports.promptDestination)('Where would you like your proxy app created?', defaultProxyDestination);
-        }
-        while (path_1.default.resolve(proxyAppDestination) === path_1.default.resolve(destination)) {
-            proxyAppDestination = yield (0, exports.promptDestination)('Proxy app and base app cannot be located in the same folder. Please input another path for proxy', defaultProxyDestination);
-        }
-        return {
-            destination,
-            proxyAppDestination,
-        };
-    }
-    return {
-        destination,
-    };
+    return destination;
 });
-exports.getDestinations = getDestinations;
+exports.getDestination = getDestination;
 const promptDestination = (prompt, defaultDestination) => __awaiter(void 0, void 0, void 0, function* () {
     return (yield inquirer_1.default.prompt({
         type: 'input',
@@ -153,24 +131,20 @@ const main = (args) => __awaiter(void 0, void 0, void 0, function* () {
         });
         templates.push(answer.template);
     }
-    const destinations = yield (0, exports.getDestinations)(args, templates);
-    for (const destination of [destinations.destination, destinations.proxyAppDestination]) {
-        if (!destination)
-            continue;
-        if (!args.force && fs_1.default.existsSync(destination) && fs_1.default.readdirSync(destination).length > 0) {
-            const answer = yield inquirer_1.default.prompt({
-                type: 'confirm',
-                name: 'continue',
-                message: `Directory '${destination}' not empty. Are you sure you want to continue?`,
-            });
-            if (!answer.continue) {
-                process.exit();
-            }
-        }
-        else {
-            args.force = true;
+    const destination = yield (0, exports.getDestination)(args, templates);
+    if (!args.force && fs_1.default.existsSync(destination) && fs_1.default.readdirSync(destination).length > 0) {
+        const answer = yield inquirer_1.default.prompt({
+            type: 'confirm',
+            name: 'continue',
+            message: `Directory '${destination}' not empty. Are you sure you want to continue?`,
+        });
+        if (!answer.continue) {
+            process.exit();
         }
     }
+    else {
+        args.force = true;
+    }
     if (!args.yes) {
         if (args.prePushHook === null) {
             const answer = yield inquirer_1.default.prompt({
@@ -188,7 +162,7 @@ const main = (args) => __awaiter(void 0, void 0, void 0, function* () {
         }
     }
     try {
-        yield (0, init_runner_1.initRunner)(templates.slice(), Object.assign(Object.assign(Object.assign({}, args), destinations), { templates }));
+        yield (0, init_runner_1.initRunner)(templates.slice(), Object.assign(Object.assign({}, args), { destination, templates }));
     }
     catch (error) {
         console.log(chalk_1.default.red('An error occurred: ', error));

package/dist/common/processes/next.js

@@ -20,6 +20,9 @@ const chalk_1 = __importDefault(require("chalk"));
  * @param {string[]} nextStepsArr next steps to be performed after app is created
  */
 const nextSteps = (appNames, nextStepsArr) => __awaiter(void 0, void 0, void 0, function* () {
+    const successMessage = appNames.length > 1
+        ? `JSS applications ${chalk_1.default.green(appNames.join(', '))} are ready!`
+        : `JSS application ${chalk_1.default.green(appNames[0])} is ready!`;
     console.log(chalk_1.default.red('                 -/oyhdmNNNNmdhyo/-                '));
     console.log(chalk_1.default.red('             :sdMMMMMMMMMMMMMMMMMMMMds:            '));
     console.log(chalk_1.default.red('          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy:         '));
@@ -51,7 +54,7 @@ const nextSteps = (appNames, nextStepsArr) => __awaiter(void 0, void 0, void 0,
     console.log(chalk_1.default.white('                 / // /\\ \\_\\ \\  '));
     console.log(chalk_1.default.white('                 \\___/___/___/'));
     console.log();
-    console.log(`JSS application(s) ${chalk_1.default.green(appNames.join(', '))} is ready!`);
+    console.log(successMessage);
     console.log();
     console.log(chalk_1.default.yellow('Next steps:'));
     nextStepsArr.forEach((step) => {

package/dist/common/processes/transform.js

@@ -187,11 +187,6 @@ const populateEjsData = (answers, destination) => {
             getPascalCaseName: helpers_1.getPascalCaseName,
             getAppPrefix: helpers_1.getAppPrefix,
         } });
-    // When SPA application and XM Cloud proxy is used we need to calculate relative path between SPA app and proxy to apply that in EJS template
-    // Absolute path can't be used across all the machines
-    if (answers.proxyAppDestination) {
-        ejsData.helper.relativeProxyAppDestination = `${path_1.default.relative(path_1.default.resolve(answers.destination), path_1.default.resolve(answers.proxyAppDestination))}${path_1.sep}`;
-    }
     return ejsData;
 };
 exports.populateEjsData = populateEjsData;
@@ -209,16 +204,11 @@ exports.populateEjsData = populateEjsData;
  */
 const transform = (templatePath, answers, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
     const { isFileForCopy, isFileForSkip, fileForCopyRegExp = FILE_FOR_COPY_REGEXP } = options;
-    let destination = undefined;
-    // allow proxy app to be installed separately alongside base app
-    if (templatePath.match(/.*node-.+-proxy$/g) && answers.proxyAppDestination) {
-        destination = answers.proxyAppDestination;
-    }
-    const destinationPath = path_1.default.resolve(destination || answers.destination);
+    const destinationPath = path_1.default.resolve(answers.destination);
     if (!answers.appPrefix) {
         answers.appPrefix = false;
     }
-    const ejsData = (0, exports.populateEjsData)(answers, destination);
+    const ejsData = (0, exports.populateEjsData)(answers);
     // the templates to be run through ejs render or copied directly
     const files = glob_1.default.sync('**/*', { cwd: templatePath, dot: true, nodir: true });
     for (const file of files) {

package/dist/common/prompts/base.js

@@ -38,19 +38,6 @@ exports.clientAppPrompts = [
             return !answers.appName;
         },
     },
-    {
-        type: 'list',
-        name: 'fetchWith',
-        message: 'How would you like to fetch Layout and Dictionary data?',
-        choices: Object.values(FetchWith),
-        default: exports.DEFAULT_FETCHWITH,
-        when: (answers) => {
-            if (answers.yes && !answers.fetchWith) {
-                answers.fetchWith = exports.DEFAULT_FETCHWITH;
-            }
-            return !answers.fetchWith;
-        },
-    },
 ];
 const missingAddonMsg = (source, missingAddon) => chalk_1.default.yellow(`Warning: ${source} add-on cannot be used without the ${missingAddon} add-on. This may cause unexpected results.`);
 exports.missingAddonMsg = missingAddonMsg;

package/dist/common/prompts/proxy.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.proxyPrompts = exports.FALLBACK_PROXYNAME = void 0;
+const helpers_1 = require("../utils/helpers");
+const path_1 = __importDefault(require("path"));
+exports.FALLBACK_PROXYNAME = 'sitecore-jss-proxy-app';
+/**
+ * Set of CLI prompts for an SXP app
+ */
+exports.proxyPrompts = [
+    {
+        type: 'input',
+        name: 'proxyAppDestination',
+        message: 'Where would you like your proxy app created?',
+        default: (answers) => {
+            // default proxy destination should be under same root as main app
+            return (0, helpers_1.getDefaultProxyDestination)(answers.destination, answers.proxyName || exports.FALLBACK_PROXYNAME);
+        },
+        when: (answers) => {
+            if (answers.yes && !answers.proxyAppDestination) {
+                answers.proxyAppDestination = (0, helpers_1.getDefaultProxyDestination)(answers.destination, answers.proxyName || exports.FALLBACK_PROXYNAME);
+            }
+            return !answers.proxyAppDestination;
+        },
+        validate: (input, answers) => {
+            if (path_1.default.resolve(input) === path_1.default.resolve(answers.destination)) {
+                return 'Paths for main app and proxy cannot match. Please choose another destination';
+            }
+            return true;
+        },
+    },
+];

package/dist/common/prompts/sxp.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sxpPrompts = void 0;
+const base_1 = require("./base");
 /**
  * Set of CLI prompts for an SXP app
  */
@@ -9,12 +10,25 @@ exports.sxpPrompts = [
         type: 'input',
         name: 'hostName',
         message: 'What is your Sitecore hostname (used if deployed to Sitecore)?',
-        default: (answers) => `${answers.appName}.dev.local`,
+        default: (answers) => `${answers.appName || base_1.DEFAULT_APPNAME}.dev.local`,
         when: (answers) => {
             if (answers.yes && !answers.hostName) {
-                answers.hostName = `${answers.appName}.dev.local`;
+                answers.hostName = `${answers.appName || base_1.DEFAULT_APPNAME}.dev.local`;
             }
             return !answers.hostName;
         },
     },
+    {
+        type: 'list',
+        name: 'fetchWith',
+        message: 'How would you like to fetch Layout and Dictionary data?',
+        choices: Object.values(base_1.FetchWith),
+        default: base_1.DEFAULT_FETCHWITH,
+        when: (answers) => {
+            if (answers.yes && !answers.fetchWith) {
+                answers.fetchWith = base_1.DEFAULT_FETCHWITH;
+            }
+            return !answers.fetchWith;
+        },
+    },
 ];

package/dist/common/utils/helpers.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,10 +35,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeFile = exports.writeFileToPath = exports.getAppPrefix = exports.getBaseTemplates = exports.getAllTemplates = exports.sortKeys = exports.saveConfiguration = exports.writeJsonFile = exports.openJsonFile = exports.getPascalCaseName = exports.isDevEnvironment = exports.getDefaultProxyDestination = exports.proxyAppMatcher = void 0;
+exports.removeFile = exports.writeFileToPath = exports.getAppPrefix = exports.getBaseTemplates = exports.getAllTemplates = exports.sortKeys = exports.saveConfiguration = exports.writeJsonFile = exports.openJsonFile = exports.getPascalCaseName = exports.isDevEnvironment = exports.getRelativeProxyDestination = exports.getDefaultProxyDestination = exports.proxyAppMatcher = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const path_1 = __importStar(require("path"));
 const InitializerFactory_1 = require("../../InitializerFactory");
 // matched for proxy templates
 exports.proxyAppMatcher = /node-headless.+|node-xmcloud.+/g;
@@ -27,6 +50,8 @@ exports.proxyAppMatcher = /node-headless.+|node-xmcloud.+/g;
  */
 const getDefaultProxyDestination = (mainAppDestination, proxyName) => path_1.default.join(mainAppDestination, '..', proxyName);
 exports.getDefaultProxyDestination = getDefaultProxyDestination;
+const getRelativeProxyDestination = (mainDestination, proxyDestination) => `${path_1.default.relative(path_1.default.resolve(mainDestination), path_1.default.resolve(proxyDestination))}${path_1.sep}`;
+exports.getRelativeProxyDestination = getRelativeProxyDestination;
 /**
  * Determines whether you are in a dev environment.
  * It's `true` if you are inside the monorepo

package/dist/init-runner.js

@@ -53,7 +53,7 @@ const initRunner = (initializers, args) => __awaiter(void 0, void 0, void 0, fun
             }
             args.silent || console.log(chalk_1.default.cyan(`Initializing '${init}'...`));
             const response = yield initializer.init(args);
-            // App names can be multiple if the base template requires to setup additional standalone app (e.g. XM Cloud proxy)
+            // We can have multiple appNames if base template requires to setup an additional standalone app (e.g. XM Cloud proxy)
             appNames.add(response.appName);
             nextStepsArr = [...nextStepsArr, ...((_a = response.nextSteps) !== null && _a !== void 0 ? _a : [])];
             // process any returned initializers

package/dist/initializers/angular/prompts.js

@@ -11,14 +11,14 @@ exports.prompts = [
         default: false,
         when: (answers) => {
             // don't prompt if --yes or angular-xmcloud template was specified
-            if (answers.yes) {
-                return false;
-            }
-            else if (answers.templates.includes('angular-xmcloud') &&
+            if (answers.templates.includes('angular-xmcloud') &&
                 !answers.templates.includes('angular-sxp')) {
                 answers.xmcloud = true;
                 return false;
             }
+            if (answers.yes) {
+                return false;
+            }
             return true;
         },
     },

package/dist/initializers/angular-xmcloud/index.js

@@ -31,29 +31,43 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = __importStar(require("path"));
 const common_1 = require("../../common");
+const proxy_1 = require("../../common/prompts/proxy");
+const inquirer_1 = __importDefault(require("inquirer"));
 const helpers_1 = require("../../common/utils/helpers");
 class AngularXmCloudInitializer {
     get isBase() {
         return false;
     }
     init(args) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
             const pkg = (0, common_1.openJsonFile)(`${args.destination}${path_1.sep}package.json`);
             const addInitializers = [];
-            // when installing proxy alongside main app, have a separate path ready
-            if (!args.proxyAppDestination) {
-                args.proxyAppDestination = (0, helpers_1.getDefaultProxyDestination)(args.destination, 'node-xmcloud-proxy');
-            }
+            // angular-xmcloud requires node-xmcloud-proxy
             if (!args.templates.includes('node-xmcloud-proxy')) {
                 addInitializers.push('node-xmcloud-proxy');
             }
-            const mergedArgs = Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false });
+            // ensure args.proxyAppDestination is populated
+            const promptArgs = {
+                yes: args.yes,
+                destination: args.destination,
+                proxyName: 'node-xmcloud-proxy',
+                proxyAppDestination: args.proxyAppDestination,
+            };
+            const proxyDetails = yield inquirer_1.default.prompt(proxy_1.proxyPrompts, promptArgs);
+            args.proxyAppDestination = proxyDetails.proxyAppDestination;
+            const finalArgs = Object.assign(Object.assign(Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false }), proxyDetails), { relativeProxyAppDestination: (0, helpers_1.getRelativeProxyDestination)(args.destination, args.proxyAppDestination) });
             const templatePath = path_1.default.resolve(__dirname, '../../templates/angular-xmcloud');
-            yield (0, common_1.transform)(templatePath, mergedArgs);
+            yield (0, common_1.transform)(templatePath, finalArgs);
+            if (args.templates.includes('angular-sxp') || ((_d = (_c = pkg.config) === null || _c === void 0 ? void 0 : _c.templates) === null || _d === void 0 ? void 0 : _d.includes('angular-sxp'))) {
+                console.log((0, common_1.incompatibleAddonsMsg)('angular-xmcloud', 'angular-sxp'));
+            }
             const response = {
                 nextSteps: [],
                 appName: args.appName || common_1.DEFAULT_APPNAME,

package/dist/initializers/node-xmcloud-proxy/index.js

@@ -21,7 +21,8 @@ class AngularXmCloudInitializer {
     init(args) {
         return __awaiter(this, void 0, void 0, function* () {
             const templatePath = path_1.default.resolve(__dirname, '../../templates/node-xmcloud-proxy');
-            yield (0, common_1.transform)(templatePath, args);
+            const modifiedArgs = Object.assign(Object.assign({}, args), { destination: args.proxyAppDestination || args.destination });
+            yield (0, common_1.transform)(templatePath, modifiedArgs);
             const response = {
                 appName: 'node-xmcloud-proxy',
             };

package/dist/templates/angular/.env

@@ -1,3 +1,5 @@
+# ====== Sitecore Preview / Delivery Edge ======
+
 # Your Sitecore API key is needed to build the app. Typically, the API key is
 # defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
 # when building locally (if you've never run `jss setup`), or when building in a
@@ -17,15 +19,12 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
+# ==============================================
+
 # Your Sitecore site name.
 # 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=
 

package/dist/templates/angular/.eslintrc

@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/no-host-metadata-property": "off",
         "@angular-eslint/component-selector": [
           "error",
           {

package/dist/templates/angular/gitignore

@@ -9,10 +9,15 @@ scjssconfig.json
 /dist-server
 /tmp
 /out-tsc
+/.angular
 
 # dependencies
 /node_modules
 
+# local env files
+.env.local
+.env.*.local
+
 # IDEs and editors
 /.idea
 .project

package/dist/templates/angular/package.json

@@ -81,7 +81,6 @@
     "@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": "~20.14.10",
@@ -99,7 +98,6 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "isomorphic-fetch": "^3.0.0",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
     "karma": "^6.3.2",

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

@@ -12,7 +12,6 @@ class FallbackPlugin implements ConfigPlugin {
   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',
       <% } -%>

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

@@ -79,12 +79,14 @@ function generateComponentFactory() {
   const registrations: string[] = [];
   const lazyRegistrations: string[] = [];
   const declarations: string[] = [];
+  const components: string[] = [];
 
   packages.forEach((p) => {
     const variables = p.components
       .map((c) => {
         registrations.push(`{ name: '${c.componentName}', type: ${c.moduleName} },`);
         declarations.push(`${c.moduleName},`);
+        components.push(c.componentName);
 
         return c.moduleName;
       })
@@ -118,6 +120,8 @@ function generateComponentFactory() {
     const componentName = componentClassMatch[1];
     const importVarName = `${componentName}Component`;
 
+    components.push(componentName);
+
     // check for lazy loading needs
     const moduleFilePath = path.join(componentRootPath, componentFolder, `${componentFolder}.module.ts`);
     const isLazyLoaded = fs.existsSync(moduleFilePath);
@@ -144,6 +148,10 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { AppComponentsSharedModule } from './app-components.shared.module';
 ${imports.join('\n')}
 
+export const components = [
+  ${components.map((c) => `'${c}'`).join(',\n  ')}
+];
+
 @NgModule({
   imports: [
     AppComponentsSharedModule,

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

@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
@@ -23,8 +24,16 @@ const defaultConfigValue: JssConfig = {
   defaultServerRoute: '/',
 };
 
-generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
-generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
+async function main() {
+  await generateConfig('src/environments/environment.js', defaultConfigValue, {
+    production: false,
+  });
+  await generateConfig('src/environments/environment.prod.js', defaultConfigValue, {
+    production: true,
+  });
+}
+
+main();
 
 /**
  * Generates the JSS config based on config plugins (under ./config/plugins)
@@ -38,7 +47,15 @@ export function generateConfig(
   defaultConfig: JssConfig = defaultConfigValue,
   configOverrides?: { [key: string]: unknown }
 ) {
-  jssConfigFactory
+  // Handle undefined values
+  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: defaultConfig[key] || '',
+    };
+  }, {});
+
+  return jssConfigFactory
     .create(defaultConfig)
     .then((config) => {
       writeConfig(Object.assign(config, configOverrides), outputPath);
@@ -67,9 +84,11 @@ export function writeConfig(config: JssConfig, outputPath?: string) {
 
   // 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`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(
+      prop
+    )} || "${value.toString().trim()}";\n`;
   });
 
   configText += `module.exports.environment = config;`;

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

@@ -1,6 +1,6 @@
-import * as fetch from 'isomorphic-fetch';
 import * as fs from 'fs';
-import { generateConfig } from './generate-config';
+import clientFactory from 'lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from 'lib/graphql-client-factory/config';
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -9,28 +9,23 @@ 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');
+import './generate-config';
 
-let jssConfig;
+const clientFactoryConfig = getGraphQLClientFactoryConfig();
 
-try {
-  jssConfig = require('../src/environments/environment').environment;
-} catch (e) {
-  console.error(
-    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
-  );
-  console.error(e);
-  process.exit(1);
-}
+console.log(`Updating GraphQL fragment type data from ${clientFactoryConfig.endpoint}...`);
 
-console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoint}...`);
-
-fetch(jssConfig.graphQLEndpoint, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
-  body: JSON.stringify({
-    query: `
-      {
+clientFactory()
+  .request<{
+    [key: string]: unknown;
+    __schema: {
+      kind: string;
+      name: string;
+      types: { possibleTypes?: { name: string } }[];
+    };
+  }>(
+    `
+      { 
         __schema {
           types {
             kind
@@ -41,22 +36,18 @@ 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.__schema.types.filter((type) => type.possibleTypes !== null);
 
     const filteredResult = { ...result };
-    filteredResult.data.__schema.types = filteredData;
+    filteredResult.__schema.types = filteredData;
 
     fs.writeFile(
       './src/graphql-fragment-types.ts',
-      `export default ${JSON.stringify(filteredResult.data, null, 2)}`,
+      `export default ${JSON.stringify(filteredResult, null, 2)}`,
       (err) => {
         if (err) {
           console.error('Error writing GraphQLFragmentTypes file', err);