create-sitecore-jss 22.2.0-canary.6 → 22.2.0-canary.61

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);

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

@@ -4,14 +4,12 @@ import { join } from 'path';
 import 'reflect-metadata';
 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';
 
+export * from './server.exports';
+
 const http = require('http');
 const https = require('https');
 
@@ -100,22 +98,4 @@ 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 };

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

@@ -0,0 +1,13 @@
+import { environment } from './src/environments/environment';
+
+/**
+ * Define the required configuration values to be exported from the server.bundle.ts.
+ */
+
+const apiKey = environment.sitecoreApiKey;
+const siteName = environment.sitecoreSiteName;
+
+export {
+  apiKey,
+  siteName,
+};

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

@@ -1,15 +1,8 @@
-import {
-  RouteData,
-  LayoutServiceContextData,
-} from '@sitecore-jss/sitecore-jss-angular';
+import { BaseJssState } from '@sitecore-jss/sitecore-jss-angular';
 import { LayoutServiceError } from './layout/jss-layout.service';
 
-export class JssState<Fields = Record<string, unknown>> {
+export class JssState extends BaseJssState {
   language: string;
   serverRoute: string;
   routeFetchError?: LayoutServiceError;
-  sitecore?: LayoutServiceContextData & {
-    route: RouteData<Fields>;
-  };
-  viewBag: { [key: string]: unknown };
 }

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

@@ -1,9 +1,8 @@
 import { APP_ID, NgModule, TransferState } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RoutingModule } from './routing/routing.module';
 import { JssLayoutService } from './layout/jss-layout.service';
-import { JssContextService } from './jss-context.service';
 import { AppComponentsModule } from './components/app-components.module';
 import { AppComponent } from './app.component';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
@@ -11,6 +10,7 @@ import { JssTranslationClientLoaderService } from './i18n/jss-translation-client
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
 import { JssMetaService } from './jss-meta.service';
+import { JssContextService } from './jss-context.service';
 
 @NgModule({
   imports: [
@@ -20,8 +20,9 @@ import { JssMetaService } from './jss-meta.service';
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()),
-        deps: [HttpClient, TransferState],
+        useFactory: (transferState: TransferState) =>
+          new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
+        deps: [TransferState],
       },
     }),
     AppComponentsModule,

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

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, TransferState } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 
@@ -18,11 +18,14 @@ import { JssTranslationServerLoaderService } from './i18n/jss-translation-server
       // <-- *Important* to get translation values server-side
       loader: {
         provide: TranslateLoader,
-        useFactory: (ssrViewBag: {
-          [key: string]: unknown;
-          dictionary: { [key: string]: string };
-        }) => new JssTranslationServerLoaderService(ssrViewBag),
-        deps: ['JSS_SERVER_VIEWBAG'],
+        useFactory: (
+          ssrViewBag: {
+            [key: string]: unknown;
+            dictionary: { [key: string]: string };
+          },
+          transferState: TransferState
+        ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
+        deps: ['JSS_SERVER_VIEWBAG', TransferState],
       },
     }),
   ],

package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,16 +1,24 @@
-import { makeStateKey, Injectable } from '@angular/core';
+import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { EMPTY } from 'rxjs';
-
-export const dictionaryStateKey = makeStateKey('jssDictionary');
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
+import { EMPTY, Observable, of } from 'rxjs';
+import { JssTranslationLoaderService } from './jss-translation-loader.service';
+import { dictionaryStateKey } from './jss-translation-server-loader.service';
 
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
   constructor(
-    private fallbackLoader: TranslateLoader,
-  ) { }
+    private fallbackLoader: JssTranslationLoaderService,
+    private transferState: TransferState
+  ) {}
+
+  getTranslation(lang: string): Observable<DictionaryPhrases> {
+    const dictionary = this.transferState.get(dictionaryStateKey, null);
+
+    if (dictionary) {
+      return of(dictionary);
+    }
 
-  getTranslation(lang: string) {
     if (!this.fallbackLoader) {
       return EMPTY;
     }

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,17 +1,29 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
 
+export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
+  'dictionary'
+);
+
 @Injectable()
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: { [key: string]: string } }
+    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
+    private transferState: TransferState
   ) {}
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;
+
+    // set the dictionary in transfer state for the client
+    // since for ng-translate there is no obvious way to pass the server side dictionary to the client
+    // https://github.com/ngx-translate/core/issues/1207#issuecomment-700741671
+    this.transferState.set(dictionaryStateKey, dictionary);
+
     if (dictionary) {
       return observableOf(dictionary);
     }

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

