StackBlitz Guide: Example of `files` payload

example.js

{
  files: {
    src: {
      name: 'src',
      type: 'folder',
      contents: '',
      fullPath: 'src',
      lastModified: 1525387210297
    },
    'src/app': {
      name: 'app',
      type: 'folder',
      contents: '',
      fullPath: 'src/app',
      lastModified: 1525387219468
    },
    'src/main.ts': {
      name: 'main.ts',
      type: 'file',
      contents: 'import \'./polyfills\';\n\nimport { enableProdMode } from \'@angular/core\';\nimport { platformBrowserDynamic } from \'@angular/platform-browser-dynamic\';\n\nimport { AppModule } from \'./app/app.module\';\n\nplatformBrowserDynamic().bootstrapModule(AppModule).then(ref => {\n  // Ensure Angular destroys itself on hot reloads.\n  if (window[\'ngRef\']) {\n    window[\'ngRef\'].destroy();\n  }\n  window[\'ngRef\'] = ref;\n\n  // Otherwise, log the boot error\n}).catch(err => console.error(err));',
      fullPath: 'src/main.ts',
      lastModified: 1597420842175
    },
    'angular.json': {
      name: 'angular.json',
      type: 'file',
      contents: '{\n  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n  "version": 1,\n  "newProjectRoot": "projects",\n  "projects": {\n    "demo": {\n      "root": "",\n      "sourceRoot": "src",\n      "projectType": "application",\n      "prefix": "app",\n      "schematics": {},\n      "architect": {\n        "build": {\n          "builder": "@angular-devkit/build-angular:browser",\n          "options": {\n            "outputPath": "dist/demo",\n            "index": "src/index.html",\n            "main": "src/main.ts",\n            "polyfills": "src/polyfills.ts",\n            "tsConfig": "src/tsconfig.app.json",\n            "assets": [\n              "src/favicon.ico",\n              "src/assets"\n            ],\n            "styles": [\n              "src/styles.css"\n            ],\n            "scripts": []\n          },\n          "configurations": {\n            "production": {\n              "fileReplacements": [\n                {\n                  "replace": "src/environments/environment.ts",\n                  "with": "src/environments/environment.prod.ts"\n                }\n              ],\n              "optimization": true,\n              "outputHashing": "all",\n              "sourceMap": false,\n              "extractCss": true,\n              "namedChunks": false,\n              "aot": true,\n              "extractLicenses": true,\n              "vendorChunk": false,\n              "buildOptimizer": true\n            }\n          }\n        },\n        "serve": {\n          "builder": "@angular-devkit/build-angular:dev-server",\n          "options": {\n            "browserTarget": "demo:build"\n          },\n          "configurations": {\n            "production": {\n              "browserTarget": "demo:build:production"\n            }\n          }\n        },\n        "extract-i18n": {\n          "builder": "@angular-devkit/build-angular:extract-i18n",\n          "options": {\n            "browserTarget": "demo:build"\n          }\n        },\n        "test": {\n          "builder": "@angular-devkit/build-angular:karma",\n          "options": {\n            "main": "src/test.ts",\n            "polyfills": "src/polyfills.ts",\n            "tsConfig": "src/tsconfig.spec.json",\n            "karmaConfig": "src/karma.conf.js",\n            "styles": [\n              "styles.css"\n            ],\n            "scripts": [],\n            "assets": [\n              "src/favicon.ico",\n              "src/assets"\n            ]\n          }\n        },\n        "lint": {\n          "builder": "@angular-devkit/build-angular:tslint",\n          "options": {\n            "tsConfig": [\n              "src/tsconfig.app.json",\n              "src/tsconfig.spec.json"\n            ],\n            "exclude": [\n              "**/node_modules/**"\n            ]\n          }\n        }\n      }\n    }\n  },\n  "defaultProject": "demo"\n}',
      fullPath: 'angular.json',
      lastModified: 1540062733252
    },
    'package.json': {
      name: 'package.json',
      type: 'file',
      contents: '{\n  "name": "angular",\n  "version": "0.0.0",\n  "private": true,\n  "dependencies": {\n    "@angular/animations": "^13.2.0",\n    "@angular/common": "^13.2.0",\n    "@angular/compiler": "^13.2.0",\n    "@angular/core": "^13.2.0",\n    "@angular/forms": "^13.2.0",\n    "@angular/platform-browser": "^13.2.0",\n    "@angular/platform-browser-dynamic": "^13.2.0",\n    "@angular/router": "^13.2.0",\n    "rxjs": "^7.5.2",\n    "tslib": "^2.3.1",\n    "zone.js": "^0.11.4"\n  },\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "test": "ng test",\n    "lint": "ng lint",\n    "e2e": "ng e2e"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "~0.1100.4",\n    "@angular/cli": "~11.0.4",\n    "@angular/compiler-cli": "~11.0.4",\n    "@types/jasmine": "~3.6.0",\n    "@types/node": "^12.11.1",\n    "codelyzer": "^6.0.0",\n    "jasmine-core": "~3.6.0",\n    "jasmine-spec-reporter": "~5.0.0",\n    "karma": "~5.1.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage": "~2.0.3",\n    "karma-jasmine": "~4.0.0",\n    "karma-jasmine-html-reporter": "^1.5.0",\n    "protractor": "~7.0.0",\n    "ts-node": "~8.3.0",\n    "tslint": "~6.1.0",\n    "typescript": "~4.0.2"\n  }\n}',
      fullPath: 'package.json',
      lastModified: 1643736606412
    },
    'tsconfig.json': {
      name: 'tsconfig.json',
      type: 'file',
      contents: '{\n  "compileOnSave": false,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "outDir": "./dist/out-tsc",\n    "sourceMap": true,\n    "declaration": false,\n    "downlevelIteration": true,\n    "experimentalDecorators": true,\n    "module": "esnext",\n    "moduleResolution": "node",\n    "importHelpers": true,\n    "target": "es2015",\n    "typeRoots": [\n      "node_modules/@types"\n    ],\n    "lib": [\n      "es2018",\n      "dom"\n    ]\n  },\n  "angularCompilerOptions": {\n    "enableIvy": true,\n    "fullTemplateTypeCheck": true,\n    "strictInjectionParameters": true\n  }\n}',
      fullPath: 'tsconfig.json',
      lastModified: 1582600058400
    },
    'src/index.html': {
      name: 'index.html',
      type: 'file',
      contents: '<my-app>loading</my-app>',
      fullPath: 'src/index.html',
      lastModified: 1525387236766
    },
    'src/styles.css': {
      name: 'styles.css',
      type: 'file',
      contents: '/* Add application styles & imports to this file! */',
      fullPath: 'src/styles.css',
      lastModified: 1525387247192
    },
    'src/polyfills.ts': {
      name: 'polyfills.ts',
      type: 'file',
      contents: '/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called "evergreen" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE9, IE10 and IE11 requires all of the following polyfills. **/\n// import \'core-js/es6/symbol\';\n// import \'core-js/es6/object\';\n// import \'core-js/es6/function\';\n// import \'core-js/es6/parse-int\';\n// import \'core-js/es6/parse-float\';\n// import \'core-js/es6/number\';\n// import \'core-js/es6/math\';\n// import \'core-js/es6/string\';\n// import \'core-js/es6/date\';\n// import \'core-js/es6/array\';\n// import \'core-js/es6/regexp\';\n// import \'core-js/es6/map\';\n// import \'core-js/es6/set\';\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import \'classlist.js\';  // Run `npm install --save classlist.js`.\n\n/** IE10 and IE11 requires the following to support `@angular/animation`. */\n// import \'web-animations-js\';  // Run `npm install --save web-animations-js`.\n\n\n/** Evergreen browsers require these. **/\n// import \'core-js/es6/reflect\';\n// import \'core-js/es7/reflect\';\n\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import \'web-animations-js\';  // Run `npm install --save web-animations-js`.\n\n\n\n/***************************************************************************************************\n * Zone JS is required by Angular itself.\n */\nimport \'zone.js/dist/zone\';  // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n\n/**\n * Date, currency, decimal and percent pipes.\n * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10\n */\n// import \'intl\';  // Run `npm install --save intl`.',
      fullPath: 'src/polyfills.ts',
      lastModified: 1568715460475
    },
    'src/app/app.module.ts': {
      name: 'app.module.ts',
      type: 'file',
      contents: 'import { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { FormsModule } from \'@angular/forms\';\n\nimport { AppComponent } from \'./app.component\';\nimport { HelloComponent } from \'./hello.component\';\n\n@NgModule({\n  imports:      [ BrowserModule, FormsModule ],\n  declarations: [ AppComponent, HelloComponent ],\n  bootstrap:    [ AppComponent ]\n})\nexport class AppModule { }\n',
      fullPath: 'src/app/app.module.ts',
      lastModified: 1525387292446
    },
    'src/app/app.component.ts': {
      name: 'app.component.ts',
      type: 'file',
      contents: 'import { Component, VERSION } from \'@angular/core\';\n\n@Component({\n  selector: \'my-app\',\n  templateUrl: \'./app.component.html\',\n  styleUrls: [ \'./app.component.css\' ]\n})\nexport class AppComponent  {\n  name = \'Angular \' + VERSION.major;\n}\n',
      fullPath: 'src/app/app.component.ts',
      lastModified: 1597421097969
    },
    'src/app/app.component.css': {
      name: 'app.component.css',
      type: 'file',
      contents: 'p {\n  font-family: Lato;\n}',
      fullPath: 'src/app/app.component.css',
      lastModified: 1504821483038
    },
    'src/app/app.component.html': {
      name: 'app.component.html',
      type: 'file',
      contents: '<hello name="{{ name }}"></hello>\n<p>\n  Start editing to see some magic happen :)\n</p>',
      fullPath: 'src/app/app.component.html',
      lastModified: 1501744653157
    },
    'src/app/hello.component.ts': {
      name: 'hello.component.ts',
      type: 'file',
      contents: 'import { Component, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'hello\',\n  template: `<h1>Hello {{name}}!</h1>`,\n  styles: [`h1 { font-family: Lato; }`]\n})\nexport class HelloComponent  {\n  @Input() name: string;\n}\n',
      fullPath: 'src/app/hello.component.ts',
      lastModified: 1588859805034
    }
  }
}