I'm trying to implement separate layouts for guest home page and admin page in an Angular 6 application.
The thing is, I have two different templates, each with their js and css files.
I found a way to use styles on a component level, but for the scripts, I cannot find any way instead of having some method that will load all the scripts where I need them and when I need them.
It's like, my guest home page uses totally different set of css styles and script files than my admin page. I know I should probably split my app into modules and then lazy load my modules, but I don't get it how I can make it to use different styles and scripts based on the page I'm currently visiting, or route. For now, i put my styles into a component that is my guest home page component, and I can do the same for admin and then separate them using parent and child routes, but how can i achieve the same for scripts and styles, without having loading them on the component level. Thank you.
i'll answer here and say that i've solved it by using separated service for loading scripts and will just inject the service in the component where i need it and provide id with an array of scripts that I need to have on that page.
Related
We are building an Aurelia application. We have common login page and home page for our customers. But each customer will have their special customer page, which is very specif to them. These cusomer specific pages should only be visible to the customer and not visible to others. I need to find a proper way to to create a sub folder in my project for each customer to have their specific resources. Even when we bundle the applicaiton for a specific customer, we should export only their own resources.
It sounds like you are using dynamic routing. There have been a few folks asking this question publicly. One example is here https://discourse.aurelia.io/t/dynamicaly-load-routes/1906
Note that Aurelia also works with remote view, as an example is here https://codesandbox.io/s/8ljmrq3vql
One common things about ultra dynamic scenarios is you need a proper dynamic script loader (requirejs, systemjs, fuseboxjs), not bundler (webpack).
I am looking for a way to speed up my website by loading content that is not required to display the main DOM afterwards.
My webpage is loading 2.8MB of ressources where 879kB are actually transferred. (gzip)
I am aware of the possibility of loading only the required components, but if I do so, I'll have the same problem after a user clicks any link to another component.
Basically what I want to do is loading my main component and displaying the DOM immediately.
After DOM is loaded, I want to load the other components as usual.
Is there a NPM package that does this?
If not, how can I realise my desire?
Use lazy loading modules to load them only if needed. It will greatly decrease bundle size:
https://angular.io/guide/lazy-loading-ngmodules
Application should be split to separate modules and routing is modified not to load them eagerly
What you are describing sounds like server side rendering. You should check out Angular Universal.
https://angular.io/guide/universal
I have a number of modules that I want to lazy load on to a single page. They may load into any one of several pages in different configurations. They may be pretty heavy, so I don't want them to all load initially. Router wouldn't be appropriate for this situation. How do I lazily load them manually without router?
I have doubts on how to create a login page for the template BlurAdmin.
The Template has the index.html as masterpage. It has header, footer, sidebar, ... and the pages are loaded as template (ui-view).
But I would like to use login page the independent of index.html, I think the best way to create it using another ngApp, different from index.html, but how should I do? I looked much about, but the login.html is always loaded as a template (ui-view).
If you want to divide your application into few steps, it could be useful. So you can create separate index.html file which will include all html from logins template. Of course, you can also add another angular to this separate page to handle logic, but keep in mind how much logic you will need to add to this page, maybe it will be easier to use something with less weight for the login page.
Anyway, as a result, you should have the second separate application with included scripts and styles as it already implemented in the main application. So the answer to your question - you should handle building process for the second application which will be you login SPA, and you will have two single page applications with different scripts in each, they can use different angular versions or even different Frameworks.
I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.