Skip to content

Commit 2e145db

Browse files
marianocodesmarianocodes
committed
enable elements in angular and react projects
1 parent f5d143f commit 2e145db

File tree

12 files changed

+308
-514
lines changed

12 files changed

+308
-514
lines changed

‎angular.json‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
"scripts": [
3333
{
3434
"input": "node_modules/document-register-element/build/document-register-element.js"
35-
}
35+
},
36+
"dist/ngelements/main.js"
3637
]
3738
},
3839
"configurations": {
@@ -153,7 +154,10 @@
153154
"styles": [
154155
"apps/reactapp/src/styles.scss"
155156
],
156-
"scripts": []
157+
"scripts": [
158+
"dist/ngelements/polyfills.js",
159+
"dist/ngelements/main.js"
160+
]
157161
},
158162
"configurations": {
159163
"production": {
@@ -250,10 +254,26 @@
250254
"prefix": "ngelements",
251255
"architect": {
252256
"build": {
253-
"builder": "@angular-devkit/build-ng-packagr:build",
257+
"builder": "ngx-build-plus:build",
254258
"options": {
255-
"tsConfig": "libs/core/tsconfig.lib.json",
256-
"project": "libs/core/ng-package.json"
259+
"outputPath": "dist/ngelements",
260+
"index": "libs/core/src/lib/index.html",
261+
"main": "libs/core/src/lib/elements.ts",
262+
"polyfills": "libs/core/src/lib/polyfills.ts",
263+
"tsConfig": "libs/core/tsconfig.lib.json"
264+
},
265+
"configurations": {
266+
"production": {
267+
"optimization": true,
268+
"outputHashing": "all",
269+
"sourceMap": false,
270+
"extractCss": true,
271+
"namedChunks": false,
272+
"aot": true,
273+
"extractLicenses": true,
274+
"vendorChunk": false,
275+
"buildOptimizer": true
276+
}
257277
}
258278
},
259279
"lint": {
@@ -302,4 +322,4 @@
302322
}
303323
},
304324
"defaultProject": "angularapp"
305-
}
325+
}

‎apps/angularapp/src/app/app.component.html‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,4 @@
1-
<div style="text-align:center">
2-
<h1>Welcome to {{ title }}!</h1>
3-
<img
4-
width="450"
5-
src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
6-
/>
7-
</div>
8-
9-
<p>This is an Angular app built with <a href="https://nx.dev">Nx</a>.</p>
10-
<p>🔎 **Nx is a set of Angular CLI power-ups for modern development.**</p>
11-
12-
<h2>Quick Start & Documentation</h2>
13-
14-
<ul>
15-
<li>
16-
<a href="https://nx.dev/getting-started/what-is-nx"
17-
>30-minute video showing all Nx features</a
18-
>
19-
</li>
20-
<li>
21-
<a href="https://nx.dev/tutorial/01-create-application"
22-
>Interactive tutorial</a
23-
>
24-
</li>
25-
</ul>
1+
<ui-nav>
2+
<img src="https://github.com/mahcr/angular-elements/blob/master/assets/ng-horizontal.png?raw=true" slot="logo-angular" />
3+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/assets/gdg-pv.png" slot="logo-gdg" />
4+
</ui-nav>

‎apps/angularapp/src/app/app.component.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
main {
2+
text-align: center;
3+
}
4+
5+
.list {
6+
align-items: center;
7+
display: flex;
8+
justify-content: center;
9+
}
10+
11+
ui-footer {
12+
bottom: 0;
13+
left: 0;
14+
position: fixed;
15+
right: 0;
16+
width: 100%;
17+
}

‎apps/angularapp/src/app/app.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { BrowserModule } from '@angular/platform-browser';
2-
import { NgModule } from '@angular/core';
1+
import { BrowserModule, } from '@angular/platform-browser';
2+
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
55

66
@NgModule({
77
declarations: [AppComponent],
88
imports: [BrowserModule],
99
providers: [],
10+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1011
bootstrap: [AppComponent]
1112
})
1213
export class AppModule {}

‎apps/reactapp/src/app/app.tsx‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,10 @@ import './app.scss';
55
export const App = () => {
66
return (
77
<div>
8-
<header style={{ textAlign: 'center' }}>
9-
<h1>Welcome to reactapp!</h1>
10-
<img
11-
width="450"
12-
src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
13-
/>
14-
</header>
15-
<p>
16-
This is a React app built with <a href="https://nx.dev">Nx</a>.
17-
</p>
18-
<p>🔎 **Nx is a set of Angular CLI power-ups for modern development.**</p>
19-
<h2>Quick Start & Documentation</h2>
20-
<ul>
21-
<li>
22-
<a href="https://nx.dev/getting-started/what-is-nx">
23-
30-minute video showing all Nx features
24-
</a>
25-
</li>
26-
<li>
27-
<a href="https://nx.dev/tutorial/01-create-application">
28-
Interactive tutorial
29-
</a>
30-
</li>
31-
</ul>
8+
<ui-nav>
9+
<img src="https://github.com/mahcr/angular-elements/blob/master/assets/ng-horizontal.png?raw=true" slot="logo-angular" />
10+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/assets/gdg-pv.png" slot="logo-gdg" />
11+
</ui-nav>
3212
</div>
3313
);
3414
};

‎apps/reactapp/src/intrinsic.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare namespace JSX {
2+
interface IntrinsicElements {
3+
[elemName: string]: any;
4+
}
5+
}

‎libs/core/src/lib/elements.module.ts‎

Whitespace-only changes.

‎libs/core/src/lib/elements.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import { CoreModule } from './core.module';
3+
4+
platformBrowserDynamic()
5+
.bootstrapModule(CoreModule)
6+
.catch(err => console.log(err));

‎libs/core/src/lib/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Custom Elements</title>
6+
<base href="/" />
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
</head>
10+
<body>
11+
<ui-menu></ui-menu>
12+
<ui-footer></ui-footer>
13+
<ui-socialcard></ui-socialcard>
14+
</body>
15+
</html>

‎libs/core/src/lib/polyfills.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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/docs/ts/latest/guide/browser-support.html
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+
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
38+
// import 'classlist.js'; // Run `npm install --save classlist.js`.
39+
40+
/** IE10 and IE11 requires the following for the Reflect API. */
41+
// import 'core-js/es6/reflect';
42+
43+
/** Evergreen browsers require these. **/
44+
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45+
import 'core-js/es7/reflect';
46+
47+
/**
48+
* Web Animations `@angular/platform-browser/animations`
49+
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
50+
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
51+
**/
52+
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
53+
54+
/**
55+
* By default, zone.js will patch all possible macroTask and DomEvents
56+
* user can disable parts of macroTask/DomEvents patch by setting following flags
57+
*/
58+
59+
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
60+
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
61+
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
62+
63+
/*
64+
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
65+
* with the following flag, it will bypass `zone.js` patch for IE/Edge
66+
*/
67+
// (window as any).__Zone_enable_cross_context_check = true;
68+
69+
/***************************************************************************************************
70+
* Zone JS is required by default for Angular itself.
71+
*/
72+
import 'zone.js/dist/zone'; // Included with Angular CLI.
73+
74+
/***************************************************************************************************
75+
* APPLICATION IMPORTS
76+
*/
77+
// import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

0 commit comments

Comments
 (0)