placeme-sas / single-spa-angular-cli Goto Github PK

Hi,

I'm trying to solve a problem where an application may pre-configure some variables before linking to the child app, providing the selections via the path. So the child app would be routed something like this:

/:variable1/:variable2/my-child-app

Doing the matching is not problem but, the issue is that the APP_BASE_HREF in my angular apps needs to be dynamic and the Angular app needs access to the variables matched by the wildcards.

Is there any way of passing information into the Angular app when loading it? I'm not sure if this is the sort of thing that props can be used for? I took a look but I couldn't see a way to use them like this. I could use local/session storage but I thought maybe there was a cleaner way via single-spa[-angular-cli].

Thanks

dear @robinComa ,

first of all thanks for your amazing work. what I´m trying to do is using your example repo to create a scheleton for my webpage.

first of all i replaced the app1 with a ap2 (todoapp in angular-cli) to get familiar with the single-spa architecture.
https://github.com/orlandodemauro/single-spa-angular-cli-examples

everything looks working, but i´m having an issue with routing.

I´ll try to explain: the todo app is using routing to filter the tasks that are active, completed, an it is working using the navigation buttons inside the tosoApp. the proble is when i use the menuApp navigation button.
let´s imagine that i click on the completed filter (url: http://localhost:8080/#/app2/completed) the todos are filtered, if i click on the menuApp app2 button (url: http://localhost:8080/#/app2/all) the data are up to date but the view is not re-rendered.

do you think that there is something that is blocking the re-render? because the data are updated as shown in the console.

thank you for any suggestion

Hello,
I again got an Issue that I cannot solve.
I watend to pass customProperties into the child application.
I wanted to do something like this:
https://github.com/me-12/single-spa-portal-example/blob/453296e7892fceb9820e915da534db8600142e71/app2Angular4/src/app2.js#L21
Unfortunately when I try to use the result of the Promise it is allways undefined, I think it is because the Promise gets resolved and not reference to the mounted module is returned:

Is there a way how to pass customProperties into an angular-cli single-spa application?

Again thanks any help.

Hello excellent project, as the problem that solves that is to say, to be seen separately, tell me that this error is to run the application separately, I think by the zone.js

It should be mentioned that it is the application of angular separately, thanks for tu suggestions

Hi,

I'm experiencing memory leaks when loading and unloading a CLI application and I wanted to know if you've come across this issue? My test application is Angular 6 and as simple as possible (1 app component, no router).

As you can see in the picture, when I load and unload the application, manually triggering GC after each change, there seems to be leaks in node and heap memory. I'm not sure whether this is an Angular issue or an issue with the unmounting of the CLI applications.

Hello, first of all I wanted to say that I appreciate the work that was done to integrate angular-cli apps into the single-spa project.

Currently I am trying to bootstrap three angular-cli apps on the same page.
My problem is that only two applications get bootstrapped and the third one is producing an error.

single-spa-angular-cli.js:140: Cannot mount stock-root because that is not bootstrapped

While NOT_MOUNTED, 'stock' rejected its lifecycle function promise with a non-Error. This will cause stack traces to not be accurate.

My main.js looks like this:

mainRegisterApplication('user', () => import('./user-client/loader.js'), () => true).then(() => {
    registerApplication('stock', () => import('./stock-client/loader.js'),() => true);
    registerApplication('portfolio', () => import ('./portfolio-client/loader.js'), ()=> true);
});
start();

One thing I found out is that the last app to get bootstrapped is undefined:
window["stock-root"] would be undefined
I dont think it is a configuration problem in the child apps because sometimes the "stock" app works and sometimes the "portfolio" app works.
Unfortunately I cannot get behind what causes this error, because if I only start two apps they work fine on the same page.

Any help would be greatly appreciated :)

I cloned this repository and updated dependencies:

"single-spa": "4.0.1",
    "single-spa-angular-cli": "0.4.2",

Works fine. but if I try to add new sub-project (angular 6+) I have some troubles with the build single-spa application

