I am trying to create an application in angular version 6 which can generate js as output where the application can be embedded directly in any application.
Eg.
<div id="entryID"/>
<script src="angularapp.js"></script>
<script>
AngularApp.App({
inputParam1: 'param1'
user: { id: 'userid' },
resize: 'detect'
}, document.getElementById("entryID"));
</script>
Here entryID is used for the div to initialize the application and fit in the div
You should take a look at Angular Elements.
It's a part of the Angular project, and it's function is pretty much what you want: creating a .js file, that, if imported, will allow you to use components in any environment.
It works using custom elements, basically registering the component in the browser so you can use them anywhere, as long as you import the .js files.
Note that the generated .js files are pretty massive, as they include the entire Angular library itself.
Support is even included for Internet Explorer, if you use the correct polyfills.
Related
In a multi-tenant project, tenants could have different UI and functionality. To that end, there is a structure like this:
TenantA
SiteHeader.ts (class named SiteHeader)
TenantB
SiteHeader.ts (class named SiteHeader)
... 20 other tenants
On the web page, the .js declaration dynamically generates (server-side) the reference to the correct tenant:
<script src="../{CurrentTenant}/SiteHeader.js"></script>
On this same page, Main.ts needs to reference the correct SiteHeader. Since I can't (and don't want to) have import {SiteHeader} from 'TenantA/SiteHeader' and import {SiteHeader} from 'TenantB/SiteHeader' and 20 others, I am forced to simply declare it as a var, which points to whatever js was loaded by the parent page:
declare var SiteHeader;
However, it causes Duplicate identifier errors in each SiteHeader.ts. And occasionally in the Main.ts as well. I am able to drop down to the command line and compile each SiteHeader.ts manually, but it's chore.
How can I resolve this sort of situation?
Not that it matters much, trying to bring TypeScript to an old school WebForms project in Visual Studio 2019.
You could create interface SiteHeader and make all tenants implement it. But I am not sure how runtime would work with <script> tag in combination with external modules. Have you considered internal modules (namespaces) or using dynamic import() (should be supported in TypeScript)?
I am new in web deploying. Now I have to manage windows server and every month I need to deploy new version of applications.
I have trouble with javascript. In almost every version of web applications is changed some javascript file (all javascript files are bundled in one minify javascript file).
Most of users use google chrome. Trouble is browser cacheds styles a javascript files. After deploy new version is loaded in browser old version of javascript file.
Does exists any solution how to resolve this problem programmatically in application or some solution after deploy? In best case withou user colaboration (for example refresh cache by CTRL+R)? What is the best practice?
Our application is developed as .NET CORE 2 Razor Pages web application.
Thanks for advice
Use the tag helpers for script and style files, which take an additional attribute append-version, which appends a new query string value each time there are changes in the files.
<link href="/styles/site.css" append-version="true" />
<script src="/scripts/site.js" append-version="true"></script>
If you are using normal html, css, js project then you can add versioning in your js and css libraries and update your index.html with updated version.
Or if you are using node js, react js, angular js then you can use index.ejs instead of index.html and you can add hash code with your js and css libraries like
script1.1ebecec8538d52c8f844.js
script2.2e765bd6680f0c925e8a.js
style1.1ebecec8538d52c8f844.css
style2.2e765bd6680f0c925e8a.css
Or you can also use CI/CD for npm project.
you can make sure that any updates you’ve made to your bundle files will take place immediately for all users with using versioned names like:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of style.css as different from a file name of style.css?v=1.1. It also works for script files as well:
<script src="main.bundle.js?version=1.0.1"></script>
But then If you have one giant file, and change one line of code, the user must download that entire file again. Think of a solution, to creating more smaller files, like with splitting out npm packages used in your solution from your own code, to have better release-flow.
If this is about .css and .js changes, one way is to to "cache busting" is by appending something like "_versionNo" to the file name for each release. For example:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Or alternatively do it after the file name:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Please check link
Link
We are undergoing an project in Angular 5/6 where we get prebuilt HTML pages, that use jQuery, gridstack.js and CSS for UI, that we'll implement as components. Assuming it's not possible to rewrite all the jQuery and JS code in Angular, is there any way to run the jQuery code provided in the tag directly in Angular?
I have already tried importing jQuery as:
import $ from 'jQuery';
Here is a sample of the code:
<script type="text/javascript">
$(function () {
$('.grid-stack').gridstack({
width: 12
});
$(".accordion-toggle").click(function () {
$(this).toggleClass("activu");
$(".accordion-toggle").not(this).removeClass("activu");
})
var options = {
float: true
};
$('.grid-stack').gridstack(options);
</script>
It is possible and could be a good intermediate step on a migration path.
I am working on a project right now where we have a JQuery-based app. It has a lot of CSS and HTML code inside the JS code to handle state changes and change content and styling accordingly. It is relatively messy.
We took a number of steps of migrating to Angular, with the first being what you are describing. It definitely already helped gain an overview of the code base and structure the code in a much more maintainable way than it was before.
I took the HTML and broke it down into Angular components. For this step, we just left the JQuery code in the main AppComponent TS file. You can simply use JQuery in Angular TS files with a declare const $: any;.
I broke down the the JQuery code and migrated everything that was template related (e.g. changing parts of the DOM tree based on events/state) into the Angular HTML files.
I took the one large CSS file and moved the CSS rules to the individual components.
I went through the entire remaining JQuery code and piece by piece migrated it to proper Angular code.
It proved to be a viable strategy. We were first considering re-writing the entire project, but like this we always had a running version, could continuously run UI tests against it and piece by piece migrate.
All of that is to say: I would not see a JQuery/Angular mix as a final solution, but it can be a good migration strategy.
You can use jQuery in your angular project. Normally jQuery based DOM manipulation is not the standard way for angular but in some cases we have to jQuery plugins for certain features.
Steps:
Import jQuery script in your index.html
<script src="assets/js/jquery.min.js"></script>
Import your plugin css/js in .angular-cli.json inside styles and scripts arrays
Inside the component where you want to use it , declare jQuery.
declare var $ : any;
Use in directly in your component. If plugin needs to be initialised , you can do it inside ngOnInit
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.
I love vue.js because of its simplicity, which means I can hack a quick one-page SPA with modern, intuitive data-binding syntax and no complex toolchain.
I also love the idea of single-file components which means there is a single place (*.vue file) where each component stores DOM, styling and scripted functionality.
However, I want to use single-file components without wasting time on managing a build process every time I put an app together. In short, I want the benefits of component management without the overhead of a build toolchain, which means letting the browser do the heavy lifting for bootstrapping each *.vue file via XMLHttpRequest and DOM rendering. Making sure that we replace module.exports and import calls with corresponding Vue.component() functionality.
I'd love to know if anyone has come across a client-side (only) solution for using *.vue files on the browser. Surely this has been done already?
I'm absolutely certain this doesn't exist yet, because while it might seem relatively easy, certain functionalities would make it quite difficult to implement. For example:
You don't necessarily import just other .vue components, you can import random external dependencies. Which means that the browser now needs to download and parse npm modules, handle their dependencies, etc.
Different sections of your .vue component (template, logic and style) can be written in languages other than HTML, JS and CSS. Which means the browser now also needs to download a compiler/transpiler for Jade, CoffeeScript, LESS or whatever else you're using and run your code through it. Mind, there's no guarantee that such a transpiler written in JavaScript actually exists, because a node module used in a regular build process could be just a wrapper for some external library which can't be run in a browser.
Styling in a .vue component can be scoped, which means that you now need to parse the template of a component to insert randomly generated IDs as element attributes AND parse the styling of the same component to insert those same IDs in your CSS selectors so that your styling ends up being scoped.
And those are just the most obvious ones off the top of my head. Sure, you could severely limit yourself and not use any of those features, but then it's not really a .vue component anymore, is it?
If you really want to avoid a build process at all costs and are willing to accept the limitations of not using any of the features above, why not just use a single JS file:
$(body).append(`<style>
// styling goes here
</style>`);
var myTemplate = `
// template goes here
`;
Vue.component('my-component', {
template: myTemplate
// component logic goes here
})
You have to load them in the correct order, but there you have it, a poor man's single file component.
Another way is use: http-vue-loader
Load .vue files directly from your html/js. No node.js environment, no build step.
https://cdn.jsdelivr.net/npm/http-vue-loader#1.4.1/src/httpVueLoader.min.js
Same to in unpkg cdn
https://unpkg.com/http-vue-loader
Here a example
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script>
new Vue({
el: '#app',
components: {
'header': httpVueLoader('/components/header.vue'),
'nav-bar': httpVueLoader('/components/navbar.vue'),
'aside': httpVueLoader('/components/aside.vue'),
'content': httpVueLoader('/components/content.vue'),
'footer': httpVueLoader('/components/footer.vue')
}
});
</script>
Or you can load your components from external like
'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),
See the example at : https://codepen.io/mikechen2017/pen/wEdbBN/
It's 2020 and Evan You wrote https://github.com/vuejs/vite just last week.
I'd love to know if anyone has come across a client-side (only) solution...
Vite has a server, but it feels like the old days of Web when we just had Notepad. I had run the demo in less than 5 minutes, it's that easy.
it covers or aims to cover the finer details that #mzgajner mentions
For now, I would say that it's only gotcha is that you are in Vue 3 beta realm right away if you use it. No Vue 2.x.
However, I want to use single-file components without wasting time on managing a build process every time I put an app together. In short, I want the benefits of component management without the overhead of a build toolchain
I share the sentiment and decided to solve this problem with vue-blocks. Just a single script tag to get going, no build tools required, completely client-side.
It can load vue files (with some limitations though) from the server jsfiddle example:
<template src="path/to/vue-file.vue"></template>
Vue Blocks allows you to write multiple vue components in the html document, like so:
<template component="sample-component">
<div>
<h1>Sample component</h1>
</div>
<style>
</style>
<script>
export default {
data() {
return {}
},
mounted() {},
methods: {
xx() {
}
}
}
</script>
</template>
A working demo in jsfiddle: https://jsfiddle.net/o48L0y9j/