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

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/JssState.ts

@@ -1,7 +1,4 @@
-import {
-  RouteData,
-  LayoutServiceContextData,
-} from '@sitecore-jss/sitecore-jss-angular';
+import { RouteData, LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
 import { LayoutServiceError } from './layout/jss-layout.service';
 
 export class JssState<Fields = Record<string, unknown>> {

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.

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

@@ -3,7 +3,6 @@ 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';
 
 /*
@@ -14,22 +13,8 @@ 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,
-    StyleguideSpecimenComponent
-  ],
-  declarations: [
-    StyleguideSpecimenComponent
-  ],
+  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
+  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
+  declarations: [],
 })
-export class AppComponentsSharedModule { }
+export class AppComponentsSharedModule {}

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

@@ -2,7 +2,6 @@ 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';
 
 /**
@@ -15,7 +14,6 @@ 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/src/app/lib/config.ts

@@ -0,0 +1,16 @@
+/*
+ * Represents the type of config object available within the generated /environments/environment.js
+ */
+export interface JssConfig extends Record<string, string | boolean | undefined> {
+  production?: false;
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  graphQLEndpointPath?: string;
+  <% if (!locals.xmcloud) { -%>
+  layoutServiceConfigurationName?: string;
+  <% } -%>
+  defaultServerRoute?: string;
+}

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

@@ -1,30 +1,38 @@
 import {
   DictionaryService,
   GraphQLDictionaryService,
+  <% if (!locals.xmcloud) { -%>
   RestDictionaryService,
   constants,
+  <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import { clientFactory } from './graphql-client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    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}'
-          */
-        })
-      : new RestDictionaryService({
+    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({
+          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}'
+      */
         });
+
+    return service;
   }
 }
 

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

@@ -1,25 +1,33 @@
 import {
   LayoutService,
   GraphQLLayoutService,
+  <% if (!locals.xmcloud) { -%>
   RestLayoutService,
   constants,
+   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import { clientFactory } from './graphql-client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLLayoutService({
-          clientFactory,
-          siteName: environment.sitecoreSiteName,
-        })
-      : new RestLayoutService({
-          apiHost: environment.sitecoreApiHost,
-          apiKey: environment.sitecoreApiKey,
-          siteName: environment.sitecoreSiteName,
-          configurationName: environment.layoutServiceConfigurationName,
-        });
+    const service =
+    <% if (!locals.xmcloud) { -%>
+      process.env.FETCH_WITH === constants.FETCH_WITH.REST
+        ? new RestLayoutService({
+            apiHost: environment.sitecoreApiHost,
+            apiKey: environment.sitecoreApiKey,
+            siteName: environment.sitecoreSiteName,
+            configurationName: environment.layoutServiceConfigurationName,
+          })
+        : 
+    <% } -%>
+        new GraphQLLayoutService({
+            clientFactory,
+            siteName: environment.sitecoreSiteName,
+          });
+
+    return service;
   }
 }
 

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

@@ -1,7 +1,7 @@
 <app-navigation></app-navigation>
 <div class="container">
   <ng-container *ngIf="state === LayoutState.Layout">
-    <app-visitor-identification></app-visitor-identification>
+    <app-scripts></app-scripts>
     <sc-placeholder
       name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
       [rendering]="route"

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

@@ -71,9 +71,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onPlaceholderLoaded(placeholderName: string) {
+  onPlaceholderLoaded(_placeholderName: string) {
     // you may optionally hook to the loaded event for a placeholder,
     // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
-    console.debug(`layout.component.ts: placeholder component fired loaded event for the ${placeholderName} placeholder`);
   }
 }

package/dist/templates/angular/src/app/routing/navigation/navigation.component.html

@@ -1,4 +1,6 @@
-<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
+<div
+  class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom"
+>
   <h5 class="my-0 me-md-auto fw-normal">
     <a routerLink="/" class="text-dark" class="logo"></a>
   </h5>
@@ -11,11 +13,8 @@
     >
       {{ 'Documentation' | translate }}
     </a>
-    <a routerLink="/styleguide" class="p-2 text-dark">
-      {{ 'Styleguide' | translate }}
-    </a>
-    <a routerLink="/graphql" class="p-2 text-dark">
-      {{ 'GraphQL' | translate }}
+    <a href="https://github.com/Sitecore/jss" class="p-2 text-dark">
+      {{ 'JSS Repository' | translate }}
     </a>
   </nav>
 </div>

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

@@ -4,5 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
 })
-export class NavigationComponent {
-}
+export class NavigationComponent {}

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

@@ -9,7 +9,7 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { BrowserModule } from '@angular/platform-browser';
 import { NavigationComponent } from './navigation/navigation.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+import { ScriptsModule } from './scripts/scripts.module';
 
 export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
   // use the route builder to parse out language / server route
@@ -27,7 +27,7 @@ export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
 
   return {
     consumed: url,
-    posParams
+    posParams,
   };
 }
 
@@ -39,32 +39,25 @@ const routes: Routes = [
     matcher: jssRouteMatcher,
     component: LayoutComponent,
     resolve: {
-      jssState: jssRouteResolver
+      jssState: jssRouteResolver,
     },
     runGuardsAndResolvers: 'always',
-  }
+  },
 ];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', initialNavigation: 'enabledBlocking' }),
+    RouterModule.forRoot(routes, {
+      onSameUrlNavigation: 'reload',
+      initialNavigation: 'enabledBlocking',
+    }),
     JssModule,
     TranslateModule,
-    BrowserModule
-  ],
-  exports: [
-    RouterModule,
-    TranslateModule,
-  ],
-  declarations: [
-    NotFoundComponent,
-    ServerErrorComponent,
-    LayoutComponent,
-    NavigationComponent,
-    VisitorIdentificationComponent
+    BrowserModule,
+    ScriptsModule,
   ],
-  providers: [
-    JssRouteBuilderService,
-  ]
+  exports: [RouterModule, TranslateModule],
+  declarations: [NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent],
+  providers: [JssRouteBuilderService],
 })
-export class RoutingModule { }
+export class RoutingModule {}

package/dist/templates/angular/src/app/routing/scripts/scripts.component.html

@@ -0,0 +1 @@
+<div></div>

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-scripts',
+  templateUrl: './scripts.component.html',
+})
+export class ScriptsComponent {}

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

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  declarations: [ScriptsComponent],
+})
+export class ScriptsModule {}