I've made my own AngularJS app, which works as an independant project.
What i want to do is use this app in another project. I made it a bower package and added it as a dependecy on my project, but i've no idea how to initialize it. As an independant App it used to work through its own URL.
Any tips?
If it is a module you after you imported the js oyu can addit to your new module dependencies
newApp= angular.module('newApp', ['comparatorApp']);
Related
I am working on a Angular 13 project. we have different modules in the project and one module name is Intext Module. we need this module as separate project as well as in the existing project along with other modules. so how to make Intext module code reusable?
I have created a library in a new bitbucket repository and installed in two projects so that i am able to reuse the comopnents.
We have a parent or host project which is on Angular JS and we are creating a new React app, and would like to integrate React app as MFE with the host project.
We would not like to make lot of changes in the host project but wanted to check if we can use webpack/webpack module federation in the Angular JS project to do the MFE integration.
Thanks in advance for any examples or suggestions that you provide
What you are trying to do is not possible with Webpack 4 (unless you use the Single SPA JS library to polyfill support for MFEs). You will need Angular version 11 or higher (but I'd recommend version 12, as Webpack 5 support is stable in that version).
Some examples and references:
https://javascript.plainenglish.io/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a
https://webpack.js.org/concepts/module-federation/
https://github.com/module-federation/module-federation-examples
https://github.com/manfredsteyer/module-federation-plugin-example-nx
https://www.angulararchitects.io/en/aktuelles/using-module-federation-with-monorepos-and-angular/
https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly/
I am new to npm, react and webpack but I have a question. In npm how do you prevent a library from being included production package file?
For example, I am just building a very small component in react and on the site where I am going to place my small component. The problem is Jquery library and bootstrap is already being called in the masterpage of the site and I didn't want to call the same library again in my small application production build but I still want to use them during development(because I am only testing it on local and jquery is not called there). TIA
Appreciate your time ready this and hope I got to learn more from you. By the way I created the app using create-react-app but I already 'ejected' it, so its using the webpack 3
Take a look at Webpack externals
You can have two webpack configs, on the dev config you include the package as normal, but for your production config add externals for jquery, so it uses the global one already on the page
The ability you're looking for is named Code splitting
React loadable may be a good option for you as well
Say, I need to use Wysiwyg editor and I found a 3rd party directive for it.
It has a good readme and how to setup in my project(Local).
Demo link: Wysiwyg Editor
Considering that I have done all the npms and integrations in my local project.
How can I deploy the project with new changes?
Maybe I am asking because I don't know about gulp or bower. Does my project needs to have gulp ad bower in order to use such directives. If so, how will the deployment go post setup and integration.
Assumption : There are no gulpfile.js and bower setup already.
In Jquery using a plugin is quite simple. Add a script tag for js file of plugin and use it in html or js as instructed. Does the process has to complicated always for using a 3rd party angular directive?
No. It is not compulsory to use gulp. Gulp just runs task like adding css,js to your file , minifing it and like.
you need to add js file which contain directive code. In your case it is
this is your link of directive
Now you can save this data in one of your js file and add it in index.html
OR
you can give this online link.
Using external directive need to add js n css file.
Question is will it work? We have to see dependancies of any external module we are using so what are dependancies of this module?
enter link description here
you need to add this module also
ADVANTAGES:
Using bower: you can install module in your project. bower install will download all your dependancies also.
using gulp : Gulp task will make sure of adding your css and js files in index.html
I have created a TypeScript module named My.Models that contains several models and I have two applications that need to use this module, neither currently use TypeScript.
The applications are a client-side Angular application and a server-side node.js application.
What is an approach that would enable me to make changes to the My.Models module, and then easily have those changes passed on to the consuming applications?
The easiest way is to publish your module to npm. This may require a couple of changes to your angular setup if you aren't already using npm modules in your angular app. We use webpack with Angular which allows you to write and require common js modules(NPM). Browserify is another option for using common js modules. If you don't want to do 100% commonjs/npm then you'd need to publish to npm for your node app and bower for your angular app.
Then you just publish a new release of your shared module after you make your changes and then you can update your Angular app and Node app.
You can use private npm modules or just publish your module to git(How to install a private NPM module without my own registry?)