Can we load multiple sources on iron-component-page for generating the demo DOCS.
For Example:
<iron-component-page sources='["page1.html", "page2.html","page3.html"]'></iron-component-page>
Thanks in Advance.
Create a file all-imports.html and then use it in src attribute of index.html file
all-imports.html
<link rel="import" href="page1.html">
<link rel="import" href="page2.html">
<link rel="import" href="page3.html">
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>paper-input</title>
<script src="<>/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="<>/iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="all-imports.html"></iron-component-page>
</body>
</html>
Take inspiration from the "components/paper-input" package, which includes "paper-input" element, but "paper-input-container", "paper-input-behavior"... as well.
You'll have to replace your desired sources='["page1.html", "page2.html","page3.html"]' with the well-documented src attribute referring to a brand-new file all-imports.html in this way
yourpage.html
...
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
...
<iron-component-page src="all-imports.html"></iron-component-page>
...
therefore referring your ["page1.html", "page2.html","page3.html"] source array, through a single-line-link file
all-imports.html
<link rel="import" href="page1.html">
<link rel="import" href="page2.html">
<link rel="import" href="page3.html">
Similarly to what Srik yet wrote.
NB: the upper left corner element drop-down, will likely appear page-children elements documentation too (in any)..
Related
I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.
I am using AngularJS and trying to use the angularJS material datepicker. I have been following the tutorial video at https://egghead.io/lessons/angularjs-angular-material-containers-with-the-layout-api
However, I keep getting this error and dont know why?
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=kg-App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fmodulerr%3Fp0%3DngMaterial%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.9%252F%2524injector%252Fnomod%253Fp0%253DngMaterial%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A332%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A364%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A43%3A99%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A364%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
The error happens when I inject the ngMaterial in my app.js
angular.module('kg-App', ['ui.router','ngMaterial'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
});
I followed the video and have all the scripts that I need
<!DOCTYPE html>
<html ng-app="kg-App">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KG Strength</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">
<link type="text/html" rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" href="./stylesheets/main.css">
<link rel="stylesheet" href="./stylesheets/newform.css">
<link rel="stylesheet" href="./stylesheets/admin.css">
<link rel="stylesheet" href="./stylesheets/nextsession.css">
</head>
<body>
<header-template></header-template>
<image-template></image-template>
<footer-template></footer-template>
<ui-view autoscroll='true'></ui-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/html" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/html" src="node_modules/angular-aria/angular-aria.min.js"></script>
<script type="text/html" src="node_modules/angular-messages/angular-messages.min.js"></script>
<script type="text/html" src="node_modules/angular-material/angular-material.min.js"></script>
<script src="./javascripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Please help
Move the jquery.js script reference before angular.js (important, because angular.js use it internally )
in the App.js, add a dependance to ngMessages !
angular.module('kg-App', ['ui.router','ngMaterial', 'ngMessages'])
Also take a look to enter link description here (the video you looked seem outdated)
I am not much familiar with angularjs+blade template mixing. The blade template of laravel is not rendering ng-include (angularjs) html files. Or is it necessary to convert all included html to blade file as well? With core PHP it was not an issue. What could be the way to work in this situation?
<title>{{ config('app.name', 'Nepstralia')}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="assets/css/Footer-with-map.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<ng-include src="'nav.html'"> </ng-include>
<!-- <div id="toptarget"> </div><br> -->
<ng-include src="'carousel.html'"> </ng-include>
Non of the ng-included are loading in the blade template. How to use angular ng-include with blade ?
first you must declare angular app by ng-app then try follwing:
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="assets/css/Footer-with-map.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-app>
<div ng-include="'nav.html'"> </div>
<!-- <div id="toptarget"> </div><br> -->
<div ng-include="'carousel.html'"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
carousel.html:
<h1>123</h1>
nav.html
<h2>145</h2>
if it isn't working may be your src is wrong .
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.