Uncaught TypeError: Cannot read property 'bind' of undefined
    at bootstrap:141
    at bootstrap:149
(anonymous) @ bootstrap:141
(anonymous) @ bootstrap:149

Seems like the single-spa does not work with Angular 6+, because if I downgrade sub-application to the Angular 5 the single-spa application works fine.

Any idea how to use single spa with angular 6+ ?

I am using Keycloak for authentication, which is using location.hash to transfer the tokens.

The Problem is that the hash value is changed before it can be used in the child application.

So it would be great to use location.path instead of location.hash.

Currently, the timeout for app mounting is 3 seconds. For large apps (like the ones my company is trying to mount), 3 seconds is not necessarily enough time. Because of this, it times out and never mounts the child apps. I would like a way to configure this timeout when initially loading the app.

Child app:
Angular CLI: 6.1.5
Node: 8.11.3
Angular:
...

Package Version

@angular-devkit/architect 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.2.2
typescript 2.9.2

The child apps of my application are still not mounted with the errors:

1.Cannot mount app2 because that is not bootstraped
2.Error: Uncaught (in promise): [object Undefined]
3.Uncaught Error: 'app2' died in status NOT_MOUNTED: undefined

I did everything according to the documentation.
You have some suggestions for me what is wrong.
What's going wrong?

For Angular 6 (or, more specifically, Webpack 4), chunking was dramatically changed. Instead of each bundle containing a global function call to a webpackJsonP() function, Webpack 4 restructured the webpackJsonP to be a global array object. Because of this, the runtime chunks no longer have to be executed first, and scripts can be loaded asynchronously.

What this means:
While I wish I understood the last sentence more, I don't. What I do know is that because of the changes to Webpack 4, the chunks of the first child app are successfully added to the DOM, but any subsequent apps just re-load the first child app because the chunks are not unique. This is unrelated to bundle names; you can still hash the bundle names with Angular 6 and the scripts are loaded with different names, but the underlying chunks still cause issues.

In the image above, the curly braces represent the chunk names (i.e. {scripts} and {0} are the "scripts" chunk and an unnamed chunk due to 'optimization' being set in the angular.json config file) Since every app has a 'scripts' chunk, even though the file hashes are different, it uses the first 'scripts' chunk loaded onto the DOM.

hi @robinComa

upgrating to the last version is producing the following error:

Unhandled Promise rejection: unloadApplication requires a string 'appName' ; Zone: ; Task: Promise.then ; Value: Error: unloadApplication requires a string 'appName'

it is related to

the fastes workaround is to add the appName as name property of the loader config object, and it is fine when the loader.js is in the parent. (one loader.js file for each children in the parent)

the workaround above is not valid when we want to deploy the children separately and bundle the loader with it. in this case the appName defined in the parent should be totally transparent to the children.

A possible use case is when the same app is loaded at different routes:

mainRegisterApplication("app2", () => SystemJS.import("http://localhost:4200/loader.js"), singleSpaAngularCliRouter.hashPrefix("/app2", true));

mainRegisterApplication("app3", () => SystemJS.import("http://localhost:4200/loader.js"), singleSpaAngularCliRouter.hashPrefix("/app3", true));

any suggestion? thank you so much

This library is currently out-of-date with Angular 6. While I understand some teams haven't updated to Angular 6, it might be useful for those of us that have to have a release tagged as such.

I have cloned single-spa-examples and created a fresh new angular-cli application called ngtest in a subfolder ngtest in src folder. Installed npm package single-spa-angular-cli and created a loader file

import { loader } from 'single-spa-angular-cli';

const lifecycles = loader({
  name: 'ngtest',
  selector: 'app-root',
  baseHref: '/ngtest'
});

export const bootstrap = [lifecycles.bootstrap];

export const mount = [lifecycles.mount];

export const unmount = [lifecycles.unmount];

export const unload = [lifecycles.unload];

single-spa configuration to define child application is as follows

declareChildApplication(
  'ngtest',
  () => import('./ngtest/angular.app.js'),
  pathPrefix('/ngtest')
);

