I was trying to run a simple page that fetches data via iron-ajax and then renders it with a given template but had litarlly no success. Then I tried to run an example page from google and it's not working for me neither. Here's the example page I'm trying to run:
<html>
<head>
<title>iron-ajax</title>
<script src="/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/iron-ajax/iron-ajax.html">
<link rel="import" href="/iron-image/iron-image.html">
<link rel="import" href="/paper-styles/classes/typography.html">
<link rel="import" href="/iron-flex-layout/classes/iron-flex-layout.html">
<style>
iron-image {
background-color: lightgray;
margin: 1em;
}
</style>
</head>
<body>
<template is="dom-bind" id="app">
<iron-ajax auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<h1>Video Feed</h1>
<section class="flex layout horizontal wrap">
<template is="dom-repeat" items="[[ajaxResponse.items]]">
<div>
<h2>[[item.snippet.title]]</h2>
<iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
<p>[[item.snippet.description]]</p>
</div>
</template>
</section>
</template>
<script>
var app = document.querySelector('#app');
app.url = function (videoId) {
return 'https://www.youtube.com/watch?v=' + videoId;
};
</script>
</body>
</html>
My bower.json contents:
{
"name": "my-first-polymer-app",
"description": "",
"main": "app.js",
"authors": [
"123"
],
"license": "MIT",
"moduleType": [],
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#1.1.0",
"flatiron-director": "Polymer/flatiron-director#~1.0.0",
"sortable-table": "~0.11.1"
}
}
I also tried import polymer.html with no change. Every import is working as I can see in a network tab in Chrome.
The actual endpoint is hit, I can see that in network tab of my chrome. Any ideas? Thanks in advance.
Related
i am following this tutorial https://www.youtube.com/watch?v=IZGNcSuwBZs&t=1265s
i have my css imported successfully as i can see in bundle file but its not effective in page can anyone help me with it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container test">
<div class="row">
<div class="col-12 col-lg-4 col-xl-3">test column.1</div>
<div class="col-12 col-lg-4 col-xl-3">test column.2</div>
<div class="col-12 col-lg-4 col-xl-3">test column.3</div>
<div class="col-12 col-lg-4 col-xl-3">test column.4</div>
<div class="col-12 col-lg-4 col-xl-3">test column.5</div>
<div class="col-12 col-lg-4 col-xl-3">test column.6</div>
</div>
</div>
</body>
<script defer src="bundle.js"></script>
</html>
webpack config
const path = require('path');
module.exports = {
mode : "production",
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
],
},
};
package json
{
"name": "getting-started-using-a-configuration",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "serve dist"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"css-loader": "^6.7.1",
"serve": "^12.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}
i believe screenshot will describe it more clearly
Is it possible to include snippets of shared HTML using Vite (vanilla)? I'm looking for a way to have the HTML prerendered without injecting via JS.
Something like:
<html>
<head>
{ include 'meta-tags' }
</head>
<body>
{ include 'nav' }
<h1>Hello World</h1>
<body>
</html>
vite-plugin-handlebars was the solution I was looking for. Partials were super easy to set up with this package:
Setup:
// vite.config.js
import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';
export default {
plugins: [
handlebars({
partialDirectory: resolve(__dirname, 'partials'),
}),
],
};
File where you want to include partial:
<!-- index.html -->
{{> header }}
<h1>The Main Page</h1>
Rendered output:
<header>My Website</header>
<h1>The Main Page</h1>
You could use the vite-plugin-html that enables EJS templates in index.html:
// vite.config.js
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
createHtmlPlugin({
entry: 'main.js',
/**
* Data that needs to be injected into the index.html ejs template
*/
inject: {
data: {
metaTags: `<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
nav: `<nav>
Google |
Apple
</nav>`,
},
},
}),
],
})
<!-- index.html -->
<html>
<head>
<%- metaTags %>
</head>
<body>
<%- nav %>
<h1>Hello World</h1>
<body>
</html>
demo
I have these scripts on my html page:
<!-- alpaca.js datetime date -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
And the code below assembles the alpaca form:
$("#form").alpaca({
"schema": {
"properties" : {
"name": {
"type":"string",
"title":"Name",
"required":true
},
"datetime": {
"title": "Datetime",
"description": "Pick your datetime.",
"format": "datetime"
}
}
},
"options": {
"fields" : {
"name": {
"type" : "text",
"size": 20
},
"datetime": {
"type": "datetime",
"picker": {
"format": "DD/MM/YYYY HH:mm:ss"
},
"manualEntry": true
}
}
}
});
But the datetime field doesn't allow me to enter the date and time
The calendar pop-up that appears is unconfigured, I can't even change the month, for example.
Do I need to do anything else for this datetime field to work properly?
I solved the problem by changing the scripts.
I accessed the showcase Alpaca page and I inspected the HTML
I discovered the scripts and I replaced them on my page.
The scripts below:
<!-- alpaca.js datetime date -->
<script type="text/javascript" src="http://www.alpacajs.org/lib/jquery-ui/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jquery-ui/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript" src="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="http://www.alpacajs.org/lib/moment/min/moment-with-locales.min.js"></script>
<script type="text/javascript" src="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.alpacajs.org/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"/>
Testing Guide I have been following it.
NOTE : I have my app running without testing part.
Problem: I'm unable to load unit-tests.html. I think problem is very small but unable to figure it out. I'm using VisualCode and when I hit F5 it runs my app only. So how to load unit-tests.html?
My setup is as follow.
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"test": "live-server --open=unit-tests.html",
//<------ I have added this as mentioned.
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
//<------ I tried to disable this line as well.
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"jasmine-core": "2.4.1",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
unit-tests.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ng App Unit Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
packages: {
'app': {defaultExtension: 'js'}
}
});
System.import('app/app.spec')
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
app.spec.ts (NOTE: within app folder, app.spec.ts is there)
it('true is true', () => expect(true).toEqual(true));
My unit-tests.html file :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Angular2 Unit Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<!--<script src="systemjs.builder.js"></script>-->
<script>
var fileList = ['sanity.spec'];
System.baseURL = 'bin/tests/';
multiImport(fileList)
.then(window.onload)
.catch(console.error.bind(console));
function multiImport(modules) {
return Promise.all(modules.map(function(m) { return System.import(m) }))
}
</script>
</body>
</html>
this makes it easy to tell system js to load multiple files
<google-chart> element is not working for me (does not display anything) when inside <template> (<template is="dom-bind"> on the main document or in other element's <template>). On the other hand it works when I put it outside <template is="dom-bind"> on the main document.
https://jsbin.com/fivamu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
</html>
Try to add spaces between the square brackets:
data='[ ["Country", "Popularity"],["Germany", 200],["France", 600],["RU", 700] ]'
This will work (tested in your jsbin):
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template id="t" is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart id='map'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
<script>
var t = document.querySelector('#t');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
console.log('ready');
var map = document.querySelector('#map');
map.setAttribute('type', 'geo');
map.setAttribute('data', '[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]');
});
</script>
</html>
The google-chart element relies on async calls to Google APIs. If these calls do not resolve before the template has stamped its DOM, the google-chart is incomplete. Adding the data field after the auto-binding template is ready will simulate the behaviour outside of a template.