I was trying to export an angular element to use it in an arbitrary non framework project. You can export everything but nothing really happens when you import the script. But if you follow some guides out there they use a application instead it works, but it is basically a whole angular app running in a webcomponent wrapper. I am trying to bring angular packages and have it loaded as a library, not sure it is even possible.
ex1: https://medium.com/#smarth55/angular-elements-use-them-everywhere-including-your-angular-app-697f8e51e08d
ex2: https://medium.com/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b
When I exported a similar sample but from a library I can use it within any other angular app. Just by adding CUSTOM_ELEMENTS_SCHEMA. But importing the custom element to any non framework project nothing happens, the script is loaded but the custom element is blank. Are there extra steps to be able to use angular elements outside of angular that are exported from a lib? I would like to avoid custom builders like ngx-build-plus.
<!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>
<script src="https://unpkg.com/rxjs#6.5.4/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/#angular/core#9.1.13/bundles/core.umd.js"></script>
<script src="https://unpkg.com/#angular/elements#9.1.13/bundles/elements.umd.js"></script>
<script src="/my-lib-element/dist/my-lib-elem/bundles/my-lib-elem.umd.js"></script>
</head>
<body>
<!-- script runs and is imported without errors but the element below does nothing -->
<my-elem-cpt></my-elem-cpt>
<!-- and yes the name is correct but it seems the lib never registers the element in the browser -->
</body>
</html>
Does anyone have any clue if this possible?
Related
I wanted to load a survey widget in the react project, where I create and execute the script in the head after dom gets loaded. But it is unable to generate its poll HTML.
Here is react demo in codesandbox
If I load the same script inside the specific element in the body without react env it works, here it's demo in jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Polldaddy Title</h1>
<div id="pollDaddyInfo">
<p>Poll should generate below this statememt</p>
<script charset="utf-8" src="https://static.polldaddy.com/p/10962229.js"></script>
</div>
<h1>Polldaddy End</h1>
</body>
</html>
Help me to identify what could possibly go wrong?
There is nothing wrong with your implementation in either scenario (i.e. with and without react environment).
Actually, in react environment you're loading the script which is async operation and an script that is loaded asynchronously cannot write on the document with document.write which is happening here
For supporting my argument here is another thread on stack overflow
I have on one side an existing website, on the other I have an Angular 7 application component.
I'd like to edit my existing someusecase.html and reuse my Angular 7 application like so e.g.
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to import Angular 7 App?</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
What would I need to include in the html for this to work? I'm after e.g. something equivalent to:
<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>
In other words, is it possible to reuse and activate an Angular 7 Application within a <div> scope inside an existing webpage?
1) Run
ng build
2) got into the dist folder
3) Copy & paste all of the files there, to your original app, except for the index.html file.
4) Open the not-copied index.html file
5) Copy all of the <script> tags in this file, into your someusecase.html file, at the same spot.
6) use your app component selector wherever you want your angular application to be displayed.
Note that this is only informational : in real life, this should be automated, because you would have to do this manipulation on every build.
I don't have a direct access to the code itself right now, But I've got some client whose website was developed in angularjs, and all the code gives an output on the DOM (I can see the pages with all the elements and everything is loaded just fine), but when I tried to make a crawling test via Google - it looked like the website wasn't scanned yet, even though it's been already a month.. and then I saw something weird - that when I 'view source' the pages themselves, all I get is this piece of code -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="ahrefs-site-verification" content="xxxyyy">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.32f34f185b7564580e93.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script type="text/javascript" src="runtime.34e0ced836cdde276d53.js"></script><script type="text/javascript" src="polyfills.700c13e3feb6da6eca5f.js"></script><script type="text/javascript" src="main.e89588fe3aa7c32000ef.js"></script></body>
<script src="https://wchat.freshchat.com/js/widget.js" async=""></script>
</html>
I guess the problem is happening in these lines -
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
Do you have at least any speculation why this might happen?
Since you're dealing with a SPA, SEO is not that straightforward. Google crawls your index.html which contains the app-root of your Angular app and my experience is that it will not execute the JS which contains your SPA routes. Your only options for optimizing SEO in SPA's is prerendering your routes, through an external service like Prerender.io or create your own prerender or use a Server Side Rendering technology for your SPA.
Since you are using Angular you should take a look at Angular Universal.
edit: if you don't want the complete hassle of prerendering all your routes but just want an acceptable result in Google for your index.html at least set a proper title tag <title>Proper Title - Wonderful website</title> and the meta description tag <meta name="description" content="Description of max 160 chars">
You might try Inspect Element instead of View Source
I don't know whether the project has been deployed in dev mode or production mode but doing an Inspect element will help you to access the DOM elements.
You can check this article to understand the difference between view source and Inspect Element
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)