Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular needs JIT compiler and throws error trying to share Angular between microfrontends #1164

Closed
mattiaforc opened this issue Nov 12, 2023 · 2 comments
Closed

Angular needs JIT compiler and throws error trying to share Angular between microfrontends #1164

mattiaforc opened this issue Nov 12, 2023 · 2 comments

Comments

@mattiaforc
Copy link

Describe the bug or question
Hi everyone, I am having trouble sharing Angular between multiple microfrontends, like this. I tried different things but got different errors that I could not overcome; I am not an expert on Webpack/Angular so maybe it's a simple issue, yet I can't understand where the problem lies!

Let's start with the configuration in one Angular microfrontend. This is my webpack.config.js:

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

module.exports = (config, options) => {
  let externals = [
  if (config.mode === "production") {
    externals = [
      "@angular/animations",
      "@angular/cdk",
      "@angular/common",
      "@angular/core",
      "@angular/compiler",
      "@angular/forms",
      "@angular/localize",
      "@angular/material",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "@ngx-translate/core",
      "@ngx-translate/http-loader",
      "bootstrap",
      "bootstrap-material-design",
      "bootstrap-notify",
      "express",
      "mitt",
      "oidc-client-ts",
      "rxjs",
      // "single-spa-angular",
      "tslib"
    ]
  }

  let extraOptions = {
    output: {
      libraryTarget: "system"
    },
    externals: externals
  }

  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  return merge(singleSpaWebpackConfig, extraOptions);
};

I first tried declaring externals also when running locally/in development mode, but the problem was the same.
The problem I get is in the "Console output" section below. The only way to make it work is to not add @angular/* libraries in external. I also tried removing from externals only @angular/compiler and @angular/platform-browser-dynamic, but the problem stays the same.

The app-root configuration with the import-map:

<script type="systemjs-importmap">
        {
          "imports": {
            "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
            "@angular/animations": "https://ga.system.jspm.io/npm:@angular/animations@16.2.12/fesm2022/animations.mjs",
            "@angular/cdk": "https://ga.system.jspm.io/npm:@angular/cdk@16.2.12/fesm2022/cdk.mjs",
            "@angular/common": "https://ga.system.jspm.io/npm:@angular/common@16.2.12/fesm2022/common.mjs",
            "@angular/compiler": "https://ga.system.jspm.io/npm:@angular/compiler@16.2.12/fesm2022/compiler.mjs",
            "@angular/core": "https://ga.system.jspm.io/npm:@angular/core@16.2.12/fesm2022/core.mjs",
            "@angular/forms": "https://ga.system.jspm.io/npm:@angular/forms@16.2.12/fesm2022/forms.mjs",
            "@angular/localize": "https://ga.system.jspm.io/npm:@angular/localize@16.2.12/fesm2022/localize.mjs",
            "@angular/material": "https://ga.system.jspm.io/npm:@angular/material@16.2.10/fesm2022/material.mjs",
            "@angular/platform-browser": "https://ga.system.jspm.io/npm:@angular/platform-browser@16.2.12/fesm2022/platform-browser.mjs",
            "@angular/platform-browser-dynamic": "https://ga.system.jspm.io/npm:@angular/platform-browser-dynamic@16.2.12/fesm2022/platform-browser-dynamic.mjs",
            "@angular/router": "https://ga.system.jspm.io/npm:@angular/router@16.2.12/fesm2022/router.mjs",
            "@ngx-translate/core": "https://ga.system.jspm.io/npm:@ngx-translate/core@15.0.0/dist/fesm2022/ngx-translate-core.mjs",
            "@ngx-translate/http-loader": "https://ga.system.jspm.io/npm:@ngx-translate/http-loader@8.0.0/dist/fesm2022/ngx-translate-http-loader.mjs",
            "bootstrap": "https://ga.system.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js",
            "bootstrap-material-design": "https://ga.system.jspm.io/npm:bootstrap-material-design@4.1.3/dist/js/bootstrap-material-design.js",
            "bootstrap-notify": "https://ga.system.jspm.io/npm:bootstrap-notify@3.1.3/bootstrap-notify.js",
            "express": "https://ga.system.jspm.io/npm:express@4.18.2/index.js",
            "mitt": "https://ga.system.jspm.io/npm:mitt@3.0.1/dist/mitt.mjs",
            "oidc-client-ts": "https://ga.system.jspm.io/npm:oidc-client-ts@2.4.0/dist/esm/oidc-client-ts.js",
            "react": "https://ga.system.jspm.io/npm:react@17.0.2/dev.index.js",
            "react-burger-menu": "https://ga.system.jspm.io/npm:react-burger-menu@3.0.9/lib/BurgerMenu.js",
            "react-dom": "https://ga.system.jspm.io/npm:react-dom@17.0.2/dev.index.js",
            "rxjs": "https://ga.system.jspm.io/npm:rxjs@7.8.1/dist/esm5/index.js",
            "rxjs/operators": "https://ga.jspm.io/npm:rxjs@7.8.1/dist/esm5/operators/index.js",
            "single-spa-angular": "https://ga.system.jspm.io/npm:single-spa-angular@8.1.1/fesm2020/single-spa-angular.mjs",
            "tslib": "https://ga.system.jspm.io/npm:tslib@2.6.2/tslib.es6.mjs"
          },
          "scopes": {
            "https://ga.system.jspm.io/": {
              "#util.inspect.js": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/@empty.js",
              "@angular/common/http": "https://ga.system.jspm.io/npm:@angular/common@16.2.12/fesm2022/http.mjs",
              "@popperjs/core": "https://ga.system.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js",
              "accepts": "https://ga.system.jspm.io/npm:accepts@1.3.8/index.js",
              "array-flatten": "https://ga.system.jspm.io/npm:array-flatten@1.1.1/array-flatten.js",
              "async_hooks": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/async_hooks.js",
              "body-parser": "https://ga.system.jspm.io/npm:body-parser@1.20.1/index.js",
              "buffer": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/buffer.js",
              "bytes": "https://ga.system.jspm.io/npm:bytes@3.1.2/index.js",
              "call-bind/callBound": "https://ga.system.jspm.io/npm:call-bind@1.0.5/callBound.js",
              "content-disposition": "https://ga.system.jspm.io/npm:content-disposition@0.5.4/index.js",
              "content-type": "https://ga.system.jspm.io/npm:content-type@1.0.5/index.js",
              "cookie": "https://ga.system.jspm.io/npm:cookie@0.5.0/index.js",
              "cookie-signature": "https://ga.system.jspm.io/npm:cookie-signature@1.0.6/index.js",
              "crypto": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/crypto.js",
              "crypto-js/": "https://ga.system.jspm.io/npm:crypto-js@4.2.0/",
              "debug": "https://ga.system.jspm.io/npm:debug@2.6.9/src/browser.js",
              "define-data-property": "https://ga.system.jspm.io/npm:define-data-property@1.1.1/index.js",
              "depd": "https://ga.system.jspm.io/npm:depd@2.0.0/lib/browser/index.js",
              "destroy": "https://ga.system.jspm.io/npm:destroy@1.2.0/index.js",
              "ee-first": "https://ga.system.jspm.io/npm:ee-first@1.1.1/index.js",
              "encodeurl": "https://ga.system.jspm.io/npm:encodeurl@1.0.2/index.js",
              "escape-html": "https://ga.system.jspm.io/npm:escape-html@1.0.3/index.js",
              "etag": "https://ga.system.jspm.io/npm:etag@1.8.1/index.js",
              "eve": "https://ga.system.jspm.io/npm:eve@0.5.4/eve.js",
              "events": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/events.js",
              "finalhandler": "https://ga.system.jspm.io/npm:finalhandler@1.2.0/dev.index.js",
              "forwarded": "https://ga.system.jspm.io/npm:forwarded@0.2.0/index.js",
              "fresh": "https://ga.system.jspm.io/npm:fresh@0.5.2/index.js",
              "fs": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
              "function-bind": "https://ga.system.jspm.io/npm:function-bind@1.1.2/index.js",
              "get-intrinsic": "https://ga.system.jspm.io/npm:get-intrinsic@1.2.2/index.js",
              "gopd": "https://ga.system.jspm.io/npm:gopd@1.0.1/index.js",
              "has-property-descriptors": "https://ga.system.jspm.io/npm:has-property-descriptors@1.0.1/index.js",
              "has-proto": "https://ga.system.jspm.io/npm:has-proto@1.0.1/index.js",
              "has-symbols": "https://ga.system.jspm.io/npm:has-symbols@1.0.3/index.js",
              "hasown": "https://ga.system.jspm.io/npm:hasown@2.0.0/index.js",
              "http": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/http.js",
              "http-errors": "https://ga.system.jspm.io/npm:http-errors@2.0.0/index.js",
              "iconv-lite": "https://ga.system.jspm.io/npm:iconv-lite@0.4.24/lib/index.js",
              "inherits": "https://ga.system.jspm.io/npm:inherits@2.0.4/inherits_browser.js",
              "ipaddr.js": "https://ga.system.jspm.io/npm:ipaddr.js@1.9.1/lib/ipaddr.js",
              "jquery": "https://ga.system.jspm.io/npm:jquery@3.7.1/dist/jquery.js",
              "jwt-decode": "https://ga.system.jspm.io/npm:jwt-decode@3.1.2/build/jwt-decode.cjs.js",
              "media-typer": "https://ga.system.jspm.io/npm:media-typer@0.3.0/index.js",
              "merge-descriptors": "https://ga.system.jspm.io/npm:merge-descriptors@1.0.1/index.js",
              "methods": "https://ga.system.jspm.io/npm:methods@1.1.2/index.js",
              "mime": "https://ga.system.jspm.io/npm:mime@1.6.0/dev.mime.js",
              "mime-db": "https://ga.system.jspm.io/npm:mime-db@1.52.0/dev.index.js",
              "mime-types": "https://ga.system.jspm.io/npm:mime-types@2.1.35/index.js",
              "ms": "https://ga.system.jspm.io/npm:ms@2.0.0/index.js",
              "negotiator": "https://ga.system.jspm.io/npm:negotiator@0.6.3/index.js",
              "net": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/net.js",
              "object-assign": "https://ga.system.jspm.io/npm:object-assign@4.1.1/index.js",
              "object-inspect": "https://ga.system.jspm.io/npm:object-inspect@1.13.1/index.js",
              "on-finished": "https://ga.system.jspm.io/npm:on-finished@2.4.1/index.js",
              "parseurl": "https://ga.system.jspm.io/npm:parseurl@1.3.3/index.js",
              "path": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/path.js",
              "path-to-regexp": "https://ga.system.jspm.io/npm:path-to-regexp@0.1.7/index.js",
              "popper.js": "https://ga.system.jspm.io/npm:popper.js@1.16.1/dist/umd/popper.js",
              "process": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/process.js",
              "prop-types": "https://ga.system.jspm.io/npm:prop-types@15.8.1/dev.index.js",
              "proxy-addr": "https://ga.system.jspm.io/npm:proxy-addr@2.0.7/index.js",
              "qs": "https://ga.system.jspm.io/npm:qs@6.11.0/lib/index.js",
              "querystring": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/querystring.js",
              "range-parser": "https://ga.system.jspm.io/npm:range-parser@1.2.1/index.js",
              "raw-body": "https://ga.system.jspm.io/npm:raw-body@2.5.1/index.js",
              "react-is": "https://ga.system.jspm.io/npm:react-is@16.13.1/dev.index.js",
              "rxjs/operators": "https://ga.system.jspm.io/npm:rxjs@7.8.1/dist/esm5/operators/index.js",
              "safe-buffer": "https://ga.system.jspm.io/npm:safe-buffer@5.2.1/index.js",
              "safer-buffer": "https://ga.system.jspm.io/npm:safer-buffer@2.1.2/safer.js",
              "scheduler": "https://ga.system.jspm.io/npm:scheduler@0.20.2/dev.index.js",
              "scheduler/tracing": "https://ga.system.jspm.io/npm:scheduler@0.20.2/dev.tracing.js",
              "send": "https://ga.system.jspm.io/npm:send@0.18.0/index.js",
              "serve-static": "https://ga.system.jspm.io/npm:serve-static@1.15.0/index.js",
              "set-function-length": "https://ga.system.jspm.io/npm:set-function-length@1.1.1/index.js",
              "setprototypeof": "https://ga.system.jspm.io/npm:setprototypeof@1.2.0/index.js",
              "side-channel": "https://ga.system.jspm.io/npm:side-channel@1.0.4/index.js",
              "single-spa-angular/internals": "https://ga.system.jspm.io/npm:single-spa-angular@8.1.1/fesm2020/single-spa-angular-internals.mjs",
              "snapsvg-cjs": "https://ga.system.jspm.io/npm:snapsvg-cjs@0.0.6/dist/snap.svg-cjs.js",
              "statuses": "https://ga.system.jspm.io/npm:statuses@2.0.1/dev.index.js",
              "stream": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/stream.js",
              "string_decoder": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/string_decoder.js",
              "toidentifier": "https://ga.system.jspm.io/npm:toidentifier@1.0.1/index.js",
              "type-is": "https://ga.system.jspm.io/npm:type-is@1.6.18/index.js",
              "unpipe": "https://ga.system.jspm.io/npm:unpipe@1.0.0/index.js",
              "url": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/url.js",
              "util": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/util.js",
              "utils-merge": "https://ga.system.jspm.io/npm:utils-merge@1.0.1/index.js",
              "vary": "https://ga.system.jspm.io/npm:vary@1.1.2/index.js",
              "zlib": "https://ga.system.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/zlib.js"
            }
          }
        }
    </script>

    <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

<!--
      If you need to support Angular applications, uncomment the script tag below to ensure only one instance of ZoneJS is loaded
      Learn more about why at https://single-spa.js.org/docs/ecosystem-angular/#zonejs
    -->
    <script src="https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>
    <% if (isLocal) { %>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/amd.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/named-register.js"></script>
    <% } else { %>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/amd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/named-register.min.js"></script>
    <% } %>

In the app-root configuration I tried many things, this configuration uses JSPM (I can't find the documentation that links JSPM, but I guess I found it on the single-spa docs). I had to use the ga.system.jspm.io for SystemJS modules instead of ga.jspm.io because otherwise I would get these errors:

ERROR
import declarations may only appear at top level of a module
ERROR
export declarations may only appear at top level of a module
ERROR
import declarations may only appear at top level of a module

To Reproduce
This is the package.json of the angular microfrontend:

{
  "name": "footer-mfe",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "build:single-spa:footer-mfe": "ng build footer-mfe --configuration production",
    "serve:single-spa:footer-mfe": "ng s --project footer-mfe --disable-host-check --port 7000 --live-reload false"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.2.12",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "bootstrap": "^5.3.2",
    "express": "^4.18.2",
    "http-proxy-middleware": "^2.0.6",
    "rxjs": "~7.8.0",
    "single-spa": ">=4.0.0",
    "single-spa-angular": "^8.1.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "16.0.1",
    "@angular-devkit/build-angular": "^16.1.1",
    "@angular/cli": "~16.1.1",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "style-loader": "^3.3.1",
    "typescript": "~5.1.3"
  }
}

I test it via running npm run build:single-spa:footer-mfe && sudo python3 -m http.server --directory dist/footer-mfe/ and editing the webpack.config.js file - the only way I could make it work is by not adding angular libraries to the externals array.

Expected behavior
Angular is shared between frontends, reducing build size and optimizing performance when there are multiple Angular microfrontends

Screenshots and/or console output

application '@org/footer-mfe' died in status LOADING_SOURCE_CODE: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
getCompilerFacade@https://ga.system.jspm.io/npm:@angular/core@16.2.12/fesm2022/core.mjs:603:3717
ɵɵngDeclareFactory@https://ga.system.jspm.io/npm:@angular/core@16.2.12/fesm2022/core.mjs:5532:635
execute/PlatformLocation<@https://ga.system.jspm.io/npm:@angular/common@16.2.12/fesm2022/common.mjs:1090:155
execute@https://ga.system.jspm.io/npm:@angular/common@16.2.12/fesm2022/common.mjs:1090:71
doExec@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:459:34
postOrderExec@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:455:12
postOrderExec/<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:439:47
postOrderExec@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:436:12
topLevelLoad/load.C<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:409:14
e.prototype.invoke@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7171
t.prototype.run@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2271
w/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2767
e.prototype.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7855
t.prototype.runTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2934
_@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:10171
t.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:9016
p@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:733
h@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:967
EventListener.handleEvent*A/v/Z<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:1885
e.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7596
t.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3505
t.prototype.scheduleEventTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3954
A/v/F/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:3546
systemJSPrototype.instantiate/<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:568:14
e@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2990
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:563:12
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:801:26
systemPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/amd.js:80:24
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/named-register.js:61:26
getOrCreateLoad/instantiatePromise<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:278:21
e.prototype.invoke@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7171
t.prototype.run@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2271
w/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2767
e.prototype.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7855
t.prototype.runTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2934
_@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:10171
t.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:9016
p@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:733
h@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:967
EventListener.handleEvent*A/v/Z<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:1885
e.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7596
t.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3505
t.prototype.scheduleEventTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3954
A/v/F/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:3546
systemJSPrototype.instantiate/<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:568:14
e@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2990
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:563:12
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:801:26
systemPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/amd.js:80:24
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/extras/named-register.js:61:26
getOrCreateLoad/instantiatePromise<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:278:21
e.prototype.invoke@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7171
t.prototype.run@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2271
w/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2767
e.prototype.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7855
t.prototype.runTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2934
_@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:10171
t.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:9016
p@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:733
h@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:967
EventListener.handleEvent*A/v/Z<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:1885
e.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7596
t.prototype.scheduleTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3505
t.prototype.scheduleEventTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:3954
A/v/F/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:3546
systemJSPrototype.instantiate/<@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:568:14
e@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2990
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:563:12
systemJSPrototype.instantiate@https://cdn.jsdelivr.net/npm/systemjs@6.2.5/dist/system.js:801:26
@mattiaforc
Copy link
Author

Upon further investigation, I tried to change the packages from JSPM to the exact packages as stated in the docs, with this import-map:

{
  "rxjs": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs.min.js",
  "rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs-operators.min.js",
  "@angular/core": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__core/system/es2022/ivy/angular-core.min.js",
  "@angular/common": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__common/system/es2020/ivy/angular-common.min.js",
  "@angular/common/http": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__common/system/es2020/ivy/angular-http.min.js",
  "@angular/animations": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__animations/system/es2020/ivy/angular-animations.js",
  "@angular/animations/browser": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__animations/system/es2020/ivy/angular-browser.js",
  "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__platform-browser/system/es2020/ivy/angular-platform-browser.js",
  "@angular/platform-browser/animations": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__platform-browser/system/es2020/ivy/angular-animations.js",
  "@angular/platform-browser/animations": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__platform-browser/system/es2020/ivy/angular-animations.js",
  "@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__platform-browser-dynamic/system/es2020/ivy/angular-platform-browser-dynamic.js",
  "@angular/router": "https://cdn.jsdelivr.net/npm/@esm-bundle/angular__router/system/es2020/ivy/angular-router.js",
  "single-spa-angular/internals": "https://cdn.jsdelivr.net/npm/@esm-bundle/single-spa-angular@6.2.0/system/es2020/ivy/angular-single-spa-angular-internals.js",
  "single-spa-angular": "https://cdn.jsdelivr.net/npm/@esm-bundle/single-spa-angular@6.2.0/system/es2020/ivy/angular-single-spa-angular.js"
}

But I get this error:

application '@brt-it/footer-mfe' died in status LOADING_SOURCE_CODE: class heritage ɵBrowserPlatformLocation is not an object or null
execute@https://cdn.jsdelivr.net/npm/@esm-bundle/single-spa-angular@6.2.0/system/es2020/ivy/angular-single-spa-angular.js:34:13
doExec@https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js:469:34
postOrderExec@https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js:465:12
postOrderExec/<@https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js:451:43
postOrderExec@https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js:449:12
topLevelLoad/load.C<@https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js:422:14
e.prototype.invoke@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7171
t.prototype.run@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2271
w/<@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:27:2767
e.prototype.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:7855
t.prototype.runTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:2934
_@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:10171
t.invokeTask@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:13:9016
p@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:733
h@https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js:43:967

@MilanKovacic
Copy link
Collaborator

Hi, please reopen the issue in https://github.com/single-spa/single-spa-angular.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MilanKovacic @mattiaforc