[Angular] Use the app name as prefix value for templates

samples/angular/data/content/Styleguide/ContentListField/Item1/en.yml

@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-1
 displayName: Styleguide Content List Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssAngularWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 1 Text Field

samples/angular/data/content/Styleguide/ContentListField/Item2/en.yml

@@ -1,6 +1,6 @@
 id: styleguide-content-list-field-shared-2
 displayName: Styleguide Content List Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: Styleguide-ContentList-Item-Template
+template: JssAngularWeb-Styleguide-ContentList-Item-Template
 fields:
   textField: ContentList Demo (Shared) Item 2 Text Field

samples/angular/data/content/Styleguide/ItemLinkField/Item1/en.yml

@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-1
 displayName: Styleguide Item Link Item 1 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssAngularWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 1 Text Field

samples/angular/data/content/Styleguide/ItemLinkField/Item2/en.yml

@@ -1,6 +1,6 @@
 id: styleguide-item-link-field-shared-2
 displayName: Styleguide Item Link Item 2 (Shared)
 # Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: Styleguide-ItemLink-Item-Template
+template: JssAngularWeb-Styleguide-ItemLink-Item-Template
 fields:
   textField: ItemLink Demo (Shared) Item 2 Text Field

samples/angular/data/routes/styleguide/custom-route-type/en.yml

@@ -1,5 +1,5 @@
 # Using a Custom Route Type enables adding more field data to the route level.
-template: ExampleCustomRouteType
+template: JssAngularWeb-ExampleCustomRouteType
 fields:
   # Note that custom route types inherit from the default route type automatically.
   # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
@@ -9,4 +9,4 @@ fields:
   content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
 placeholders:
   jss-main:
-  - componentName: StyleguideCustomRouteType
+    - componentName: StyleguideCustomRouteType

samples/angular/jss-create.js

@@ -1,4 +1,4 @@
-const fs = require('fs');
+const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
 const { applyNameToProject } = require('@sitecore-jss/sitecore-jss-cli/dist/cjs/create');