@@ -3,6 +3,7 @@ import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService } from './layout/jss-layout.service';
+import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -14,10 +15,11 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
+    protected stateService: JssStateService<JssState>,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {
-    super(transferState, layoutService);
+    super(transferState, layoutService, stateService);
   }
   changeRoute(_route: string, _language: string): Observable<JssState> {
     // console.log('Server route change to ' + route);
@@ -34,7 +36,7 @@ export class JssContextServerSideService extends JssContextService {
     }
 
     // read initial state from data injected via server.bundle wrapper
-    this.state.next(this.serverToSsrState);
+    this.stateService.setState(this.serverToSsrState);
 
     // place the initial state into TransferState for the client
     this.transferState.set<JssState>(jssKey, this.serverToSsrState);

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

@@ -1,9 +1,9 @@
 import { Injectable, TransferState, makeStateKey } from '@angular/core';
-import { LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';
+import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 import { map, shareReplay, catchError } from 'rxjs/operators';
-import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
-import { JssState } from './JssState';
+import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService, LayoutServiceError } from './layout/jss-layout.service';
+import { JssState } from './JssState';
 
 export const jssKey = makeStateKey<JssState>('jss');
 
@@ -16,14 +16,17 @@ export const jssKey = makeStateKey<JssState>('jss');
 export class JssContextService {
   // components can subscribe to this (or use getValue()) to get access to latest data from Layout Service,
   // as well as current language and server route
-  state: BehaviorSubject<JssState>;
-
-  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService) {
-    this.state = new BehaviorSubject<JssState>(new JssState());
+  get state() {
+    return this.stateService.state;
+  }
+  get stateValue() {
+    return this.stateService.stateValue;
+  }
+  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
   }
 
   changeLanguage(language: string) {
-    this.state.next({ ...this.state.value, language });
+    this.stateService.setState({ ...this.stateService.stateValue, language });
   }
 
   // primarily invoked by JssRouteResolver on URL/route change
@@ -33,11 +36,11 @@ export class JssContextService {
     if (foundInitialState) {
       const jssState = this.transferState.get<JssState>(jssKey, null);
       this.transferState.remove(jssKey);
-      this.state.next(jssState);
+      this.stateService.setState(jssState);
       return observableOf(jssState);
     }
 
-    const appLanguage = this.state.value.language || language;
+    const appLanguage = this.stateService.stateValue.language || language;
 
     const jssState$ = this.layoutService.getRouteData(route, appLanguage).pipe(
       map((routeData) => {
@@ -61,7 +64,7 @@ export class JssContextService {
 
     // subscribe to it ourselves so we can maintain current state
     jssState$.subscribe((jssState) => {
-      this.state.next(jssState);
+      this.stateService.setState(jssState);
     });
 
     return jssState$;

package/dist/templates/angular/src/app/jss-graphql.service.ts

@@ -43,7 +43,7 @@ export class JssGraphQLService {
   ) {
     this.isEditingOrPreviewingAndSsr =
       isPlatformServer(this.platformId) &&
-      this.sitecoreContext.state.value.sitecore.context.pageState !== 'normal';
+      this.sitecoreContext.stateValue.sitecore.context.pageState !== 'normal';
   }
 
   private static extractVariableNames(query: DocumentNode) {
@@ -127,19 +127,19 @@ export class JssGraphQLService {
 
     if (
       usedVariables.contextItem &&
-      this.sitecoreContext.state.value.sitecore &&
-      this.sitecoreContext.state.value.sitecore.route &&
-      this.sitecoreContext.state.value.sitecore.route.itemId
+      this.sitecoreContext.stateValue.sitecore &&
+      this.sitecoreContext.stateValue.sitecore.route &&
+      this.sitecoreContext.stateValue.sitecore.route.itemId
     ) {
-      (variables as EmptyObject).contextItem = this.sitecoreContext.state.value.sitecore.route.itemId;
+      (variables as EmptyObject).contextItem = this.sitecoreContext.stateValue.sitecore.route.itemId;
     }
 
     // pass language as a variable to the query, if language exists as a variable and in sitecoreContext
     if (
       usedVariables.language &&
-      this.sitecoreContext.state.value.language
+      this.sitecoreContext.stateValue.language
     ) {
-      (variables as EmptyObject).language = this.sitecoreContext.state.value.language;
+      (variables as EmptyObject).language = this.sitecoreContext.stateValue.language;
     }
 
     return variables;

package/dist/templates/angular/src/app/layout/jss-layout.service.ts

@@ -7,14 +7,14 @@ import { from as fromPromise, Observable, throwError as observableThrow } from '
 import { catchError, map } from 'rxjs/operators';
 import { layoutServiceFactory } from '../lib/layout-service-factory';
 
-const layoutServiceInstance = layoutServiceFactory.create();
-
 export class LayoutServiceError {
   status: number;
   statusText: string;
   data?: { sitecore?: LayoutServiceContextData };
 }
 
+const layoutServiceInstance = layoutServiceFactory.create();
+
 @Injectable()
 export class JssLayoutService {
   getRouteData(

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

@@ -7,7 +7,7 @@ import {
   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
@@ -24,6 +24,9 @@ export class DictionaryServiceFactory {
       new GraphQLDictionaryService({
           clientFactory,
           siteName: env.sitecoreSiteName,
+          <% if (locals.xmcloud) { -%>
+          useSiteQuery: true,
+          <% } -%>
           /*
         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;

package/dist/templates/angular/src/app/lib/graphql-client-factory/config.ts

@@ -0,0 +1,21 @@
+import { GraphQLRequestClientFactoryConfig } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (env.graphQLEndpoint && env.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: env.graphQLEndpoint,
+      apiKey: env.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return clientConfig;
+};

package/dist/templates/angular/src/app/lib/graphql-client-factory/index.ts

@@ -0,0 +1,16 @@
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { getGraphQLClientFactoryConfig } from './config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+const createGraphQLClientFactory = () => {
+  const clientConfig = getGraphQLClientFactoryConfig();
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export default createGraphQLClientFactory();

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

@@ -7,7 +7,7 @@ import {
    <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {

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

@@ -9,12 +9,12 @@ import { JssMetaService } from '../../jss-meta.service';
 enum LayoutState {
   Layout,
   NotFound,
-  Error
+  Error,
 }
 
 interface RouteFields {
   [name: string]: unknown;
-  pageTitle: Field<string>;
+  pageTitle?: Field<string>;
 }
 
 @Component({
@@ -28,14 +28,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
   subscription: Subscription;
   errorContextData: LayoutServiceContextData;
 
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private readonly meta: JssMetaService,
-  ) { }
+  constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver
-    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState<RouteFields> }) => {
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
       if (!data.jssState) {
         this.state = LayoutState.NotFound;
         return;
@@ -48,13 +45,17 @@ export class LayoutComponent implements OnInit, OnDestroy {
       }
 
       if (data.jssState.routeFetchError) {
-        if (data.jssState.routeFetchError.status >= 400 && data.jssState.routeFetchError.status < 500) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
           this.state = LayoutState.NotFound;
         } else {
           this.state = LayoutState.Error;
         }
 
-        this.errorContextData = data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
       }
     });
   }

package/dist/templates/angular/src/environments/gitignore

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

package/dist/templates/angular-sxp/.env

@@ -0,0 +1,2 @@
+# The way in which layout and dictionary data is fetched from Sitecore
+FETCH_WITH=<%- fetchWith %>