Angular 2 Lazy Loading - javascript

I'm trying to implement lazy loading on an application for a client. The purpose is to have a portal and load modules in the main app (portal) with dynamic paths - received from the backend, for example.
I've found a nice example here: Stackoverflow example
The problem is that I'm going to have the portal and the other applications separate. It means that I need to build all the applications (to create the dist folder with the minified js files). My question is:
Given the code bellow, how do I import the module of the other application after it's built?
this.loader.load('./src/test.module#TestModule').then((factory: NgModuleFactory<any>) => {
console.log(factory);
});
I'm going to have an index.html file, css files, vendor js files, polyfills files and the app files (all built inside the dist folder). What should I specify here './src/test.module#TestModule'? How do I load the built module?

Related

what main.js should contained in vuejs project?

I'm learning nodejs and vuejs to modify an already created web site.
I installed nodejs, vue and vue-cli and I launched "npm run serve" which apparently start "vue-cli-serve serve"
The problem is that I don't understand what this web server do on files, in this documentation : https://cli.vuejs.org/guide/prototyping.html , it's told:
It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify the entry file:
vue serve MyComponent.vue
Ok, but does it run main.js, does it include it into a js file which is the loaded by the index.html on the client broswer.
I see in the browser that the page load a js file named like that: app.23d...js
My question is how this js file is created?
For instance, when the content of main.js is this one:
import './css/icon.css'
Vue.use(VueResource)
Vue.use(VueScrollTo)
what is the output in the app....js file?
It seems it doesn't work at all like php which I usually use on web server
Thank you
Vue uses Webpack to convert your potentially-numerous distinct .js files into bundles with names like app.23d92ab88708...js
From the Webpack documentation:
Concepts
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
I don't suggest trying to get into the details of how Webpack works
This will take a lot of time. If you have an existing Vue project, you are much better off spending your time interpreting that as a Vue project, and accepting that the conversion into the actual app.23d.....js file or files is an automatic process that you do not need to involve yourself in.
It will avoid a colossal waste of time
It won't advance your understanding of how the Vue project works
Whatever you learn about the exact workings of today's Webpack, may be completely wrong about tomorrow's Webpack.
Nevertheless the interface that Webpack provides to you as a Vue programmer will remain constant over future versions.
This is the concept of software abstraction. It is highly advantageous to not have to know how every step of every process works, as long as you know how it is designed to respond to actions you take at a high level.
Horrific thought
I have just re-read your opening sentence:
I'm learning nodejs and vuejs to modify an already created web site.
Please tell me that you are not trying to modify an already created web site where you only have the compiled website available, without the Vue source code? That would be a stupendously painful enterprise.

How to Import non npm dependency in angular

I am working on angular 5 project want to create a visualization of an application system internal connection (something like a flowchart where systems internal components like server, mq, db can be dragged upon and connection be made) component in angular. Started with the jsplumb community edition (link) to do the same. Was able to successfully integrate jsplumb into angular 5 application. The only drawback is we cannot create the new element at runtime (That is drag and drop items and create connection). This is possible in the toolkit licenced version. Which I am not considering to work with.
So was looking into js-graph-it (link) The js-graph-it is a old project works nicely with simple html page. I am having problem injecting js-graph-it.js file into the angular project. As it is non npm file it is not defined and the system does not recognize the same if syntax like import { jsgt } from '../../assets/jsgraphit/js is used. If you observer I have placed the files in my asset folder. The first question is this the right place for 3rd party js file if not present in npm? How to import or the correct way to import such files not present in npm ?
You can import 3rd party JS files into your project and be bundled by the CLI by putting them in the scripts array in your angular-cli.json config file.
This will make them part of the global scope (e.g. available on the window object) as if you imported it via a <script> tag.
You can additionally include any CSS files or other assets part of the libraries in the config file as well via the styles and assets properties.
I think the proper way for you to manage these 3rd party libs is to store them in your assets directory as it looks like you are already doing.

React: Load Component stored on a webserver

the main question is: Is there a good way in ReactJs to load a React Component stores on a webserver?
I already reached the goal to do this but I think my way isn't the best.
Let me explain what I currently do:
I have a core project called "dashboard". This core project has the functionality to load javascript via an XHR request. After the request is done, I call window.eval to use this code.
I have a module called "todoModule". This module is the component (or project) stored on the webserver. The todoModule will automatically inject his own code into the navigation bar of the "dashboard" project. The bad thing is, that the "todoModule" has bundled a total size of 1.2MB. And this is too large to load it via an XHR request. I do the bundling via webpack. I already externaled React, ReactDOM, ReactRouter and so one, to use the dependencies of the "dashboard" project. But it is always to big. And the "todoModule" can have his own dependencies, which I dont need in the core project.
I have an other idea to do this:
Store all dependencies in the core project
Build the module with babel --outDir ./lib ./src to just compile the Javascript files without dependencies. The compilied files will have a size of 33KB.
Upload the compilied files on the webserver.
But I don't know how to implement the features, that the module will always use the dependencies of the core project.
Maybe you can help me or give an other solution.
Thanks
EDIT (Solution):
It is not possible to load compiled components from a webserver in a good way. My solution is to deploy a reactjs application anywhere and use postrobot (https://github.com/krakenjs/post-robot) for the communication

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

RequireJS: Multiple main.js?

I have been building a single page app using requireJS and so far loving it. I have come to the point of developing other parts of the site outside of the main app and am not really sure how (or if) to use requireJS for this.
In my main app everything is triggered by this script tag:
<script data-main='/scripts/main' src='/scripts/libs/require.js'>
I am now developing the home page which has it's own front end scripts. Using the optimizer when it comes to getting the site live which will bundle all these scripts into one main.js package. I am struggling to understand where the rest of my site fits into this.
Say my app is dependent on jQuery and it gets bundled up in the optimized version of the app, what if I want to use jQuery on the homepage? I don't want to load in my app's main.js just to get access to my jQuery module. So yeah... a little confused!
I am imagining a site structure sort of like this:
/scripts
- app-main.js //(includes all module dependencies after optimzation)
- home-main.js //(includes all module dependencies after optimzation)
App:
<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>
Homepage:
<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>
Questions
How can I use RequireJS to develop different parts of a site?
Is it recommended to have multiple main.js files?
How can my different main.js files share common modules such as jQuery post optimization?
The requirejs team has some samples for multipage applications on github.
Have a look at: https://github.com/requirejs/example-multipage
Basically you are going to have the following structure:
page1.html: page 1 of the app.
page2.html: page 2 of the app.
js app: the directory to store app-specific modules.
lib: the directory to hold third party modules, like jQuery.
common.js: contains the requirejs config, and it will be the build target for the set of common modules.
page1.js: used for the data-main for page1.html. Loads the common module, then loads app/main1, the main module for page 1.
page2.js: used for the data-main for page2.html. Loads the common module, then loads app/main2, the main module for page 2.
So require.js should always be used on any page to allow for modularity and a clean namespace. I believe each 'app' needs it's own main.js script. When optimizing your site r.js allows for you to exclude modules from the compilation which you should do for jQuery always.
That way require.js will always load jquery.js on the fly and most of the time from the cache. Finding other modules that might be cached between your app and homepage will have to be done at your own discretion and depends on the flow of your users and other factors.
It sounds like you have two projects, an app and a marketing site. I believe those should be separated to quite an extend and should have their own respective 'js' folders containing their own main.js.

Categories