Skip to content

Commit f38269e

Browse files
sulcosulco
committed
demo component
1 parent 0a9a25e commit f38269e

15 files changed

+242
-181
lines changed

‎README.md

+6-23
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,10 @@
1-
# Angular6Elements
1+
# Web Components with Angular 6 Elements
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
3+
Built from a default Angular CLI setup
44

5-
## Development server
5+
Commands:
66

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
7+
* `npm run build && npm run package-elements` to create a build of a sample component
8+
* `npm run serve` to run a http-server with example usage (click the button, watch the devtools console)
89

9-
## Code scaffolding
10-
11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12-
13-
## Build
14-
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16-
17-
## Running unit tests
18-
19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20-
21-
## Running end-to-end tests
22-
23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24-
25-
## Further help
26-
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
10+
Read the complete walkthrough in the article: [Building Web Components with Angular Elements!](https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b)

‎angular.json

+15-27
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"root": "",
88
"sourceRoot": "src",
99
"projectType": "application",
10-
"prefix": "app",
10+
"prefix": "custom",
1111
"schematics": {},
1212
"architect": {
1313
"build": {
@@ -18,14 +18,14 @@
1818
"main": "src/main.ts",
1919
"polyfills": "src/polyfills.ts",
2020
"tsConfig": "src/tsconfig.app.json",
21-
"assets": [
22-
"src/favicon.ico",
23-
"src/assets"
24-
],
25-
"styles": [
26-
"src/styles.css"
27-
],
28-
"scripts": []
21+
"assets": ["src/favicon.ico", "src/assets"],
22+
"styles": ["src/styles.css"],
23+
"scripts": [
24+
{
25+
"input":
26+
"node_modules/document-register-element/build/document-register-element.js"
27+
}
28+
]
2929
},
3030
"configurations": {
3131
"production": {
@@ -71,26 +71,16 @@
7171
"polyfills": "src/polyfills.ts",
7272
"tsConfig": "src/tsconfig.spec.json",
7373
"karmaConfig": "src/karma.conf.js",
74-
"styles": [
75-
"styles.css"
76-
],
74+
"styles": ["styles.css"],
7775
"scripts": [],
78-
"assets": [
79-
"src/favicon.ico",
80-
"src/assets"
81-
]
76+
"assets": ["src/favicon.ico", "src/assets"]
8277
}
8378
},
8479
"lint": {
8580
"builder": "@angular-devkit/build-angular:tslint",
8681
"options": {
87-
"tsConfig": [
88-
"src/tsconfig.app.json",
89-
"src/tsconfig.spec.json"
90-
],
91-
"exclude": [
92-
"**/node_modules/**"
93-
]
82+
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
83+
"exclude": ["**/node_modules/**"]
9484
}
9585
}
9686
}
@@ -110,13 +100,11 @@
110100
"builder": "@angular-devkit/build-angular:tslint",
111101
"options": {
112102
"tsConfig": "e2e/tsconfig.e2e.json",
113-
"exclude": [
114-
"**/node_modules/**"
115-
]
103+
"exclude": ["**/node_modules/**"]
116104
}
117105
}
118106
}
119107
}
120108
},
121109
"defaultProject": "angular6-elements"
122-
}
110+
}

‎elements.js.gz

66.5 KB
Binary file not shown.

‎index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Custom Button Test Page</title>
7+
<script src="elements.js"></script>
8+
</head>
9+
10+
<body>
11+
<custom-button label="First Value"></custom-button>
12+
13+
<script>
14+
const button = document.querySelector('custom-button');
15+
button.addEventListener('action', (event) => {
16+
console.log(`"action" emitted: ${event.detail}`);
17+
})
18+
setTimeout(() => button.label = 'Second Value', 3000);
19+
20+
</script>
21+
</body>
22+
23+
</html>

‎package-lock.json

+100
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+11-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
7-
"build": "ng build",
7+
"build": "ng build --prod --output-hashing=none",
8+
"package":
9+
"cat dist/angular6-elements/{runtime,polyfills,scripts,main}.js | gzip > elements.js.gz",
10+
"serve": "http-server --gzip",
811
"test": "ng test",
912
"lint": "ng lint",
1013
"e2e": "ng e2e"
@@ -15,25 +18,27 @@
1518
"@angular/common": "^6.0.0",
1619
"@angular/compiler": "^6.0.0",
1720
"@angular/core": "^6.0.0",
21+
"@angular/elements": "^6.0.0",
1822
"@angular/forms": "^6.0.0",
1923
"@angular/http": "^6.0.0",
2024
"@angular/platform-browser": "^6.0.0",
2125
"@angular/platform-browser-dynamic": "^6.0.0",
2226
"@angular/router": "^6.0.0",
2327
"core-js": "^2.5.4",
2428
"rxjs": "^6.0.0",
25-
"zone.js": "^0.8.26"
29+
"zone.js": "^0.8.26",
30+
"document-register-element": "^1.7.2"
2631
},
2732
"devDependencies": {
28-
"@angular/compiler-cli": "^6.0.0",
2933
"@angular-devkit/build-angular": "~0.6.0",
30-
"typescript": "~2.7.2",
3134
"@angular/cli": "~6.0.0",
35+
"@angular/compiler-cli": "^6.0.0",
3236
"@angular/language-service": "^6.0.0",
3337
"@types/jasmine": "~2.8.6",
3438
"@types/jasminewd2": "~2.0.3",
3539
"@types/node": "~8.9.4",
3640
"codelyzer": "~4.2.1",
41+
"http-server": "^0.11.1",
3742
"jasmine-core": "~2.99.1",
3843
"jasmine-spec-reporter": "~4.2.1",
3944
"karma": "~1.7.1",
@@ -43,6 +48,7 @@
4348
"karma-jasmine-html-reporter": "^0.2.2",
4449
"protractor": "~5.3.0",
4550
"ts-node": "~5.0.1",
46-
"tslint": "~5.9.1"
51+
"tslint": "~5.9.1",
52+
"typescript": "~2.7.2"
4753
}
4854
}

‎src/app/app.component.css

Whitespace-only changes.

‎src/app/app.component.html

-20
This file was deleted.

‎src/app/app.component.spec.ts

-27
This file was deleted.

0 commit comments

Comments
 (0)