I want to use webcomponents and HTML import to import an angular2 module into another webapplication which do not use angular2. I know HTML import is only natively supported in few browsers but i will use the polymer framework to pollify other browsers.
I can import the angular app but i'm unable to pass parameters to the angular app from my web app that imports the angular app. I'm trying this:
<dom-module id="sale-stats">
<link rel="import" href="../bower_components/polymer/polymer.html">
<template>
<!-- contains my angular app bundled js files -->
<link rel="import" href="imports.html">
{{saleid}} <!-- this displays the saleid just to see that the parameter is passed to the webcomponent -->
<app-root saleid='{{saleid}}'>Loading... </app-root>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'sale-stats',
properties: {
saleid: {
type: String,
value: '0'
}
},
});
});
</script>
</dom-module>
<script src="/Scripts/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://localhost:9600/salestats/index.html" />
<sale-stats saleid="1234567"></sale-stats>
How do i pass parameters to my angular app when using the angular app as a webcomponent that is imported into another app? Or is it just completely wrong to try and import an angular app as an webcomponent?
In order to polyfill HTML Imports, you just have to include HTMLImports.js which is available in the webcomponents.js repository. You can install it with bower (or npm):
bower install webcomponentsjs
Just include the polyfill before the <link> element:
<script src=".../bower_components/webcomponentsjs/HTMLImports.js"></script>
To wait for the imported file to be loaded, you can use the Promise, or instead wait for the standard onload event. For example:
<script src=".../bower_components/webcomponentsjs/HTMLImports.js"></script>
<link rel="import" href="imports.html" onload="run( 1234567 )">
Inside the imported HTML file:
<!-- contains my angular app bundled js files -->
<script>
function run ( id )
{
var app = document.createElement( 'app-root' )
app.setAttribute( 'saleid', id )
document.body.appendChild( app )
}
</script>
Notes: you can also place the onload callback function in the main document. Also, the import is synchronous on native implementation (Chrome and Opera); use async in <link> if you don't want to block the parsing.
Related
I am looking for a clean solution to split web components into JS, HTML and CSS files and host them on a CDN. I try to avoid the webpack html and css-loader as they dont allow me to export my web component as a plain ES module.
The goal is to use a web component from any frontend app just by importing it from a spcified URL. Thereby seperation of concerns should be preserved. Individual files for style, markup and logic also allow for syntax highlighting.
In a local dev environment I found the following to work great:
WebComponent.js:
export default class WebComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
const style = new CSSStyleSheet();
const template = document.createElement("template");
fetch("./WebComponent.css").then((res) =>
res.text().then((css) => {
style.replaceSync(css);
this.shadowRoot.adoptedStyleSheets = [style];
})
);
fetch("./WebComponent.html").then((res) =>
res.text().then((html) => {
template.innerHTML = html;
this.shadowRoot.appendChild(template.content.cloneNode(true));
})
);
}
}
WebComponent.css:
button {
/* Some styling */
}
WebComponent.html:
<button>Custom buttom</button>
I can import the component by using browser native ES module imports:
index.html:
<!DOCTYPE html>
<html>
<body>
<web-component></web-component>
<script type="module">
import WebComponent from "./WebComponent";
customElements.define("web-component", WebComponent);
</script>
</body>
</html>
This works until I move the web component files to a different location (a google cloud storage bucket) than my index.html and import WebComponent.js from there.
<!DOCTYPE html>
<html>
<body>
<web-component></web-component>
<script type="module">
import WebComponent from "https://storage.googleapis.com/storage-bucket/WebComponent.js";
customElements.define("web-component", WebComponent);
</script>
</body>
</html>
WebComponent.js gets imported correctly but it then tries to fetch WebComponent.css and WebComponent.html from a URL relative to localhost where index.html is served. However it should fetch from a URL relative to where it is hosted (https://storage.googleapis.com/storage-bucket/).
Any ideas how something like that can be achieved? Without hard coding the url into both fetch calls. That's not an option as the url can change automatically from time to time.
You are having issue with linking resources in the JS web page for which :
local component is working
import WebComponent from "./WebComponent";
remote component is failing
import WebComponent from "URL";
It might be that for this to work you should try this :
<script type="module" src="https://storage.googleapis.com/storage-bucket/WebComponent.js">
customElements.define("web-component", WebComponent);
</script>
References :
https://cloud.google.com/storage/docs/hosting-static-website
https://www.npmjs.com/package/webcomponent?activeTab=readme
https://lit-element.polymer-project.org/guide/use
JavaScript file paths are relative to the displayed page. So the behavior you are observing is expected.
You can use a JavaScript variable with a simple js declaration like below and use this variable across whenever you assign URLs dynamically:
<script type="text/javascript">
var webComponentPath = 'https://storage.googleapis.com/storage-bucket/';
</script>
I'm using the Vue CLI and I want to import a JavaScript file that is hosted on another server. With everything I tried I get the same error as shown below.
How can I solve this problem? How can I import an external JS file?
My Vue file is shown below.
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<p>Test</p>
<button #click="doSomething">Say hello.</button>
</div>
</template>
<script>
import TestFile from "https://.../src/TestFile.js";
export default {
data() {
return {
message: "<h1>anything</h1>"
}
},
async mounted() {
await TestFile.build();
},
methods: {
doSomething() {
alert(message);
},
},
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
</style>
You cannot use import to fetch the modules from the URL, but there is a trick that you can do to use the scripts from the URL.
It's similar to attaching CDNJS's script. The solution is that you need to create the element and then append that element in the document's script.
The best solution would be, use a mounted lifecycle and then create and append it.
Example Importing FontAwesome CDN Script:
mounted() {
let fontAwesome = document.createElement('script')
fontAwesome.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js')
document.head.appendChild(fontAwesome)
},
In this way registering script will give you your functions access in global object window.
For example, now I can access some of the cool properties of FontAwesome like this:
window.FontAwesome.config
I'm a newbie with Angular framework. While I trying to create a HTML template using Angular version 7. I fall in to a problem about javascript library. My template has a lot a page such as home, about, product, etc... At a home page, I need to display a slide using jquery.slidey.js library. I'm using script tag to add the library into home.component.html but the library is not loaded. So the question is How can add a external javascript into a specific Angular component. Thanks in advance
You can see all my source at My GitHub source code
See this. The link shows how to install, setup, and import JQuery library into an Angular project with details and images you can easily follow. There is also a working demo in at the bottom.
This is how I resolved it.
Index.html
<head>
...
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
HomeComponent.ts
import { Component, OnInit } from '#angular/core'
declare var $: any;
export class HomeComponent implements OnInit {
constructor(private appService: AppService) { }
ngOnInit() {
}
doSomething() {
$("p").hide(); //example
}
}
First, install this package npm install jquery-slider
Now, open angular.json file & add below styles & scripts.
"styles": [
"./node_modules/jquery-slider/..CSS File Path",
],
"scripts": [
"./node_modules/jquery-slider/...JS File Path"
]
I'm creating a polymer datepicker using pikaday. Sadly it seems like I got something wrong.
I'd like to import pikaday.js and pikaday.css the right way.
At first I had a simple script-tag below my closing dom-module-tag, like
</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
Polymer({
//....
This way, the datepicker was created as expected. But after reading this SO-Thread I was under the impression I was supposed to import the js-file like this:
<link rel="import" href="../../paper-input/paper-input-behavior.html">
<link rel="import" href="../../paper-input/paper-input-error.html">
<link rel="import" href="../../pikaday/pikaday.js">
//more imports....
But after "fixing" my import, the file pikaday.js seems not to be visible from inside my component:
Uncaught ReferenceError: Pikaday is not defined
Furthermore I'm confused about using external css. After reading this guide it seems like I was supposed to copy & paste the contents of the provided css-file into a my-datepicker-style.html and to import it into my template like this:
<dom-module id="my-datepicker">
<template>
<style include="my-datepicker-style"></style>
<style>
:host {
//more css
I'm confused about the need to copy & paste existing code.
Until ES6 imports are more common, you need some kind of workaround for referencing dependencies.
The problem with <script> tag is that when it appears multiple times, it will be processed multiple times. This is not true for <link rel="import">. Same href will be processed only once.
You cannot, however, import javascript directly. The trick is to create pikaday-import.html file with the script reference
<script src="../../pikaday/pikaday.js"></script>
You then import that in your element's html
<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>
This is the technique for example the <marked-element> uses.
This way instances of <my-datepicker> load pickaday only once. Unfortunately, if there are other components which reference it, you could end up loading the dependency multiple times.
How can I import core elements and paper elements in JSFiddle.
I'm importing polymer through those statements:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>
How can import for example core-input or paper-input?
Yes from the polymer project site or I guess your cloudflare cdn if you know the location
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
This is just for dev and not production.
If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.
Also you can get a link for all core or paper elements from here
A good alternative - still a work in progress - is https://ele.io/
Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.
To test a simple component written in Polymer 1.0 I use this snippet:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
//...
}
});
</script>
<proto-element></proto-element>
http://jsfiddle.net/MartyIX/84b5sabw/