From 408a00c85e87098488a9051923be128e83394bd6 Mon Sep 17 00:00:00 2001 From: fboeller <fabianboeller@googlemail.com> Date: Sun, 28 Feb 2021 23:03:46 +0100 Subject: [PATCH] Add example app --- angular.json | 78 ++++++++++++++++++ package-lock.json | 16 ++++ package.json | 2 + projects/example-app/src/app/app.component.ts | 7 ++ projects/example-app/src/app/app.module.ts | 12 +++ projects/example-app/src/assets/.gitkeep | 0 .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 16 ++++ projects/example-app/src/favicon.ico | Bin 0 -> 948 bytes projects/example-app/src/index.html | 13 +++ projects/example-app/src/main.ts | 13 +++ projects/example-app/src/polyfills.ts | 62 ++++++++++++++ projects/example-app/src/styles.css | 22 +++++ projects/example-app/tsconfig.app.json | 9 ++ projects/example-app/tslint.json | 7 ++ 15 files changed, 260 insertions(+) create mode 100644 projects/example-app/src/app/app.component.ts create mode 100644 projects/example-app/src/app/app.module.ts create mode 100644 projects/example-app/src/assets/.gitkeep create mode 100644 projects/example-app/src/environments/environment.prod.ts create mode 100644 projects/example-app/src/environments/environment.ts create mode 100644 projects/example-app/src/favicon.ico create mode 100644 projects/example-app/src/index.html create mode 100644 projects/example-app/src/main.ts create mode 100644 projects/example-app/src/polyfills.ts create mode 100644 projects/example-app/src/styles.css create mode 100644 projects/example-app/tsconfig.app.json create mode 100644 projects/example-app/tslint.json diff --git a/angular.json b/angular.json index 19b1be6..4185c9e 100644 --- a/angular.json +++ b/angular.json @@ -32,6 +32,84 @@ } } } + }, + "example-app": { + "projectType": "application", + "root": "projects/example-app", + "sourceRoot": "projects/example-app/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/example-app", + "index": "projects/example-app/src/index.html", + "main": "projects/example-app/src/main.ts", + "polyfills": "projects/example-app/src/polyfills.ts", + "tsConfig": "projects/example-app/tsconfig.app.json", + "aot": true, + "assets": [ + "projects/example-app/src/favicon.ico", + "projects/example-app/src/assets" + ], + "styles": ["projects/example-app/src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "projects/example-app/src/environments/environment.ts", + "with": "projects/example-app/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "10kb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "example-app:build" + }, + "configurations": { + "production": { + "browserTarget": "example-app:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "example-app:build" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": ["projects/example-app/tsconfig.app.json"], + "exclude": ["**/node_modules/**"] + } + } + } } }, "defaultProject": "ngx-loadable" diff --git a/package-lock.json b/package-lock.json index 8d58e36..89a1f8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -587,6 +587,22 @@ "tslib": "^2.0.0" } }, + "@angular/platform-browser": { + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.3.tgz", + "integrity": "sha512-S0IP/kGinIH18+gfnX0gLFLbP0Euw1RBceDt/WipYhUeFZZryQHvot/6KFLFtO+8rVunfrg+UyBiaK65/TT9Og==", + "requires": { + "tslib": "^2.0.0" + } + }, + "@angular/platform-browser-dynamic": { + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-11.2.3.tgz", + "integrity": "sha512-QUPCvack7De6u5AqWcW8O6FzczwqoL858R1NlnqojnNbcnN/dCtXtKvvETEEgp/9VMwLfcuLd1BWdBJSah7f6A==", + "requires": { + "tslib": "^2.0.0" + } + }, "@babel/code-frame": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", diff --git a/package.json b/package.json index f03c504..8fe4931 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,8 @@ "@angular/common": "~11.1.0", "@angular/compiler": "~11.1.0", "@angular/core": "~11.1.0", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" diff --git a/projects/example-app/src/app/app.component.ts b/projects/example-app/src/app/app.component.ts new file mode 100644 index 0000000..3a51223 --- /dev/null +++ b/projects/example-app/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` <h1>Example App</h1> `, +}) +export class AppComponent {} diff --git a/projects/example-app/src/app/app.module.ts b/projects/example-app/src/app/app.module.ts new file mode 100644 index 0000000..5ce7811 --- /dev/null +++ b/projects/example-app/src/app/app.module.ts @@ -0,0 +1,12 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/projects/example-app/src/assets/.gitkeep b/projects/example-app/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/projects/example-app/src/environments/environment.prod.ts b/projects/example-app/src/environments/environment.prod.ts new file mode 100644 index 0000000..c966979 --- /dev/null +++ b/projects/example-app/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true, +}; diff --git a/projects/example-app/src/environments/environment.ts b/projects/example-app/src/environments/environment.ts new file mode 100644 index 0000000..99c3763 --- /dev/null +++ b/projects/example-app/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/projects/example-app/src/favicon.ico b/projects/example-app/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${ zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+ zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^ zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000<MNUMnLSTXxWwRmx literal 0 HcmV?d00001 diff --git a/projects/example-app/src/index.html b/projects/example-app/src/index.html new file mode 100644 index 0000000..f4b5b27 --- /dev/null +++ b/projects/example-app/src/index.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Example App</title> + <base href="/" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="icon" type="image/x-icon" href="favicon.ico" /> + </head> + <body> + <app-root></app-root> + </body> +</html> diff --git a/projects/example-app/src/main.ts b/projects/example-app/src/main.ts new file mode 100644 index 0000000..d9a2e7e --- /dev/null +++ b/projects/example-app/src/main.ts @@ -0,0 +1,13 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/projects/example-app/src/polyfills.ts b/projects/example-app/src/polyfills.ts new file mode 100644 index 0000000..e49856e --- /dev/null +++ b/projects/example-app/src/polyfills.ts @@ -0,0 +1,62 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/projects/example-app/src/styles.css b/projects/example-app/src/styles.css new file mode 100644 index 0000000..530d054 --- /dev/null +++ b/projects/example-app/src/styles.css @@ -0,0 +1,22 @@ +a, +button { + background-color: #008cba; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin-right: 10px; +} + +a:hover, +button:hover { + background-color: #017ea8; +} + +a:active, +button:active { + background-color: #00678a; +} diff --git a/projects/example-app/tsconfig.app.json b/projects/example-app/tsconfig.app.json new file mode 100644 index 0000000..cc10af0 --- /dev/null +++ b/projects/example-app/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/projects/example-app/tslint.json b/projects/example-app/tslint.json new file mode 100644 index 0000000..8006e74 --- /dev/null +++ b/projects/example-app/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tslint.json", + "rules": { + "directive-selector": [true, "attribute", "app", "camelCase"], + "component-selector": [true, "element", "app", "kebab-case"] + } +}