;
15 |
16 | constructor(private storage: AngularFireStorage) { }
17 |
18 | ngOnInit() {
19 | this.downloadURL = this.storage.ref(this.path).getDownloadURL();
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/img-firebase/img-firebase.component.css:
--------------------------------------------------------------------------------
1 | @keyframes shimmer {
2 |
3 | 0% {
4 | background-position: -468px 0;
5 | }
6 | 100% {
7 | background-position: 468px 0;
8 | }
9 | }
10 |
11 | .wrapper {
12 | padding-top: calc(1080 / 1920 * 100%);
13 | margin: auto;
14 | }
15 |
16 | img {
17 | width: 100%;
18 | height: auto;
19 | }
20 |
21 |
22 |
23 | .bg {
24 | animation: shimmer 1s linear 0s infinite forwards;
25 | background: #d0d3da;
26 | box-shadow: 0 8px 16px rgba(0, 30, 84, 0.1);
27 | background-image: linear-gradient(to right, #d0d3da 0%, #e9ebee 20%, #d0d3da 40%, #d0d3da 100%);
28 | background-repeat: no-repeat;
29 | position: relative;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # profiling files
12 | chrome-profiler-events.json
13 | speed-measure-plugin.json
14 |
15 | # IDEs and editors
16 | /.idea
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 |
24 | # IDE - VSCode
25 | .vscode/*
26 | !.vscode/settings.json
27 | !.vscode/tasks.json
28 | !.vscode/launch.json
29 | !.vscode/extensions.json
30 |
31 | # misc
32 | /.sass-cache
33 | /connect.lock
34 | /coverage
35 | /libpeerconnection.log
36 | npm-debug.log
37 | yarn-error.log
38 | testem.log
39 | /typings
40 |
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 |
--------------------------------------------------------------------------------
/src/app/img-lazy/img-lazy.component.css:
--------------------------------------------------------------------------------
1 | @keyframes shimmer {
2 | 0% {
3 | background-position: -468px 0;
4 | }
5 | 100% {
6 | background-position: 468px 0;
7 | }
8 | }
9 |
10 | img {
11 | width: 100%;
12 | height: auto;
13 | }
14 |
15 | .bg {
16 | padding-top: calc(1080 / 1920 * 100%);
17 | margin: auto;
18 | animation: shimmer 1s linear 0s infinite forwards;
19 | background: #d0d3da;
20 | box-shadow: 0 8px 16px rgba(0, 30, 84, 0.1);
21 | background-image: linear-gradient(
22 | to right,
23 | #d0d3da 0%,
24 | #e9ebee 20%,
25 | #d0d3da 40%,
26 | #d0d3da 100%
27 | );
28 | background-repeat: no-repeat;
29 | position: relative;
30 | }
31 |
32 | figure {
33 | margin: 0;
34 | padding: 0;
35 | background: black;
36 | }
37 |
38 | figcaption {
39 | padding: 10px;
40 | color: white;
41 | }
42 |
43 | h3 {
44 | margin: 0;
45 | }
46 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule, Injector } from '@angular/core';
3 | import { createCustomElement } from '@angular/elements';
4 |
5 | const config = {
6 | apiKey: 'AIzaSyAesSTpq6RdhSGqqh3BNcJErodzk1ePzps',
7 | authDomain: 'fireship-dev-17429.firebaseapp.com',
8 | databaseURL: 'https://fireship-dev-17429.firebaseio.com',
9 | projectId: 'fireship-dev-17429',
10 | storageBucket: 'fireship-dev-17429.appspot.com',
11 | messagingSenderId: '307044372590'
12 | };
13 |
14 | import { AngularFireModule } from '@angular/fire';
15 | import { AngularFireStorageModule } from '@angular/fire/storage';
16 | import { ImgLazyComponent } from './img-lazy/img-lazy.component';
17 | import { ImgFirebaseComponent } from './img-firebase/img-firebase.component';
18 | import { MyBtnComponent } from './my-btn/my-btn.component';
19 | import { CoolService } from './cool.service';
20 |
21 | @NgModule({
22 | declarations: [ImgLazyComponent, ImgFirebaseComponent, MyBtnComponent],
23 | imports: [
24 | BrowserModule,
25 | AngularFireModule.initializeApp(config),
26 | AngularFireStorageModule
27 | ],
28 | providers: [CoolService],
29 | entryComponents: [ImgLazyComponent, ImgFirebaseComponent, MyBtnComponent]
30 | })
31 | export class AppModule {
32 | constructor(private injector: Injector) {}
33 |
34 | ngDoBootstrap() {
35 | const elements: any[] = [
36 | [ImgLazyComponent, 'img-lazy'],
37 | [ImgFirebaseComponent, 'img-firebase'],
38 | [MyBtnComponent, 'my-btn']
39 | ];
40 |
41 | for (const [component, name] of elements) {
42 | const el = createCustomElement(component, { injector: this.injector });
43 | customElements.define(name, el);
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "elements",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e",
11 | "build:e": "ng build --prod --output-hashing none && node build.js",
12 | "serve:e": "http-server -c-1 -g"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/animations": "~7.1.0",
17 | "@angular/common": "~7.1.0",
18 | "@angular/compiler": "~7.1.0",
19 | "@angular/core": "~7.1.0",
20 | "@angular/elements": "^7.1.1",
21 | "@angular/fire": "^5.1.1",
22 | "@angular/forms": "~7.1.0",
23 | "@angular/platform-browser": "~7.1.0",
24 | "@angular/platform-browser-dynamic": "~7.1.0",
25 | "@angular/router": "~7.1.0",
26 | "core-js": "^2.5.4",
27 | "document-register-element": "^1.7.2",
28 | "firebase": "^5.6.0",
29 | "rxjs": "~6.3.3",
30 | "tslib": "^1.9.0",
31 | "zone.js": "~0.8.26"
32 | },
33 | "devDependencies": {
34 | "@angular-devkit/build-angular": "~0.11.0",
35 | "@angular/cli": "~7.1.0",
36 | "@angular/compiler-cli": "~7.1.0",
37 | "@angular/language-service": "~7.1.0",
38 | "@types/jasmine": "~2.8.8",
39 | "@types/jasminewd2": "~2.0.3",
40 | "@types/node": "~8.9.4",
41 | "codelyzer": "~4.5.0",
42 | "concat": "^1.0.3",
43 | "fs-extra": "^7.0.1",
44 | "jasmine-core": "~2.99.1",
45 | "jasmine-spec-reporter": "~4.2.1",
46 | "karma": "~3.1.1",
47 | "karma-chrome-launcher": "~2.2.0",
48 | "karma-coverage-istanbul-reporter": "~2.0.1",
49 | "karma-jasmine": "~1.1.2",
50 | "karma-jasmine-html-reporter": "^0.2.2",
51 | "node-gzip": "^1.1.2",
52 | "protractor": "~5.4.0",
53 | "ts-node": "~7.0.0",
54 | "tslint": "~5.11.0",
55 | "typescript": "~3.1.6"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/app/img-lazy/img-lazy.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | EventEmitter,
4 | Output,
5 | OnInit,
6 | Input,
7 | ElementRef,
8 | HostListener,
9 | ChangeDetectorRef,
10 | ChangeDetectionStrategy,
11 | ViewEncapsulation
12 | } from '@angular/core';
13 |
14 | @Component({
15 | selector: 'img-lazy',
16 | templateUrl: './img-lazy.component.html',
17 | styleUrls: ['./img-lazy.component.css'],
18 | changeDetection: ChangeDetectionStrategy.OnPush,
19 | encapsulation: ViewEncapsulation.ShadowDom
20 | })
21 | export class ImgLazyComponent implements OnInit {
22 | @Input() src;
23 | @Input() alt;
24 |
25 | @Output() isVisible = new EventEmitter();
26 |
27 | // Immutable object, only modify with setState
28 | state = {
29 | visible: false,
30 | loaded: false
31 | };
32 |
33 | constructor(private el: ElementRef, private cd: ChangeDetectorRef) {}
34 |
35 | private setState(key, value) {
36 | this.state = { ...this.state, [key]: value };
37 | this.cd.detectChanges();
38 | }
39 |
40 | private calcVisibility() {
41 | const rect = this.el.nativeElement.getBoundingClientRect().top;
42 | if (rect <= window.innerHeight && !this.state.visible) {
43 | this.setState('visible', true);
44 | this.customEmit(true);
45 | }
46 | }
47 |
48 | ngOnInit() {
49 | this.calcVisibility();
50 | }
51 |
52 | @HostListener('window:scroll', ['$event'])
53 | onscroll(e) {
54 | this.calcVisibility();
55 | }
56 |
57 | onLoad() {
58 | setTimeout(() => {
59 | this.setState('loaded', true);
60 | }, 2000);
61 | }
62 |
63 | // Making public methods
64 | @Input()
65 | public log = () => {
66 | const state = this.state;
67 | console.log(state);
68 | }
69 |
70 | // Custom Events
71 | private customEmit(val) {
72 | this.isVisible.emit(val);
73 | const domEvent = new CustomEvent('is-visible');
74 | this.el.nativeElement.dispatchEvent(domEvent);
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-redundant-jsdoc": true,
69 | "no-shadowed-variable": true,
70 | "no-string-literal": false,
71 | "no-string-throw": true,
72 | "no-switch-case-fall-through": true,
73 | "no-trailing-whitespace": true,
74 | "no-unnecessary-initializer": true,
75 | "no-unused-expression": true,
76 | "no-use-before-declare": true,
77 | "no-var-keyword": true,
78 | "object-literal-sort-keys": false,
79 | "one-line": [
80 | true,
81 | "check-open-brace",
82 | "check-catch",
83 | "check-else",
84 | "check-whitespace"
85 | ],
86 | "prefer-const": true,
87 | "quotemark": [
88 | true,
89 | "single"
90 | ],
91 | "radix": true,
92 | "semicolon": [
93 | true,
94 | "always"
95 | ],
96 | "triple-equals": [
97 | true,
98 | "allow-null-check"
99 | ],
100 | "typedef-whitespace": [
101 | true,
102 | {
103 | "call-signature": "nospace",
104 | "index-signature": "nospace",
105 | "parameter": "nospace",
106 | "property-declaration": "nospace",
107 | "variable-declaration": "nospace"
108 | }
109 | ],
110 | "unified-signatures": true,
111 | "variable-name": false,
112 | "whitespace": [
113 | true,
114 | "check-branch",
115 | "check-decl",
116 | "check-operator",
117 | "check-separator",
118 | "check-type"
119 | ],
120 | "no-output-on-prefix": true,
121 | "use-input-property-decorator": true,
122 | "use-output-property-decorator": true,
123 | "use-host-property-decorator": true,
124 | "no-input-rename": true,
125 | "no-output-rename": true,
126 | "use-life-cycle-interface": true,
127 | "use-pipe-transform-interface": true,
128 | "component-class-suffix": true,
129 | "directive-class-suffix": true
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /**
38 | * If the application will be indexed by Google Search, the following is required.
39 | * Googlebot uses a renderer based on Chrome 41.
40 | * https://developers.google.com/search/docs/guides/rendering
41 | **/
42 | // import 'core-js/es6/array';
43 |
44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
45 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
46 |
47 | /** IE10 and IE11 requires the following for the Reflect API. */
48 | // import 'core-js/es6/reflect';
49 |
50 | /**
51 | * Web Animations `@angular/platform-browser/animations`
52 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
53 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
54 | **/
55 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
56 |
57 | /**
58 | * By default, zone.js will patch all possible macroTask and DomEvents
59 | * user can disable parts of macroTask/DomEvents patch by setting following flags
60 | */
61 |
62 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
63 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
64 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
65 |
66 | /*
67 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
68 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
69 | */
70 | // (window as any).__Zone_enable_cross_context_check = true;
71 |
72 | /***************************************************************************************************
73 | * Zone JS is required by default for Angular itself.
74 | */
75 | import 'zone.js/dist/zone'; // Included with Angular CLI.
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Elems
6 |
7 |
8 |
9 |
10 |
11 |
12 | My Angular Elements Powered Blog ⚡
13 |
14 |
15 |
16 |
20 | Horse
21 | Horses are rad!
22 |
23 |
24 |
25 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
26 | ligula eget dolor. Aenean massa strong.
27 |
28 |
29 |
30 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
31 | ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
32 | quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
33 | vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
34 | imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
35 | link mollis pretium. Integer
36 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
37 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
38 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
39 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
40 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
41 | ullamcorper ultricies nisi.
42 |
43 |
44 |
45 |
46 |
47 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
48 | ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
49 | quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
50 | vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
51 | imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
52 | link mollis pretium. Integer
53 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
54 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
55 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
56 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
57 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
58 | ullamcorper ultricies nisi.
59 |
60 |
61 |
65 |
66 |
67 |
68 | ct magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
69 | ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
70 | quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
71 | arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
72 | Nullam dictum felis eu pede
73 | link mollis pretium. Integer
74 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
75 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
76 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
77 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
78 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
79 | ullamcorper ultricies nisi.
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
14 |
15 |
16 |
17 |
18 |
19 | My Angular Elements Powered Blog ⚡
20 |
21 |
22 |
23 |
27 | Horse
28 | Horses are rad!
29 |
30 |
31 |
32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
33 | ligula eget dolor. Aenean massa strong.
34 |
35 |
36 |
37 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
38 | ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
39 | quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
40 | vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
41 | imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
42 | link mollis pretium. Integer
43 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
44 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
45 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
46 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
47 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
48 | ullamcorper ultricies nisi.
49 |
50 |
51 |
52 |
53 |
54 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
55 | ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
56 | quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
57 | vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
58 | imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
59 | link mollis pretium. Integer
60 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
61 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
62 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
63 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
64 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
65 | ullamcorper ultricies nisi.
66 |
67 |
68 |
72 |
73 |
74 |
75 | ct magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
76 | ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
77 | quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
78 | arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
79 | Nullam dictum felis eu pede
80 | link mollis pretium. Integer
81 | tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
82 | eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
83 | eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
84 | a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
85 | rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
86 | ullamcorper ultricies nisi.
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "elements": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/elements",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": [
29 | {
30 | "input": "node_modules/document-register-element/build/document-register-element.js"
31 | },
32 | {
33 | "input": "node_modules/document-register-element/build/document-register-element.js"
34 | },
35 | {
36 | "input": "node_modules/document-register-element/build/document-register-element.js"
37 | },
38 | {
39 | "input": "node_modules/document-register-element/build/document-register-element.js"
40 | }
41 | ]
42 | },
43 | "configurations": {
44 | "production": {
45 | "fileReplacements": [
46 | {
47 | "replace": "src/environments/environment.ts",
48 | "with": "src/environments/environment.prod.ts"
49 | }
50 | ],
51 | "optimization": true,
52 | "outputHashing": "all",
53 | "sourceMap": false,
54 | "extractCss": true,
55 | "namedChunks": false,
56 | "aot": true,
57 | "extractLicenses": true,
58 | "vendorChunk": false,
59 | "buildOptimizer": true,
60 | "budgets": [
61 | {
62 | "type": "initial",
63 | "maximumWarning": "2mb",
64 | "maximumError": "5mb"
65 | }
66 | ]
67 | }
68 | }
69 | },
70 | "serve": {
71 | "builder": "@angular-devkit/build-angular:dev-server",
72 | "options": {
73 | "browserTarget": "elements:build"
74 | },
75 | "configurations": {
76 | "production": {
77 | "browserTarget": "elements:build:production"
78 | }
79 | }
80 | },
81 | "extract-i18n": {
82 | "builder": "@angular-devkit/build-angular:extract-i18n",
83 | "options": {
84 | "browserTarget": "elements:build"
85 | }
86 | },
87 | "test": {
88 | "builder": "@angular-devkit/build-angular:karma",
89 | "options": {
90 | "main": "src/test.ts",
91 | "polyfills": "src/polyfills.ts",
92 | "tsConfig": "src/tsconfig.spec.json",
93 | "karmaConfig": "src/karma.conf.js",
94 | "styles": [
95 | "src/styles.css"
96 | ],
97 | "scripts": [],
98 | "assets": [
99 | "src/favicon.ico",
100 | "src/assets"
101 | ]
102 | }
103 | },
104 | "lint": {
105 | "builder": "@angular-devkit/build-angular:tslint",
106 | "options": {
107 | "tsConfig": [
108 | "src/tsconfig.app.json",
109 | "src/tsconfig.spec.json"
110 | ],
111 | "exclude": [
112 | "**/node_modules/**"
113 | ]
114 | }
115 | }
116 | }
117 | },
118 | "elements-e2e": {
119 | "root": "e2e/",
120 | "projectType": "application",
121 | "prefix": "",
122 | "architect": {
123 | "e2e": {
124 | "builder": "@angular-devkit/build-angular:protractor",
125 | "options": {
126 | "protractorConfig": "e2e/protractor.conf.js",
127 | "devServerTarget": "elements:serve"
128 | },
129 | "configurations": {
130 | "production": {
131 | "devServerTarget": "elements:serve:production"
132 | }
133 | }
134 | },
135 | "lint": {
136 | "builder": "@angular-devkit/build-angular:tslint",
137 | "options": {
138 | "tsConfig": "e2e/tsconfig.e2e.json",
139 | "exclude": [
140 | "**/node_modules/**"
141 | ]
142 | }
143 | }
144 | }
145 | }
146 | },
147 | "defaultProject": "elements"
148 | }
--------------------------------------------------------------------------------