@@ -18,7 +18,7 @@ const { applyNameToProject } = require('@sitecore-jss/sitecore-jss-cli/dist/cjs/
 module.exports = function createJssProject(argv, nextSteps) {
   console.log(`Executing create script: ${__filename}...`);
 
-  applyNameToProject(__dirname, argv.name, argv.hostName, 'JssAngularWeb');
+  applyNameToProject(__dirname, argv.name, argv.hostName, 'JssAngularWeb', argv.prefix === 'true');
 
   // Replace app name in Angular-specific locations
   function replaceAngularAppNameInFile(filePath) {
@@ -36,14 +36,17 @@ module.exports = function createJssProject(argv, nextSteps) {
   replaceAngularAppNameInFile('scripts/bootstrap.ts');
   replaceAngularAppNameInFile('package.json');
 
-  if (!argv.fetchWith) {
+  if (!argv.fetchWith || !argv.prefix) {
     nextSteps.push(
       `* Did you know you can customize the Angular sample app using ${chalk.green(
         'jss create'
       )} parameters?`,
       `*  ${chalk.green(
         '--fetchWith {REST|GraphQL}'
-      )} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`
+      )} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`,
+      `*  ${chalk.green(
+        '--prefix {true|false}'
+      )} : Specifies whether the templates should include a prefix. If true, the app's templates will be prefixed with the app's name in PascalCase. This is helpful if deploying multiple apps to the same Sitecore instance. If false, no prefix will be used. Default is false.`
     );
   }
 

samples/angular/sitecore/definitions/components/Styleguide-Layout-Reuse.sitecore.ts

@@ -7,10 +7,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideLayoutReuse(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideLayoutReuse',
+    templateName: 'JssAngularWeb-StyleguideLayoutReuse',
     icon: SitecoreIcon.DocumentsExchange,
     placeholders: ['jss-reuse-example'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/Styleguide-Layout-Tabs-Tab.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideLayoutTabsTab(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideLayoutTabsTab',
+    templateName: 'JssAngularWeb-StyleguideLayoutTabsTab',
     icon: SitecoreIcon.TabPane,
     fields: [
       { name: 'title', type: CommonFieldTypes.SingleLineText },

samples/angular/sitecore/definitions/components/Styleguide-Layout-Tabs.sitecore.ts

@@ -7,10 +7,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideLayoutTabs(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideLayoutTabs',
+    templateName: 'JssAngularWeb-StyleguideLayoutTabs',
     icon: SitecoreIcon.DocumentTag,
     placeholders: ['jss-tabs'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/Styleguide-Layout.sitecore.ts

@@ -7,6 +7,7 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideLayout(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideLayout',
+    templateName: 'JssAngularWeb-StyleguideLayout',
     icon: SitecoreIcon.Layout,
     placeholders: ['jss-styleguide-layout'],
   });

samples/angular/sitecore/definitions/components/Styleguide-Multilingual.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideMultilingual(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideMultilingual',
+    templateName: 'JssAngularWeb-StyleguideMultilingual',
     icon: SitecoreIcon.FlagGeneric,
     fields: [
       {
@@ -17,6 +18,6 @@ export default function StyleguideMultilingual(manifest: Manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/Styleguide-Section.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideSection(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideSection',
+    templateName: 'JssAngularWeb-StyleguideSection',
     icon: SitecoreIcon.DocumentTag,
     fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
     placeholders: ['jss-styleguide-section'],

samples/angular/sitecore/definitions/components/content-block.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function ContentBlock(manifest: Manifest) {
   manifest.addComponent({
     name: 'ContentBlock',
+    templateName: 'JssAngularWeb-ContentBlock',
     icon: SitecoreIcon.DocumentTag,
     fields: [
       { name: 'heading', type: CommonFieldTypes.SingleLineText },

samples/angular/sitecore/definitions/components/graph-ql-connected-demo.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function GraphQLConnectedDemo(manifest: Manifest) {
   manifest.addComponent({
     name: 'GraphQLConnectedDemo',
+    templateName: 'JssAngularWeb-GraphQLConnectedDemo',
     icon: SitecoreIcon.GraphConnection_directed,
     fields: [
       { name: 'sample1', type: CommonFieldTypes.SingleLineText },

samples/angular/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -13,7 +13,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
     id
     name
     # Strongly-typed querying on known templates is possible!
-    ...on GraphQLIntegratedDemo {
+    ... on JssAngularWebGraphQLIntegratedDemo {
       # Single-line text field
       sample1 {
         # the 'jsonValue' field is a JSON blob that represents the object that
@@ -43,7 +43,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
   contextItem: item(path: $contextItem, language: $language) {
     id
     # Get the page title from the app route template
-    ...on AppRoute {
+    ... on JssAngularWebAppRoute {
       pageTitle {
         value
       }
@@ -56,13 +56,13 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language
         # typing fragments can be used anywhere!
         # so in this case, we're grabbing the 'pageTitle'
         # field on all child route items.
-        ...on AppRoute {
+        ... on JssAngularWebAppRoute {
           pageTitle {
             jsonValue
             value
           }
         }
-        url{
+        url {
           path
         }
       }

samples/angular/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.ts

@@ -13,6 +13,7 @@ const query = readFileSync(
 export default function GraphQLIntegratedDemo(manifest: Manifest) {
   manifest.addComponent({
     name: 'GraphQLIntegratedDemo',
+    templateName: 'JssAngularWeb-GraphQLIntegratedDemo',
     icon: SitecoreIcon.GraphConnection_directed,
     graphQLQuery: query,
     fields: [

samples/angular/sitecore/definitions/components/graph-ql-layout.sitecore.ts

@@ -7,6 +7,7 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function GraphQLLayout(manifest: Manifest) {
   manifest.addComponent({
     name: 'GraphQLLayout',
+    templateName: 'JssAngularWeb-GraphQLLayout',
     icon: SitecoreIcon.Layout,
     placeholders: ['jss-graphql-layout'],
   });

samples/angular/sitecore/definitions/components/styleguide-angular-lazy-loading.sitecore.ts

@@ -7,9 +7,10 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideAngularLazyLoading(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideAngularLazyLoading',
+    templateName: 'JssAngularWeb-StyleguideAngularLazyLoading',
     icon: SitecoreIcon.Gearwheels,
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-component-params.sitecore.ts

@@ -7,10 +7,11 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideComponentParams(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideComponentParams',
+    templateName: 'JssAngularWeb-StyleguideComponentParams',
     icon: SitecoreIcon.WindowDialog,
     params: ['cssClass', 'columns', 'useCallToAction'],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-custom-route-type.sitecore.ts

@@ -12,7 +12,7 @@ export default function StyleguideCustomRouteType(manifest: Manifest) {
   // article sections, where you may wish to use route-level fields for
   // _sorting and filtering_ (it's difficult to query on component-level field data).
   manifest.addRouteType({
-    name: 'ExampleCustomRouteType',
+    name: 'JssAngularWeb-ExampleCustomRouteType',
     fields: [
       { name: 'headline', type: CommonFieldTypes.SingleLineText },
       { name: 'author', type: CommonFieldTypes.SingleLineText },
@@ -24,6 +24,7 @@ export default function StyleguideCustomRouteType(manifest: Manifest) {
   // This component will display the route level fields on the custom route type.
   manifest.addComponent({
     name: 'StyleguideCustomRouteType',
+    templateName: 'JssAngularWeb-StyleguideCustomRouteType',
     icon: SitecoreIcon.DocumentTag,
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-checkbox.sitecore.ts

@@ -7,13 +7,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageCheckbox(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageCheckbox',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageCheckbox',
     icon: SitecoreIcon.CheckboxSelected,
     fields: [
       { name: 'checkbox', type: CommonFieldTypes.Checkbox },
       { name: 'checkbox2', type: CommonFieldTypes.Checkbox },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-content-list.sitecore.ts

@@ -10,6 +10,7 @@ const jsonConfig = packageJson as { [key: string]: unknown; config: { [key: stri
 export default function StyleguideFieldUsageContentList(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageContentList',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageContentList',
     icon: SitecoreIcon.ListStyle_numbered,
     fields: [
       {
@@ -25,6 +26,6 @@ export default function StyleguideFieldUsageContentList(manifest: Manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-custom.sitecore.ts

@@ -7,13 +7,14 @@ import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
 export default function StyleguideFieldUsageCustom(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageCustom',
-    icon: SitecoreIcon.Gearwheel,
+    templateName: 'JssAngularWeb-StyleguideFieldUsageCustom',
+    icon: SitecoreIcon.Gearwheel,   
     // NOTE: not using 'CommonFieldTypes' here, because it's a custom field.
     // The 'Integer' field ships with Sitecore; something really custom would need to be
     // implemented as a Sitecore field type as well.
     fields: [{ name: 'customIntField', type: 'Integer' }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-date.sitecore.ts

@@ -7,13 +7,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageDate(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageDate',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageDate',
     icon: SitecoreIcon.Clock,
     fields: [
       { name: 'date', type: CommonFieldTypes.Date },
       { name: 'dateTime', type: CommonFieldTypes.DateTime },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-file.sitecore.ts

@@ -7,10 +7,11 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageFile(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageFile',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageFile',
     icon: SitecoreIcon.FloppyDisk,
     fields: [{ name: 'file', type: CommonFieldTypes.File }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-image.sitecore.ts

@@ -7,13 +7,14 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageImage(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageImage',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageImage',
     icon: SitecoreIcon.PhotoPortrait,
     fields: [
       { name: 'sample1', type: CommonFieldTypes.Image },
       { name: 'sample2', type: CommonFieldTypes.Image },
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-item-link.sitecore.ts

@@ -10,6 +10,7 @@ const jsonConfig = packageJson as { [key: string]: unknown; config: { [key: stri
 export default function StyleguideFieldUsageItemLink(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageItemLink',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageItemLink',
     icon: SitecoreIcon.Link,
     fields: [
       {
@@ -25,6 +26,6 @@ export default function StyleguideFieldUsageItemLink(manifest: Manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-link.sitecore.ts

@@ -7,6 +7,7 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageLink(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageLink',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageLink',
     icon: SitecoreIcon.Link,
     fields: [
       { name: 'externalLink', type: CommonFieldTypes.GeneralLink },
@@ -16,6 +17,6 @@ export default function StyleguideFieldUsageLink(manifest: Manifest) {
     ],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }

samples/angular/sitecore/definitions/components/styleguide-field-usage-number.sitecore.ts

@@ -7,10 +7,11 @@ import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore
 export default function StyleguideFieldUsageNumber(manifest: Manifest) {
   manifest.addComponent({
     name: 'StyleguideFieldUsageNumber',
+    templateName: 'JssAngularWeb-StyleguideFieldUsageNumber',
     icon: SitecoreIcon.NumbersField,
     fields: [{ name: 'sample', type: CommonFieldTypes.Number }],
     // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
     // inheritance adds fields defined on the base template(s) implicitly to this component
-    inherits: ['styleguide-explanatory-component-template'],
+    inherits: ['JssAngularWeb-styleguide-explanatory-component-template'],
   });
 }