Hi @joeldenning ,
I cloned this repository and added some CSS styles to the app1's style.css which should be specific to app1.
Now the issue is while switching to app2 from app1, styles of app1 remain applicable to app2's contents and styles are not unmouting.

please help 😊😊

Thank you.

How can we load custom font awesome files in spa application?

Hi,
After npm i and npm start, App.component is not rendered in the browser. There's an empty page with an empty app1-root element on it. It seems the bootstrap process is not working as expected. App.component constructor is not even executed.
Any ideas?

Hello,

I'm a newbie and currently facing issues while setup.
I have downloaded the project and loaded.
I have run the following scripts
cd app1
npm i
npm start

The app is running and I have tried to open Surge.sh link and I am seeing 2 console errors by default without overriding any app.

Did I miss something?
Because even after overriding an app(app1), I cannot see the output

Hi @joeldenning @Vallerious @varora1406

I wanted to have some api calls in app1 so can i have proxy configuration in root-html-file or some other place.

Please help.
Thanks,
Ajay

I'd gladly accept a pull request upgrading from systemjs 4 to systemjs 6

Lets say I'm hosting shell app on port 5500. And my app main bundle is available on port 4200. When a module is lazy loaded (for app on port 4200), network request goes on Port 5500 instead of port 4200. Hence it fails as 404. Any suggestions on how to handle it ?

Hi,

I'm trying to include a new angular application in another one using the single spa, but it's not working with me, so what is the best approach to do it?

Can I do it without using routing?

Thanks a lot.

Hello,
My page has 2 layouts in master app, one with full width and one with sidebar and main section.
I want to place my angular app inside the main section of my page.
On back button i have this message:

The domElementGetter returning null because the document.body is not ready yet.

Here is my code on main.sinlge-spa.ts

var el;
function domElementGetter() {
  el = document.getElementById('main-section');
  console.log("inside dome element")
  if (!el) {
    console.log("el doent not exist")
    return existingElement();
  }
  else{
    el = document.getElementById('main-section');
    return el;
  }
}
function existingElement(){
  var checkExist = setInterval(function() { 
    console.log("test") 
    console.log(document.body) 
    if (document.getElementById('main-section')) { 
      console.log("Element Exists!"); 
      clearInterval(checkExist); 
      return document.getElementById('main-section');
    } }, 100);
}

Any ideas?

I have a problem with routes with outlets inside a lazyloading module.

APP1Routing module:

const routes: Routes = [
  {
    path:'app1',
    children:[
      {path:'child',component:ChildComponent},
      {path:'outlet',outlet:'example',component:OutletComponent},
      {path:'lazy',
      loadChildren:()=>import('./lazy/lazy.module').then(m => m.LazyModule)
      },
    ]
  },
  { path: '**', component: EmptyRouteComponent },

];

LazyModule routing:

const routes: Routes = [`
  {
    path:'',
    component:LazyComponent,
    children:[
      {path:'child',component:ChildLazyComponent},
      {path:'outlet',
       outlet:'example',
       component:OutletLazyComponent},
    ]
  },

];

Console don't display errors or warnings.

Ps: I create one fork with the example (https://github.com/diogolPereira/coexisting-angular-microfrontends).

Hi everyone!!!
you know if it would be possible to connect a JavaScript Debug (from the ide) to the root and after that set breakpoint in the other app for debug simultaneously the whole system?

I've been trying for a couple of days but without getting any positive results...

E.g:

1. How to share current user information to sub-applications after logging in from the main application?
2. If the application is internationalized, how do other applications listen after the main application switches languages?
   ...

Are there any other better ways besides localStorage?

Could you suggest anything?
Thank you!

For example, let's say I created my own class for a bus event in a separate file which imports various methods from other libraries as well. How can I pass instance of that class as a customprop to registerApplication method, since it's in html file under System.import , I'm facing error : cannot use import statement outside a module

Minimal Reproduction

2. Add routerLink in app1:

  <a routerLink="/app2">
    To App 2
  </a>

2. Add routerLink in app2:

  <a routerLink="/app1">
    To App 1
  </a>

3. Follow the directions in paragraph "Local development -- all at once"

4. Click link "to App1" then "toApp2"

5. Open devtools console and see stacktrace of error:

core.js:15724 ERROR Error: Expected to not be in Angular Zone, but it is!
    at Function../node_modules/@angular/core/fesm5/core.js.NgZone.assertNotInAngularZone (core.js:17197)
    at Object.next (core.js:17403)
    at SafeSubscriber.schedulerFn [as _next] (core.js:13515)
    at SafeSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
    at Subscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at EventEmitter../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
    at EventEmitter../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:13499)

As I can guess, if you don’t use navbar for routing, there is some dissynchronization between instances zone.js at the moment of switching applications, or something like that

Hi,

I have two applications loading in my portal application (app1 & app2) and they have routing.

when I navigate to child applicaiton app1/admin/route1 from portal application it is working fine and as well as app2/admin/route1 from portal application is also working fine.

where as when I refresh the page after navigating app1/admin/route1 getting error as page not found. how can we fix this issue?

Hello,

I have a question:
here is my scenario:
app1 or app2 has multiple routes(ex: "app1/route1" and "app1/route2").
Is it possible to use NavBar app for navigation?
how should I defined my single-spa config?

one more thing, since I am a new in this framework, could you tell me how can I a mount my micro frontend to specific dom?

thanks
webster

I am trying to integrate a react applications by making it a part of the imports in the index.html file for the root-html-field as:
{ "imports": { "app1": "http://localhost:4201/main.js",
"login": "http://localhost:4204/main.js",
"react-example": "http://localhost:4206/index.js",
"app2": "http://localhost:4202/main.js",
"navbar": "http://localhost:4203/main.js",
"single-spa": "https://unpkg.com/[email protected]/lib/system/single-spa.min.js" } }

But it is giving me the following error:
Access to script at 'http://localhost:4206/index.js' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
system.min.js:4 GET http://localhost:4206/index.js net::ERR_FAILED

Is there anything you can suggest to resolve this?

I am trying for days but no success using create-single-spa cli to create angular project but getting error

https://single-spa.slack.com/files/U02RQ5JF05P/F02RJGM0DPF/screen_shot_2021-12-21_at_9.22.52_pm.png

Using a CLI should be a seamless experience like React.
Thanks

hi, I downloaded the example and everything works but I tried to make changes on app1 but it doesn't take them live and I have to do f5 every time to see the changes. i tried to put live-reload to true on package.json but nothing has changed, is there a way to be able to put it to true?

i have my route defined as below in my child application

const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
];

when i navingate to /app1/admin, I am getting below error.

ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk admin-admin-module failed.
(error: http://localhost:4900/admin-admin-module.js)
ChunkLoadError: Loading chunk admin-admin-module failed.
(error: http://localhost:4900/admin-admin-module.js).

my root application is running on port 4900 and app1 is running on port 4901.

what changes I need to make to load the correct module in child application when navigating.

Hi guys,

I'm facing problems when importing a utility module microfrontend into an Angular microfrontend. The compiler generates an error on import because it is not present in node_modules. In microfrontend react, in webpack if it has the same orgname as the micrfrontend utility module, this problem does not happen, but in Angular I did not find a solution similar to this. Could you clarify if there is any way to solve this problem or if it definitely doesn't work with microfrontend in Angular?

Hello! Hopefully this is a straight forward issue as I have only begun to dive into the example. What I have been trying to do is access the routes of one of the applications that is not the root of the app. So basically I have routing set up on one of the apps to have a route /test. I have confirmed that accessing this app directly at the port it is running on successfully routes to this component. However when I run the whole thing and go to localhost:4200/app1/test the page does not appear. Does single spa support routing like this?

after following the instructions

cd app1
npm i
npm start

and visiting http://localhost:4201/
nothing shows up

Hi @joeldenning , @Vallerious
I've been using and following single spa for last 3 months, thanks for the tutorials so far.

I wanted to have child routes in Angular 9 app like
http://coexisting-angular-microfrontends.surge.sh/app1 - which loads app1 micro front end,
http://coexisting-angular-microfrontends.surge.sh/app1/childroute1
http://coexisting-angular-microfrontends.surge.sh/app1/childroute2

Is it possible to have above child routes? And if i refresh the link will it load properly?
I tried to use children to the { path: '**', component: EmptyRouteComponent } but it didn't work.
Can you please help?

Thanks a lot.

When running in Safari 9.1 on macOS, the page doesn't load. See the errors attached. I've tried adding a polyfill for Promise (bluebird) and Fetch API according to the systemjs readme but that doesn't work either.

Currently I clone project and deploy that, when I am in the path app1 or app2 and reload browser it doesn't work, show message 404 The requested path could not be found.

Do you have any idea for this error ?

Hello single-spa team,

I would like to use your framework as a groundwork for a rather large application for a very big company. The current skillset lies heavily in angular for this organization so this naturaly leads us to the question of the current state of support for angular.

Are you still maintaining the angular code base but delayed compared to the angular release cycle or is it completly halted?
Thanks in advance.

Hi,

I am newbie and this is my first angular project.

I am implementing micro front ends with existing two angular 7 projects and navbar so that when I click on particular router-link it should redirect to that project. To do this I have installed single spa(^3.0.1) and created extra-webpack.config.js in /ConditionSurveyDemo and main.single-spa.ts in /ConditionSurveyDemo/src (ConditionSurveyDemo is my existing project) and it is running succesfully. But when i click on conditionSurvey router-link i am getting this error

Below is my main.single-spa.ts file

am I missing anything? Can you please help me.

Thanks!!

Hi, all! Sorry for structuring this issue badly, perhaps a template for issues would be useful. :)

Steps to reproduce:

1. visit a route, for example, /app1
2. click the refresh button
3. Observe that the order of navbar and app1's content is switched.

This may not happen every time.

Solution:
As a solution, locally, I defined placeholders for the apps in the root-html-file -> index.html and then using domElementGetter, configured each application to load in those placeholders.

I would love to contribute for this issue, but am not sure if the index.html file is the correct place for defining the layout.

Hi @joeldenning @Vallerious ,

• cd navbar && npm ci && npm run build:single-spa
• cd ../app1 && npm ci && npm run build:single-spa
• cd ../app2 && npm ci && npm run build:single-spa
• cd .. && mkdir static && cp -a navbar/dist app1/dist app2/dist static
• cp root-html-file/index.html static
• sed -i 's/http://localhost:4201/main//dist/app1/main/g' static/index.html
• sed -i 's/http://localhost:4202/main//dist/app2/main/g' static/index.html
• sed -i 's/http://localhost:4300/main//dist/navbar/main/g' static/index.html
• cp static/index.html static/200.html
• echo "The static directory uploaded to surge:"
• find static

i tried to build by using above steps, i've got my static folder ready, When i put static folder inside apache or other server, I was able to load initial page properly.
The issue is when i navigate to '/app1' or '/app2' 'm getting 404 error.

Can you please help.

Does not support IE/Edge
Symbol is undefined
Promise is undefined
Syntax Error

Hello!
E.g：
app1 Have login

1. app2 How to call app1 login？

2. How to declare global variables (How to declare global variables for multiple items )?

3. Can you give a simple example in the project？

Reading the source code is clearer and more intuitive than the documentation, thank you！

Hi @joeldenning ,

last 2 weeks i was going through your repositories, i wanted to appreciate your efforts for Single spa. Though i could understand the things had a doubt i.e
How to build this repository, Is build command should be ran on each folder?

I ran npm run build:single-spa:<app_name> commands in each folder but that's not the solution, Could you please help me to get it done? And how to use import override in build time?

Thanks a lot

hi Joel,

I copied your repo and I've been trying to create a Named outlet for the app2 but it's not working. Here is the code:

<nav>
  <li>
    <a routerLink="/">Home</a>
  </li>
  <li>
    <a routerLink="/app1">App 1</a>
  </li>
  <li>
    <a [routerLink]="[{ outlets: { appOutlet: ['app2'] } }]">App 2</a>
  </li>
</nav>

Here are the router outlets:

<navbar-primary-nav></navbar-primary-nav>
<router-outlet></router-outlet>
<router-outlet name="appOutlet"></router-outlet>

Have you tried this one by any chance?

I am getting an error like this:

Error: Cannot match any routes. URL Segment: 'app2'
at ApplyRedirects../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2464)

Thank you.

Could someone share their experience of sharing Angular deps between several single-spa applications?

I made a recommended setup like in this repo: https://github.com/polyglot-microfrontends/shared-dependencies

It works for some libs but doesn't work for Angular.

What I've done for the moment:

1. Additional set of imports for the root application:

{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
    "single-spa-angular": "https://cdn.jsdelivr.net/npm/[email protected]/lib/browser-lib/single-spa-angular.min.js",
    "zone.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js",
    "rxjs": "https://unpkg.com/@esm-bundle/rxjs/system/rxjs.min.js",
    "rxjs/operators": "https://unpkg.com/@esm-bundle/rxjs/system/rxjs-operators.min.js",
    "@angular/core": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/core.umd.js",
    "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/common.umd.min.js",
    "@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/compiler.umd.js",
    "@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/forms.umd.min.js",
    "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/platform-browser.umd.min.js",
    "@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/platform-browser-dynamic.umd.min.js",
    "@angular/animations": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/animations.umd.min.js",
    "@angular/router": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/router.umd.min.js",
    "moment": "https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"
  }
}

2. Added externals to the extra-webpack-config.js

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
const webpackMerge = require("webpack-merge");

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);

  const externalsConfig = {
    externals: {
      'zone.js': 'Zone',
      "rxjs": "rxjs",
      'moment': 'moment',
      "@angular/core": "@angular/core",
      "@angular/common": "@angular/common",
      "@angular/compiler": "@angular/compiler",
      "@angular/forms": "@angular/forms",
      "@angular/platform-browser": "@angular/platform-browser",
      "@angular/platform-browser-dynamic": "@angular/platform-browser-dynamic",
      "@angular/animations": "@angular/animations",
      "@angular/router": "@angular/router"
    },
  };
  const mergedConfig = webpackMerge.smart(singleSpaWebpackConfig, externalsConfig);

  console.log(mergedConfig);

  return mergedConfig;
}

It works fine for dependencies except of @angular/*
On application loading I see:

Hello!
We currently have quite a lot of library updates that are pending.
How can we approach merging those?
Should we spend some time in testing each version bump and then approving the PR?
If I approve a PR, will it be eligible for merging ?

When i for example want to use font awesome in a micro frontend and reference the scss files in my angular cli json and build using the custom-webpack:browser all CSS files are rendered into the main.js file (even with exctractCss set to true).

when I visit the website it loads the main.js file from the microfrontend which is hosted on a subdomain. This is working as intended but because the CSS is then being injected it tries to load the fonts from the main domain instead of the subdomain which results in a 404 error.

Is there any way around this?

Hi,
First thanks for great code it's really helpful.

issue:
When i am trying to run individual application eg: app1 i am not able to see any of the app1 content on the browser. So how individual application can be development when the team is not able to see what they are developing

I tried to run individual application using ng server & npm start no output is displaying when is serve the http://localhost:4201 url

Please guide me how to run individual application.

Regards,
Bikshapathi

When trying to run the project the following error occurs:
Failed to load resource: the server responded with a status of 404 ()
and the following as well:
Uncaught Error: application 'navbar' died in status SKIP_BECAUSE_BROKEN: In this configuration Angular requires Zone.js

No modification has been done to the code, it's just been downloaded and executed with npm start after npm install.
The error can apparently be solved by adding the following line in the main.single-spa.ts file:
import 'zone.js/dist/zone';
This makes the navbar visible on screen. However, this modification causes another error:
GET https://unpkg.com/[email protected]/bundles/zone.umd.js net::ERR_ABORTED 404

Currently we have a situation similar to the example in this repository.

We have a root application. Navigation and 2 other applications (template-builder and pdf-printer).
Everything seems to work fine but we have one issue. When click a URL in the navigation (to switch between applications). The new application gets loaded but the other one remains on the screen.

We're quite clueless about it as we can't find any major diffirencese between our application and this example. The only diffirence we can see is that our sub-applications are a bit more complex having multiple routes.

const routes: Routes = [
   {
      path: 'pdf-templates',
      component: PdfTemplateListComponent,
      data: { title: 'List of PDF template' },
   },
   {
      path: 'pdf-templates/:id',
      component: PdfTemplateDetailComponent,
      data: { title: 'PDF template detail' },
   },
   { path: '', redirectTo: '/pdf-templates', pathMatch: 'full' },
   { path: '**', component: EmptyRouteComponent }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
   providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class AppRoutingModule { }

The CSS of the child application does seem to get unloaded tough, but the HTML remains on the page.

Can you give us any pointers that could help us?

I've noticed one critical issue with a router in "coexisting-angular-microfrontends" project:

When I switch quickly from app1 to app2 and switch back to app1 before app2 was completely loaded and rendered I'm getting into an infinite redirect loop.

Here is a demo:

Could you suggest anything?
Thank you!

Hello ,
We have developed portal which had 5 angular @7 projects , which are all running in @7.3.6 cli version with single-spa-sngular: "^3.0.0-beta.20" . All our applications are using different third party packages like echarts, deepstream ..etc. We are getting error as object undefined even though the scripts are loaded correctly.
We updated the required scripts in the angular.cli at architect/build Scripts "scripts": [
"./node_modules/deepstream.io-client-js/dist/deepstream.js",
"./node_modules/echarts/dist/echarts.min.js"]

Can you help us if we are missing any step.
Thank you.

I have set up an environment using your repository as a template and I am experiencing strange behavior. I have three apps set up: a navbar app, with two pages of its own, app1 and app2, with several pages to be displayed under the navbar.
behavior:
localhost:port/ - shows navbar - correct
localhost:port/navbarPage - shows navbar and navbar page - correct
localhost:port/app1Page - displays only the navbar for several seconds and then switches to showing only the app1Page or vice versa - wrong

What is really strange is that both single spa template divs are displayed and app1Page is inside the navbar div and the app1 div contains an empty app-root element. (see below)

I Noticed you updated the index html to use single-spa-layout, but i am still using the old version FYI. Here is my index.html:

exampleindex.txt

Any help will be appreciated!
Thanks!

how can i register application from environment.ts files using angular 8? this way i will avoid hard coding urls in index.html file and derive them from environment files based on environment.

Hi, there's a problem about live load, I found all child apps start command set the --live-load to false, but I changed it to true, there will be cause [ws] error.
But I try your coexisting-react-microfontends program, the hot reload is working.
What different be in react and angular program? And how I can make it?
Plz give me some suggestions, thank u

Hello,
After upgrading angular version to 9 and single-spa 5 i get the following error:

The error was caused due to angular 9 version using global $localize() function.

The solution here:
https://stackoverflow.com/questions/57953317/angular-9-introduced-a-global-localize-function-that-needs-to-be-loaded
fixes the problem by adding the import '@angular/localize/init'; to your polyfills.ts

After reading this:
https://single-spa.js.org/docs/ecosystem-angular#polyfills

I have to import @angular/localize/init and its dependencies in the index.html file.
Can you help me importing the modules in the root-html-file.
I dont want to import by npm. I want similar to this:

<script src='https://unpkg.com/core-js-bundle/minified.js'></script>

Thanks

I cloned the project and run app1, but got a blank page without error.

Do I need to do other work? Confused.

The Angular-CLI is @9.1.13.