Add support for Angular 13

[tymfear]

Add support for the Angular 13 since it is out today

[SunilManthenaG01]

Do we have any plan soon to update it to angular 13 ?

[joeldenning]

@arturovt are you able to help with this? I do not have plans to work on this. The single-spa-angular project doesn't really have any maintainers and so if @arturovt doesn't have time to do so we'll wait for someone else from the community to help out with this.

[arturovt]

Hey, what issues are you experiencing with Angular 13?

We don't use any functionality that was removed in Angular 13 (marked as a breaking change) within the library code. Angular 13 has just introduced the new package format (which is only related to how libraries are published and they're not run through the ngcc compiler).

I can't update this repo to Angular 13 since it uses Nx which is not compatible with Angular 13 yet. I'll be able to do that only when Nx releases the Angular 13 compatible version.

[willsicko]

Hi, I try in angular 13 and i have this problem, its a clean proyect

"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular/cli": "~13.0.1",
"@angular/compiler-cli": "~13.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3"
}

[arturovt]

Alright, this is because we’re using VERSION from @angular/core. Nx will release the next version soon so I’ll be able to check it and fix it.

[ALP011216]

Hi,
a problem I ran into with Angular 13 was a webpack-dev-server config issue.
Now Angular uses a webpack-dev-server version >= 4.0.0 so contentBase isn't a supported config property anymore.
Using the static property instead of contentBase should solve the issue.

[jogelin]

Hi, a problem I ran into with Angular 13 was a webpack-dev-server config issue. Now Angular uses a webpack-dev-server version >= 4.0.0 so contentBase isn't a supported config property anymore. Using the static property instead of contentBase should solve the issue.

Same here, I patched the single-spa config for now by following webpack doc:

  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  const singleSpaWebpackConfigPatched = {
    ...singleSpaWebpackConfig,
    devServer: {
      ...singleSpaWebpackConfig.devServer,
      static: {
          directory: singleSpaWebpackConfigPatched.devServer.contentBase,
        },
      }
    },
  };
  delete singleSpaWebpackConfigPatched.devServer.contentBase;

[tscislo]

@joeldenning @arturovt It would be great if we don't fall behind with Single SPA when it comes to Angular migrations. Currently to run Single SPA with newest Angular v 13 one needs to do this patch plus the one that I described in #328. to make it work with Angular 12. There are still some people using Angular out there ;) Is there a plan to release updated version of single-spa-angular ?

[arturovt]

I made a PR 2 weeks ago (#398), but it's awaiting review.

[tscislo]

Great please approve @jogelin

[jogelin]

I also see some errors in my console concerning HMR:

main.js:21586 WebSocket connection to 'wss://my-app-host/ws' failed: 

In fact, by default, the client WebSocket of the Webpack dev-server is using the current host but it should target the micro-frontend server instead.

So I added this in my webpack config:

  devServer: {
      client: {
        webSocketURL: {
          hostname: config.devServer.host,
          port: config.devServer.port,
        },
      },
    },

I don't see the error anymore and I see now [webpack-dev-server] App updated. Recompiling... in my console when modifying my micro-frontend. But the module is not reloading, didn't investigate more yet.

@arturovt could you include that in your PR?

[araza-mms]

Any updates on this one?

[chucknelson]

@joeldenning @arturovt - Just a reminder that this can be closed per #398 - thanks!

[arturovt]

I'll keep it opened for some time if anyone will face any issue.

[ALP011216]

@arturovt
After updating to version 6 I get the following error:
An unhandled exception occurred: Package subpath './lib/webpack' is not defined by "exports" in .../node_modules/single-spa-angular/package.json

I guess the issue is related to the custom webpack config:
const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

Am I missing something here or should this work?

[arturovt]

@ALP011216 made a PR with a fix: #405

[jogelin]

To unlock me until PR #405 is merged, I am using a hacky solution: patch-package.

• Install patch-package (read doc)
• update node_modules/single-spa-angular/package.json with:

...
  "exports": {
    "./lib/webpack": {
      "default": "./lib/webpack/index.js"
    },
    ...
  }

• run npx patch-package single-spa-angular --exclude 'nothing'
• and it will generate a patch that you can apply each time by using postinstall (see doc)

diff --git a/node_modules/single-spa-angular/package.json b/node_modules/single-spa-angular/package.json
index 73ae5b0..8fb1f6c 100644
--- a/node_modules/single-spa-angular/package.json
+++ b/node_modules/single-spa-angular/package.json
@@ -36,6 +36,9 @@
   "fesm2015": "fesm2015/single-spa-angular.mjs",
   "typings": "single-spa-angular.d.ts",
   "exports": {
+    "./lib/webpack": {
+      "default": "./lib/webpack/index.js"
+    },
     "./package.json": {
       "default": "./package.json"
     },

[arturovt]

I've published single-spa-angular@6.0.1 with fixes, release notes are here https://github.com/single-spa/single-spa-angular/releases/tag/v6.0.1.

[tymfear]

@arturovt so how does config should look like with that the latest version?

[arturovt]

@tymfear sorry for the late response, hard times for Ukraine.. you shouldn't do any changes, just migrate the Angular and update single-spa-angular to ^6.0.0.

[arturovt]

I’ll close the issue. Feel free to open new issues if you encounter anything. It would be easier to track new issues since this one is over growing.

[tscislo]

Thank you @arturovt! I just tested 6.0.2 with Angular 13.2.x and it works fine. Keep safe @arturovt!

[tymfear]

So, when trying to upgrade I got now the problem that importmap override does not work on CI when we run e2e with Playwright (locally it works). And with v5 that is not an issue. Has anyone seen such issues?