Angular module federation: Webcomponents and assets static file sharing between MFE and Shell application in polyrepo scenario - angular-module-federation

Currently i am facing two problems:
I have two repos one for shell and another for MFE application
Here is the version o module federation
#angular-architects/module-federation": "^14.3.12
First Problem:
I have webcomponent created which is custom grid and it created separately in different repo. And this components is install via npm (added in package.json file) in MFE application project. And add the necessary files in script section of angular.json file. MFE application run properly when standalone. But when we use the MFE in shell application the shell application doesn't show the custom webcomponent. Only way to work is to install the same webcomponent in shell as well to work.
So anybody any idea how can share the webcomponents which used by MFE in shell application instead of installing in shell application project?
Second Problem:
Another problem I currently facing is sharing static files between MFE application and shell.
I have env.js file which has api call urls which is used by MFE application.With MFE application its works correctly.
But when I load the MFE application in shell application it doesn't recognizes the API url call because it tries to search in its asset folder instead of assets folder of MFE application?
Please let me know what i am missing here?
I tried with webconfig.js files in MFE application which angular module federation has created but didn't got any break through to these problems

Related

How to add more script files in Google Web Starter Kit?

I am trying to start a new project with Web Starter Kit from Google. Thing is if I add another script alongside the main.js, then it doesn't seem to be compiled to dist folder, nor included inside the main.js
Any ideas?
In `gulpfile.babel.js
"Since we are not using useref in the scripts build pipeline, you need to explicitly list your scripts here in the right order to be correctly concatenated"

Aurelia exported bundle causes a 404 from SystemJS if a source module was in a subdirectory

I'm learning Aurelia via the TypeScript / ASP.NET Core skeleton navigation app. Everything runs fine in its default state. To test the exported production bundle, I run the Gulp Export task, then publish the app via Visual Studio project publish to a local folder, then replace the published wwwroot folder with the wwwroot folder from within the "export" folder, then use dotnet from the command line to run the app.
Things break if I have any source modules in a subdirectory. For example, I moved the welcome.ts/html component files into "/src/Pages" and adjusted its route moduleId in app.ts accordingly to "./pages/welcome". The unbundled app then still runs up fine, but when I try the exported version, I get a request being made by SystemJS to http://localhost:5000/dist/pages/welcome.js which 404s (as you'd expect).
I can see the contents of the welcome component in the app-build.js file, and the config.js file within the export folder contains the expected file paths, i.e. it has "Pages/welcome...".
I have read this seemingly similar issue:
https://github.com/aurelia/bundler/issues/131
But setting depCache to false made no difference in my case. Why is SystemJS trying to load this module separately from outside of the bundle?
I was able to reproduce this error locally.
Presuming that you have a Windows environment, it will be a case-sensitivity issue.
After renaming [P]ages folder to [p]ages, bundled version works as expected.
On the filesystem there is a [P]ages/welcome.js viewmodel, but [p]ages/welcome has been defined as moduleId.
Unbundled mode: Windows filesystem is case-insensitive, which behaviour can be misleading by loading [P]ages/welcome.js correctly.
Bundled mode:
Based on file path, bundling process embeds[P]ages/welcome.js as [P]ages/welcome module.
But, according to the route config, SystemJS will be looking for [p]ages/welcome module within app-build.js.
My recommendation would be to use lowercase folder/filenames whenever it's possible.

How to setup a project to run using JNLP?

I currently have an application that runs from the desktop, but I would like to make it deployable from web browsers using JNLP. How do you go about setting up jnlp for an application? Are there any examples that go more in depth then a hello world?
So I ended up following this reference http://www.oracle.com/technetwork/articles/javase/jnlp-142088.html to build my jnlp. On a side note to add more jars etc all you need to do is list more jar tags and tag one as main. Use this to reference the structure and required tages https://docs.oracle.com/javase/tutorial/deployment/deploymentInDepth/jnlpFileSyntax.html#extension

Deploy Click once as a single file?

I am looking to use click once to deploy an application for internal use, When publishing to the network share it creates several files and folders. (manifest, ApplicationFiles etc)
Is there a way to bundle this up as a single file, I do not fancy the idea of allowing other users access to the application Files folder that is created, I would rather just give them the exe and have it take care of everything else.
Does anyone have experience with this, or am I stuck with the application Folder, Application Manifest, and setup file all being in the same directory for installation.
There is not a way to package the whole application folder and files into one file, like an MSI with ClickOnce.
You could code something on your own to have a shell app that use ClickOnce and its only file would be your app compressed. The shell would download that compressed file to the client's machine and would unzip etc.
You could also InstallShield Limited Edition that comes with VS 2012/2013 in the Other Projects, Setup and Deployment but that does give you the ClickOnce easy of deployment features. You could use the InstallShield setup to be your compress file in your shell clickonce app and then just use Process.Start to launch the InstallShield setup. It should work.

Obfuscation in Ext Js 4.2 with Sencha CMD 3

I just installed all the required tools for the new Sencha Cmd(Ruby, Compass, Ext Js 4.2 SDK) everything works fine, but I don't know how to obtain the unique obfuscated file from the .js sources in my Ext Js application.
Any help, please? Thanks in advance.
I tried the "sencha app build" command from all the folders in my application path, always get the "Please ensure this command was executed from a valid application directory. Unable to locate 'app.dir' config property from 'sencha.cfg'
After more reading about the subject I think before the "sencha app build" command to work I need to generate the bootstrap.js file manually because my application wasn't generated using the framework, but I'm stuck here also. Anyone ever did that? Please?
The best way to get things work if your have legacy project (when project structure is not generated by sencha cmd tool) is to generate empty project and the move all necessary files/folders in to your existing project and try to adjust all configurations. You will need to move:
.sencha folder
folder with extjs development classes
bootstrap.js, bootsrap.css, build.xml
modify you start page correspondingly (index.html, index.jsp, or whatever)
create application.js to start your application
bootstrap files are always generated automatically. To generate it normally you have to use sencha app refresh command.
Basically the most important changes have to be made in .sencha folder. Most of the config files in this folder have a lot of comments so this is not a problem to understand what to change. Also it's good idea to refer official doc page: Sencha CMD