Skip to content

Instantly share code, notes, and snippets.

Created February 1, 2022 20:47
What would you like to do?
StackBlitz Guide: Example of `files` payload
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/",\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/"\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/",\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\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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment