Compatability issues with Angular 10

[adisreyaj]

Demonstration

1. Upgraded the CLI to latest Angular 10.
2. Created a new Angular project
3. Ran the ng add single-spa-angular schematics
4. I kept both using Routing and Browser Animations options
5. Added the APP_BASE_HREF and EmptyRouteComponent in AppModule
6. Served the application using the npm script npm run serve:single-spa

Outcome

Once we run the the serve comnand, the compiler throws in this error:

ERROR in ./src/main.single-spa.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /home/adithya/Desktop/Code/Angular/micro-apps/navbar/src/main.single-spa.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/home/adithya/Desktop/Code/Angular/micro-apps/navbar/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:935:23)
    at /home/adithya/Desktop/Code/Angular/micro-apps/navbar/node_modules/@ngtools/webpack/src/loader.js:42:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Looks like the main.single-spa.ts file is not picked up by TypeScript. So I added it along in the tsconfig.app.json file like so:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": ["src/main.ts", "src/main.single-spa.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

Now the error seems to be fixed. But it throws in a new one:

ERROR in node_modules/single-spa-angular/lib/browser-lib/extra-providers.d.ts:3:10 - error TS2305: Module '"../../../@angular/platform-browser/platform-browser"' has no exported member 'ɵBrowserPlatformLocation'.

import { ɵBrowserPlatformLocation } from '@angular/platform-browser';

[adisreyaj]

Looks like ɵBrowserPlatformLocation should be imported from @angular/common.

Ref: Angular Github

[adisreyaj]

I guess the issue is because ng add single-spa-angular instead of installing the version 4, is installing v3. So the schematic is failing to identify the Angular version I guess.

[joeldenning]

Why was this issue closed? I am reopening. We should discuss what is needed for Angular 10 support and then implement it.

[arturovt]

Looks like ɵBrowserPlatformLocation should be imported from @angular/common.

It is:

https://github.com/single-spa/single-spa-angular/blob/a4cc1633bf0b8f39c57484a51e7895561818c37b/src/src/extra-providers.ts#L2-L7

[arturovt]

I guess the issue is because ng add single-spa-angular instead of installing the version 4, is installing v

Interesting, that's true.

[joeldenning]

I guess the issue is because ng add single-spa-angular instead of installing the version 4, is installing v3. So the schematic is failing to identify the Angular version I guess.

That seems like it is related to the following code? I'm not sure why that code would stop working in Angular 10.

https://github.com/single-spa/single-spa-angular/blob/a4cc1633bf0b8f39c57484a51e7895561818c37b/schematics/ng-add/dependencies.ts#L27

[adisreyaj]

I have actually tried again and it is still installing single-spa-angular: ^3.5.3.

1. Created a new angular project with Angular CLI v10.0.0
2. Ran the ng add single-spa-angular

Here is the dependencies list from package.json:

