single spa generated angular project is not working

Question

I am using this command to generate angular 10 project:

npx create-single-spa --moduleType app-parcel

But I noticed after angular 10 project is generated, the app.component.ts has not been used.

export class AppComponent {
  public title = 'singleangular';
  constructor() {
      console.log('testing');
  }
}

The console.log command never get executed. How can this happen? If I am using ng new command, this is for sure to be executed. Please inform if this is expected. And then how can I use angular 10 in single spa? Thanks

this is the default component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public title = 'singleangular';
  constructor() {
      console.log('testing');
  }
}

adding to entryComponents is useless, I think if anyone use the npx create-single-spa command to generate ng project can see this issue immediately.

Don't know what is wrong here

It seemed using npx create-single-spa created angular project can only be loaded in single-spa, not by itself

I wondered if we can start and debug created angular project individually without using single-spa and then once finished, deploy and let single-spa to use it

Answer 1

You can run the app individually without having to run it using single-spa.

1. in angular.json replace 'main.single-spa.ts'. with 'main.ts'.
2. make sure the node modules are installed because even though I ran the npx command listed in your question to get this to work, I had to run npm i
3. If you get a typescript error, then go to tsconfig.app.json and also change 'main.single-spa.ts ' to 'main.ts'
4. if you get ng zone error then import this at the very top of main.ts import 'zone.js/dist/zone';

I am getting the console output in the constructor when running this in both the single-spa and the individual or non single-spa.

This is initially set up to load the main.single-spa.ts file which bootstraps the single-spa to serve this as a main.js file to be mounted.

You can switch between these.

Just a note: When I created the test angular single-spa app, I used routing and had to enter APP_BASE_HREF in providers to get the app to show up in the single-spa playground page.

Also, you should test the app running with the single-spa often so that you can verify it is working since the single-spa will handle things differently.