When I try to load this app, I see the following error.

It appears, the loader is failing to get a reference to the root singlespa application. But could not figure out why. Any ideas?

Hi,

Thanks a lot for your lib, I tried to use it and it works very well.
I have a use case where I would like to start the children apps in a particular div instead of putting it below the menu.
Would you know if it would be doable? Basically instead of the "menu" app I would like to have some kind of "template" with header/menu/footer and I would like my child app to load between the menu and footer.

Thanks for any suggestion!

Thomas

Hi, thx for putting together this sample. It works great. I wanted to run an angular1.5 app alongside the angular5 apps you have setup. Is that possible? So far I have not been having much luck. I added another child app and used the code listed here
https://github.com/CanopyTax/single-spa-examples/tree/master/src/angular1

and in the spa-config file, I have added an additional registerapplication call to register the angular1 spa like below

registerApplication('angular1', () => import('../apps/home2/angular1.app.js'), pathPrefix('/angular1'));
registerApplication(
"menu",
(() => {
const lifecycles = loader({
name: "menu",
selector: "menu-root",
baseHref: "http://s3.us-east-2.amazonaws.com/singlespa/menu"
});
return {
bootstrap: [lifecycles.bootstrap],
mount: [lifecycles.mount],
unmount: [lifecycles.unmount],
unload: [lifecycles.unload],
};
})(),
router.matchRoute("/**", false)
);

When i webpack and run, only the menu app is loading, the angular1 app isn;t loading et all. If i disable the "menu registration above, my ng1 app works. Can the both be wired the way I have setup?

If there is a quick example that shows ng cli app working along side ng1 app, that would be great. Or else if you can provide me with some quick pointers, I would much appreciate it.

Hi,

Do you foresee a compatibility with IE11 ? Right now it seems that it does not fully work.
I tried the examples and I get an error when navigating to app1 from the home app:

Thanks!

single-spa-angular already has the rxjs dependency updated to 6.0.0, however, the single-spa-angular-cli only supports 5.5.6 so far. That affects Angular 6/7 app if we are going to use this framework to build micro-front ends services. Any thoughts or help on this issue?

the example dones't seem to work

single-spa: 3.9.0
single-spa-angular-cli: 0.4.0

The child apps of my application are still not mounted with the error
Cannot mount menu because that is not bootstraped,
but all files are loaded.

I think the child apps are not mounted because they do not appear in the window.singleSpaAngularCli.

Could you tell me where they should be added so I can research what's going wrong?

I am trying run this example but i am getting following error.
Do i need to make any other changes to avoid this error ?

Hi @robinComa -- thanks again for all of your help with this project. Could you make me a contributor on github for this project? And also the ability to publish to npm?

I'm hoping to be able to help out more with the issue queue and maintenance of this project.

@robinComa thanks again for your work on single-spa-angular-cli. It's really lowering the barrier for angular developers to use single-spa. I have updated the single-spa docs to link to your repositories (see single-spa/single-spa@1dbafc1 and single-spa/single-spa-angular@8e3accb).

Would you be interested in joining in on some discussions on the future of single-spa and what features are coming down the pipe? Also how we can best promote and document the project. If so, check out https://github.com/CanopyTax/single-spa/projects where we are tracking some of our work. Also there is a slack channel with a group where we have broader discussions about things like this. You can join the channel here and I will add you to the group once you're in the channel.

When you import some kind of font in angular-cli.json/styles section and run ng on development mode, it generates an script that inject the <style> tags on runtime. That causes that the font are not loaded.

You need to force the "styles.css" files to be generated. For solve that problem, the command must be run with the "extractCss" modifier:

ng serve  --extractCss

Currently, child apps are unmounted whenever the user navigates away from them. For large child apps, this causes long load times every time a user navigates back to a child app. If there was an option to leave an app mounted, only the initial load would be necessary.
I'm not sure how to set up passing options into the loader, but my team has manually cloned this repo into our project and turned off unmounting, so I could help with that.