Custom elements are not loading in anpother angular app - javascript

I have created simple custom elements in angular in one project and created bundle using npx-build-plus and generated files as shown in the picture below,
out of these files i took out main.js file.
I created another angular cli project and included generated js file in root folder like the below
and in index.html i used like this
<!doctype html>
<html lang="en">
<head>
<title>Custom Angular Element</title>
</head>
<body>
<script src="elements/main.f23021e9a099929ed5cb.js"></script>
<h1 id="result" style="text-align: center"> Angular elements !!!</h1>
<value-button text="Value Button" value="1"></value-button>
</body>
</html>
But the element is not displaying.
I tried to give in app component html also but not working there as well
Should i give any configuraration in package.json ? Can you please tell help me?

You can try following this article https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58
Also if try building it without an hash so that it is easy to always read that.Also you should be adding the custom element in the index.html (e.g. ).
The article talks about setting these things up in more detail.

Related

js code working in console but not in vs code

I'm a beginner, learning js. I was doing a course and the task provided was that to pop an alert when the button is clicked. Pretty Ez but everytime somehow the code just doesn't works even when I typed the code seeing the solution. Checked pretty much everything within my knowledge but couldn't figure it out. while trying the same thing in another computer, it worked without any problem :/Here's the code
Window.alert is not native JS. It is a Web API method, meaning your browser source code implements it.
If you're running, say, a Node.js environment in VSCode's console, then it shouldn't really work. Node doesn't implement it either.
I have made an example here on a code pen: https://codesandbox.io/s/buttontoalert-fs1kz3
What you need to do is create an index.html that is importing the script you want to run.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<button>Click Me</button>
<script src="src/index.js"></script>
</body>
</html>
Then in your index.js file which is the script you are importing in the html file the code is:
const button = document.querySelector("button");
button.addEventListener("click", () => alert("I was clicked"));
These two file need to be in the same directory or you need to update the file path to where the js file is located relative to your html file.
The commands you are using a relative to a browser so need to be run with a browser or will not work.

Bundle html and css together to send to the server

I am doing a simple web app, where i am using a external lib called (html-to-pdf). The idea is to create a pdf with the html and css generated on the frontend. The lib receives a html document, so i need to have something like this representation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cv-maker</title>
</head>
<style>
styles go here
</style>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
at the moment I am using vue to do the job, since it gives me less headeaches with other stuff. What I need is to convert a component based templated, like this:
<template>
<div class="wrapper">
<button #click="sendRequest()"></button>
</div>
</template>
to the above example, so I can extract the component styles and the generated html for the specific component, is there any way to do this?
Currently I am thinking about webpack plugin, but i don't want to build my bundle each time i do a request to the server, is this the good way to do that?
edit: resuming the behaviour i want, basicly i want to extract the html is inside the template witht the class wrapper, and get the styles on the current component and create a single html file with the extracted html from the component and the style embeded on the component with the style tag.
Thanks

Multiple Aurelia apps on one page

As there isn't much information about Aurelia framework I got stuck with these 2 questions.
Is it possible to create multiple Aurelia apps on single page and
how this can be achieved?
Alternatively is there a way to call out single application templates in 2 different places outside the main app container?
For example I want to use Aurelia SPA in CMS system and call it out in different elements like header, main container and aside container.
Yep, just add two elements to the page with an aurelia-app attribute.
Here's an example: https://gist.run?id=2d310abbbea337fb5f6d110ec807f7d2
<!doctype html>
<html>
<head>
<title>Aurelia</title>
</head>
<body>
<div aurelia-app="main1">
<h1>Loading...</h1>
</div>
<div aurelia-app="main2">
<h1>Loading...</h1>
</div>
...
</body>
</html>

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Getting Started With AngularJS and IntelliJ IDEA

Hello I'm trying to learn Angular.js and IntelliJ IDEA. I was wondering can someone tell me what I'm doing wrong. I'm trying to do a simple hello world example from a book, but it's not working for me in the IDE. I'm not sure whats really sure why it's not working, but to start the project I downloaded the AngularJS plugin. I went to the project location using the command line and did bower install angular, and copy and pasted the example from the ng-book for hello world, but it's not working for me. I tried to add the path to the html and it still didn't work. Can someone help me out?
you can see the working version of your work:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.min.js"></script>
</head>
<body ng-app="exampleModule">
<input ng-model="dynamicName" type="text" placeholder="write your name here">
<p>Hello {{dynamicName}} !</p>
<script>
angular.module('exampleModule', []);
</script>
</body>
</html>
I dont know is you address angular correctly or not, but you need a module for your code, even an empty one like what I've just put in the script tag.
Option 1 - Move the ng-app directive to body tag of the page.
Option 2 - It could be possible that browser is rendering a cached page which had errors. Can you force refresh to GET the latest files? In most modern browsers user CTRL+F5.
Option 3 - Use the developer panel of the browser and force reload the page and notice any error.
The problem is with the file read/write permissions on your localhost file.Go to the bower_components file in your finder, right-click ->get info. Scroll down in the info window to the permissions section and change sharing and permissions to Everyone - Read/Write.
Then click the Cog drop down and select the option Apply to enclosed items
Hope this helps.
You are trying to invoke the angular file from wrong path
replace with following
<script src="../bower_components/angular/angular.js"></script>

Categories