Getting an error with angular8 dependencies sharing

3gwebtrain commented 4 years ago

I am trying to integrate the angular8 dependencies. all most look fine. But getting an error it blocks to wokr.

zone.min.js:1 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (tslib.es6.js:21)
    at __extends (tslib.es6.js:25)
    at extra-providers.ts:14
    at Object.<anonymous> (extra-providers.ts:14)
    at Object.execute (amd.js:56)
    at Object.declaration.execute (named-exports.js:42)
    at doExec (system.js:478)
    at postOrderExec (system.js:474)
    at system.js:457

App package.json:

{
  "name": "login",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:single-spa:login": "ng build login --prod --deploy-url http://localhost:4203/",
    "serve:single-spa:login": "ng s --project login --disable-host-check --port 4203 --deploy-url http://localhost:4203/ --live-reload false"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.9",
    "@angular/common": "~8.2.9",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.9",
    "@angular/forms": "~8.2.9",
    "@angular/platform-browser": "~8.2.9",
    "@angular/platform-browser-dynamic": "~8.2.9",
    "@angular/router": "~8.2.9",
    "add": "^2.0.6",
    "ng": "^0.0.0",
    "rxjs": "~6.4.0",
    "single-spa-angular": "3.5.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8",
    "@angular-devkit/build-angular": "~0.803.10",
    "@angular/cli": "~8.2.2",
    "@angular/compiler-cli": "~8.2.8",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.5.3"
  }
}

root ejs file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Root Config</title>
  <!--
    Remove this if you only support browsers that support async/await.
    This is needed by babel to share largeish helper code for compiling async/await in older
    browsers. More information at https://github.com/single-spa/create-single-spa/issues/112
  -->
  <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.5/runtime.min.js"></script>
  <!-- 
    This CSP allows any SSL-enabled host, but you should limit these directives further to increase your app's security.
    Learn more about CSP policies at https://content-security-policy.com/#directive
  -->
  <meta name="importmap-type" content="systemjs-importmap" />
  <!-- If you wish to turn off import-map-overrides for specific environments (prod), uncomment the line below -->
  <!-- More info at https://github.com/joeldenning/import-map-overrides/blob/master/docs/configuration.md#domain-list -->
  <!-- <meta name="import-map-overrides-domains" content="denylist:prod.example.com" /> -->

  <!-- Shared dependencies go into this import map. Your shared dependencies must be of one of the following formats:

    1. System.register (preferred when possible) - https://github.com/systemjs/systemjs/blob/master/docs/system-register.md
    2. UMD - https://github.com/umdjs/umd
    3. Global variable

    More information about shared dependencies can be found at https://single-spa.js.org/docs/recommended-setup#sharing-with-import-maps.
  -->
  <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@3.5.0/lib/single-spa.min.js",
        "single-spa-angular/internals": "https://cdn.jsdelivr.net/npm/single-spa-angular@4.5.0/bundles/single-spa-angular-internals.umd.js",
        "single-spa-angular": "https://cdn.jsdelivr.net/npm/single-spa-angular@3.5.0/lib/browser-lib/cjs/single-spa-angular.min.js"
      }
    }
  </script>
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@3.5.0/lib/single-spa.min.js" as="script">

  <!-- Add your organization's prod import map URL to this script's src  -->
  <!-- <script type="systemjs-importmap" src="/importmap.json"></script> -->

  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@ibo/root-config": "//localhost:9000/ibo-root-config.js",
        "@ibo/login": "http://localhost:4203/main.js",

        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@4.0.0/lib/single-spa.min.js",
        "single-spa-angular/internals": "https://cdn.jsdelivr.net/npm/single-spa-angular@4.5.0/bundles/single-spa-angular-internals.umd.js",
        "single-spa-angular": "https://cdn.jsdelivr.net/npm/single-spa-angular@4.5.0/bundles/single-spa-angular.umd.js",

        "rxjs": "https://cdn.jsdelivr.net/npm/rxjs@6.4.0/bundles/rxjs.umd.min.js",
        "rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs@6.6.3/system/es5/rxjs-operators.min.js",

        "@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@8.2.9/bundles/core.umd.min.js",
        "@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@8.2.0/bundles/compiler.umd.min.js", 
        "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@8.2.9/bundles/common.umd.min.js",
        "@angular/common/http": "https://unpkg.com/@angular/common@8.2.9/bundles/common-http.umd.js",

        "@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@8.2.9/bundles/platform-browser-dynamic.umd.min.js",
        "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@8.2.9/bundles/platform-browser.umd.min.js",
        "@angular/platform-browser/animations": "https://unpkg.com/@angular/platform-browser@8.2.9/bundles/platform-browser-animations.umd.js",

        "@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/forms@8.2.9/bundles/forms.umd.min.js",
        "@angular/router": "https://cdn.jsdelivr.net/npm/@angular/router@8.2.9/bundles/router.umd.min.js",
        "@angular/animations": "https://cdn.jsdelivr.net/npm/@angular/animations@8.2.9/bundles/animations.umd.min.js",
        "@angular/animations/browser": "https://unpkg.com/@angular/animations@8.2.9/bundles/animations-browser.umd.js"
      }
    }
  </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.9.1/dist/zone.min.js"></script>
  <script src='https://unpkg.com/core-js-bundle@3.6.5/minified.js'></script>

  <% if (isLocal) { %>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.js"></script>
  <% } else { %>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.min.js"></script>
  <% } %>
</head>
<body>
  <main id="main"></main>
  <script>
    System.import('@ibo/root-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

here is the repo

daniloesk commented 4 years ago

@3gwebtrain , you started doing it right by building a demo. Here are some points:

The dependencies are in the wrong place of index.ejb. There are two blocks, one "dependencies" and other "your projects".
Check if your '@ibo' in externals is not excluding your own code. I am not sure if this applies only to dependencies.

ajaykrishnan33 commented 3 years ago

@3gwebtrain This is a very old issue, but posting a fix here in case it helps someone else facing the same issue.

The above issue is occurring since you are using v4.x of single-spa-angular along with v8 of Angular. Technically, v4.x only supports v9-11 of Angular. For Angular v2-8, you need to use v3 of single-spa-angular. Source: https://single-spa.js.org/docs/ecosystem-angular/#angular-8

After downgrading to single-spa-angular v3.6.0, I was unable to find any systemJS-compatible bundle for single-spa-angular so that I could share that too as a dependency between my applications. So I cloned this repo and modified the rollup configuration to generate UMD bundles for single-spa-angular as follows:

rollup.config.js

package.json

This generated the following bundle:

I loaded this into my root module systemjs-importmap like this (i was running a local fileserver on port 7000):

Note that I have not put single-spa-angular/internal in my importmap since this doesn't exist for v3 of single-spa-angular.

After doing all this, the above error went away, but I got a new error, this time from the compiler.js file:

I spent a lot of time trying to solve this, but couldn't identify the root cause of this.

Meanwhile, since this error seemed to be coming from compiler.js I thought it might be an interesting experiment to see if I get the same error even after I build my angular applications with AOT enabled (because compiler.js should not be needed at runtime if using AOT). The experiment succeeded and the error vanished completely when I used AOT.

@arturovt @joeldenning Any possibility of releasing an update for v3 with support for SystemJS-compatible bundles by default? Would be a great help. Happy to contribute a PR if it helps. Also, any ideas about why dependency sharing doesn't work without AOT in Angular 8? I was unable to debug it by myself.

single-spa / single-spa-angular

Getting an error with angular8 dependencies sharing #323