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: `

Example App

`, +}) +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 0000000..997406a Binary files /dev/null and b/projects/example-app/src/favicon.ico differ 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 @@ + + + + + Example App + + + + + + + + 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"] + } +}