The application building system in the JSS Angular sample app

You can scaffold a new Angular Schematic using the jss scaffold <componentName> command.

JSS Angular Schematics provides a JSS component schematic based on the default ng generate component scaffolding tool. When running the script jss scaffold MyComponent, it creates a new Angular schematic, creates the disconnected component definition file, and provides helpful feedback about what to do to make your component work.

You can configure scaffolded components by adding/updating the scaffolding settings for Angular Schematics in the angular.json file.

The following example shows how to generate new components that use SCSS instead of CSS for styling:

 "schematics": {
     "@sitecore-jss/sitecore-jss-angular-schematics:jss-component": {
       "styleext": "scss"
     }
   } 

For additional settings, consult the JSS Angular Schematic schema definition or schema types.

The JSS app needs a more dynamic configuration system than those that the Angular environment files provide because the settings must also integrate with configurations defined in the scjssconfig.json file and the package.jsonconfig section.

To accomplish this, before a build runs, the script defined in scripts/generate-config.js runs and dynamically assembles the src/environments/environment*.ts files. The scripts/generate-config.js script is fully customizable - or removable - if you have different configuration requirements.

When a build starts, the JSS Angular app automatically generates the component factory in the src/temp/componentFactory.js file. The component factory is a mapping between JSS component names and their Angular component implementations.

The src/temp/componentFactory.js file is generated using conventions for defining your JSS components. It helps avoid manually registering new components. When the app runs locally, the component factory watches for new components and updates the module. This auto-generation is defined in scripts/generate-component-factory.js, and is fully customizable.