I have built a angular webpack application and want to theme the application completely based on the REST API response (theme data - colors).
I am using a global less file which is used across the application pages.
I'm using
less.modifyVars({"variableName":"Value"}) ;
less.refresh();
in the controller and the call is working but the less variables are not changing and reflecting in pages.
I observer that its because the less files are already compiled to css when the controller is loaded and these less variables are not accessible dynamically.
Can anyone suggest any other approach or what i'm missing here? and how i can change the less variable before its compiles into css by the webpack. Or rather recompiles the less again to take the latest values form the api without reloading the page.
Please NOTE : im using npm to install all dependency and less is loaded from package json , and console.log(less) in the controller says less is undefined at client.
Thanks,
Related
We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
i am working on a angular 8 application , when user clicks on a button it should redirect to a vendor portal which is completely a different webapp (diff Url), when user redirect to vendor page , user should see the same header ,footer and navigation what i have in my web application. but the vendor application is on angularJS(1.x).
so my question is can we convert the Angular8 project/component into a standalone JS file and ask the vendor to load the JS file in their application ? this JS file should contain the logic to replace/inject with in their page. for ex: we ask the vendor to create a html element with ID name "custom-header" in their page and ask them to add my JS file (hosted on CDN ) on their landing page, and in my JS file we need to write a logic to look for "custom-header" Id and replace with our content ?
so can we write custom code in our Angular8 application and export it as a standalone JS file ?
Note: my Header/Navigration/footer angular components are shared components , i want to use the same component in my webapp as well as vendor component
Here's the shortest answer: No.
Here's the 'been there done that answer':
I've spent time trying to make things backward compatible and it's rarely worth the effort. I have written alot of angularJS and Angular2+ code and believe that any time you spend trying to crowbar a solution here would be better spent just making the angularJS module. AngularJS a simple, fast framework and you could have your result quickly. Alot/most of your logic/html could be directly ported over with small mods.
Here's the TL;DR answer:
I hate to ever say 'You can't do that' with technology because I'm usually wrong... but you can't do that directly. Well, I guess you could use iframes but that's not a good idea.
While there is a path to incrementally merge angularJS into an Angular 8 app, the same is not true of the reverse. However, you should be able to leverage much of the existing logic from the A8 app into a module that angularJS could just import.
Without seeing how intricate the A8 component is, angularJS is alot simpler and it's relatively easy to throw together a controller/directive/view single import. I don't see a clear path to automatically updating the aJS code when you update your angular 8.
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
I am developing a Single Page Application with React + Redux + Webpack. Webpack is great tool to package all stuffs but i couldn't figure out some pt
my application simply construct a parent page and once user select the function from top menu, particular function will launch as a new tab within the tab container and the tabs itself require interaction. let say when tab A complete something, tab B has to refresh part of the information.
My drafted idea is that each function is BIG component of React and the parent component controls which function (component) should be append to the tab container. But i imagine the problems may comes if i use Webpack to bundle the whole application into 1 .js file, the .js file size would be very HUGE even if i split the vendor source bundle into external resources
i believe it is common problem for Single Page Application by using Webpack and there should have better way to solve this.
Please kindly correct me if anything i misuse React + Webpack
When webpack compiles/bundles your code in production mode it will be much smaller than the bundle sizes you're currently seeing. Also if you're concerned, check out Preact (https://preactjs.com/) which is API-compatible with React but much smaller
Webpack supports dynamic imports which can be used to load code on demand, e.g. when a top-level tab is opened. That way your initial js bundle stays small and the application can start very quickly.
https://webpack.js.org/guides/code-splitting/#dynamic-imports
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.