fix(integrations): replace webpack documentation with Angular integra…

…tion documentation (#94) * fix(integrations): replace webpack documentation with Angular integration documentation * WIP - clarify the adding of the CUSTOM_ELEMENTS_SCHEMA
ionic-team · Nov 15, 2017 · ee26629 · ee26629
1 parent 5208af3
commit ee26629
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 116 deletions.
diff --git a/docs-md/addons/stencil-router.md b/docs-md/addons/stencil-router.md
@@ -145,7 +145,7 @@ Then we can use that `match` prop to access our data:
 const myData = this.match.params.pageNum
 ```
 
-<stencil-route-link url="/docs/webpack" router="#router" custom="true">
+<stencil-route-link url="/docs/angular-integration" router="#router" custom="true">
   <button class="backButton">
     Back
   </button>

diff --git a/docs-md/advanced/angular-integration/index.md b/docs-md/advanced/angular-integration/index.md
@@ -0,0 +1,75 @@
+# Using Stencil Built Web Components with Angular
+
+Using a Stencil built web component collection within an Angular CLI project is a three step process. We need to:
+
+1. Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components 
+1. Include the load script in `index.html`
+1. Copy the component collection during the build
+
+## Including the Custom Elements Schema
+
+Including the CUSTOM_ELEMENTS_SCHEMA in the nodule allows the use of the web components in the HTML markup without the compiler producing errors. Here is an example of adding it to `AppModule`:
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class AppModule { }
+```
+
+## Including the Load Script
+
+A component collection built with Stencil includes a main script that is used to load the components in the collection. That script needs to be loaded in your application as such:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Component Usage</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src='test-components/testcomponents.js'></script>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
+```
+
+## Copying the Components
+
+During the build, the components need to be copied to the build output directory. The easiest way to do this is to modify include the collection in the `assets` array of the `.angular-cli.json` file.
+
+```
+      "assets": [
+        "assets",
+        "favicon.ico",
+        { "glob": "**/*", "input": "../web-components/test-components", "output": "./test-components" }
+      ],
+```
+
+<stencil-route-link url="/docs/distribution" router="#router" custom="true" class="backButton">
+  Back
+</stencil-route-link>
+
+<stencil-route-link url="/docs/routing" custom="true" class="nextButton">
+  Next
+</stencil-route-link>
diff --git a/docs-md/advanced/distribution/index.md b/docs-md/advanced/distribution/index.md
@@ -70,7 +70,7 @@ The first step for all three of these strategies is to
   </button>
 </stencil-route-link>
 
-<stencil-route-link url="/docs/webpack" custom="true">
+<stencil-route-link url="/docs/angular-integration" custom="true">
   <button class="nextButton">
     Next
   </button>

diff --git a/docs-md/advanced/webpack/index.md b/docs-md/advanced/webpack/index.md
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -28,10 +28,8 @@ declare global {
   }
   namespace JSXElements {
       export interface AppMarkedAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
-          doc?: string
+          doc?: any
       }
   }
 }
@@ -58,8 +56,6 @@ declare global {
   }
   namespace JSXElements {
       export interface DemosPageAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -87,8 +83,6 @@ declare global {
   }
   namespace JSXElements {
       export interface DocumentComponentAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
           pages?: any
       }
@@ -117,8 +111,6 @@ declare global {
   }
   namespace JSXElements {
       export interface LandingPageAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -146,11 +138,9 @@ declare global {
   }
   namespace JSXElements {
       export interface LazyIframeAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
-          src?: string,
-          title?: string
+          src?: any,
+          title?: any
       }
   }
 }
@@ -177,8 +167,6 @@ declare global {
   }
   namespace JSXElements {
       export interface PwasPageAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -206,8 +194,6 @@ declare global {
   }
   namespace JSXElements {
       export interface ResourcesPageAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -235,8 +221,6 @@ declare global {
   }
   namespace JSXElements {
       export interface SiteHeaderAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -264,8 +248,6 @@ declare global {
   }
   namespace JSXElements {
       export interface SiteMenuAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }
@@ -293,8 +275,6 @@ declare global {
   }
   namespace JSXElements {
       export interface StencilSiteAttributes extends HTMLAttributes {
-          mode?: string,
-          color?: string,
 
       }
   }

diff --git a/src/components/site-menu/site-menu.tsx b/src/components/site-menu/site-menu.tsx
@@ -125,8 +125,8 @@ export class SiteMenu {
                 </stencil-route-link>
               </li>
               <li>
-                <stencil-route-link url="/docs/webpack">
-                  Webpack
+                <stencil-route-link url="/docs/angular-integration">
+                  Angular Integration
                 </stencil-route-link>
               </li>
             </ul>

diff --git a/src/components/stencil-site/stencil-site.tsx b/src/components/stencil-site/stencil-site.tsx
@@ -44,7 +44,7 @@ export class App {
                   'routing': 'addons/stencil-router.html',
                   'service-workers': 'advanced/service-worker/index.html',
                   'distribution': 'advanced/distribution/index.html',
-                  'webpack': 'advanced/webpack/index.html',
+                  'angular-integration': 'advanced/angular-integration/index.html',
                   'prerendering': 'advanced/pre-rendering/index.html',
                   'shadow-dom': 'advanced/shadow-dom/index.html'
                 };