{
 "dependencies": {
    "@angular-builders/custom-webpack": "^8",
    "@angular/animations": "~10.0.0",
    "@angular/common": "~10.0.0",
    "@angular/compiler": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "rxjs": "~6.5.5",
    "single-spa-angular": "^3.5.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  }
}

[joeldenning]

We didn't fix anything related to this, so it is not surprising that it isn't working yet. My comments above were to help brainstorm a solution - if anyone would like to send in a pull request with a fix, that would be appreciated.

[adisreyaj]

We didn't fix anything related to this, so it is not surprising that it isn't working yet. My comments above were to help brainstorm a solution - if anyone would like to send in a pull request with a fix, that would be appreciated.

Yup..I was just trying to confirm the issue and add some additional info if needed.

[celian-garcia]

Hey guys I made exactly the same process for my project (described in Demonstration part of the issue). Am I the only one that had to do these moves :

Update the main.single-spa.ts file

import singleSpaAngular, { getSingleSpaExtraProviders } from 'single-spa-angular';

->

import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';

Updated the single-spa version

    "single-spa-angular": "^3.6.0",

    "single-spa-angular": "^4.2.0",
    "single-spa": "^4.4.4",

I think that's pretty all I remember on my side in addition to what you already did of course.

Ah yes I updated as well the version of custom-webpack "@angular-builders/custom-webpack": "^10.0.0-beta.0", but I think it's not mandatory.

[joeldenning]

Hi @celian-garcia, the changes to the imports were part of the Angular 8 to Angular 9 migration and are documented in https://github.com/single-spa/single-spa-angular/releases/tag/v4.0.0. Angular 10 also uses single-spa-angular@4.x, so anybody upgrading from Angular <= 8 to Angular 10 will need to make those changes.

[celian-garcia]

Okay thanks for the info. I didn't really migrate actually I just made ng new + ng add single-spa-angular but maybe I should have explicitely mention the version of single-spa-angular somehow.

[helumalai]

Why was this issue closed? I am reopening. We should discuss what is needed for Angular 10 support and then implement it.

Yes, we would like to upgrade our single-spa apps to Angular 10, and resolving this issue would be great. Happy to contribute my time if needed.

[helumalai]

Hey guys I made exactly the same process for my project (described in Demonstration part of the issue). Am I the only one that had to do these moves :

Update the main.single-spa.ts file

import singleSpaAngular, { getSingleSpaExtraProviders } from 'single-spa-angular';

->

import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';

Updated the single-spa version

    "single-spa-angular": "^3.6.0",

    "single-spa-angular": "^4.2.0",
    "single-spa": "^4.4.4",

I think that's pretty all I remember on my side in addition to what you already did of course.

Ah yes I updated as well the version of custom-webpack "@angular-builders/custom-webpack": "^10.0.0-beta.0", but I think it's not mandatory.

I did exactly the same.

[joeldenning]

Hi @helumalai, yes if you have time and would like to contribute any changes needed for Angular 10 support, that would be greatly appreciated! @Den-dp has made a lot of progress on some related issues, as reported in https://github.com/single-spa/single-spa-angular/issues/249. I am happy to review pull requests to address the issues.

[maximillianfx]

Hi, I'm using the single-spa CLI to create an angular app. I have made some changes to build and run the code (@celian-garcia thanks 😄 ) but I found this little problem when acessing the url playground:

Cannot read property 'injector' of undefined - at single-spa-angular.js:198

Have anyone faced this point?

Angular version: 10 Single Spa Angular: 4.2.0

[celian-garcia]

Hi @maximillianfx I don't remember such an error. What is your main.single-spa.ts ? Mine is like this :

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<abilities-root />',
  Router,
  NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Edit: You'll need to modify the template part according to your app component selector

[maximillianfx]

Oh :/, my main.single-spa.ts:

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser'; 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root />',
  Router,
  NgZone: NgZone,
  AnimationEngine: AnimationEngine,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

[maximillianfx]

I've read on the single spa docs the support for Angular 9. I will make a project using Angular CLI 9 and re-test.

[maximillianfx]

Hello! Using this approach and angular in 9.1.7 the project is running!

[adisreyaj]

Hello! Using this approach and angular in 9.1.7 the project is running!

It works on Angular 9 without any issues. Only problem is with 10. The schematic is somehow installing the version 3 of single-spa-angular instead of version 4

[celian-garcia]

Hello, here is an example of a working project https://github.com/milobella/application-web, the project in itself is still in construction but the spa part is functional, with Angular 10.0.3 and single-spa-angular 4.2.0.

@joeldenning I would be happy to contribute to ameliorate but I don't really get what is needed at the end. Maybe there is some gaps in the schematic ? I will create soon a new component from scratch, I should see at this moment if anything is missing.

[arturovt]

Hey guys. I've checked the ng add single-spa-angular command with Angular 10, it installed the latest version:

[celian-garcia]

For me it works perfectly now.

[arturovt]

Thanks for clarifying @celian-garcia @adisreyaj was this issue resolved? Can it be closed?

[adisreyaj]

@arturovt Looks like the issue is solved.