Problem starting angular app

[mgg709]

Demonstration

Expected Behavior

When I run the command npm run serve:single-spa:menu I want my app to start working but I get the following errors

Actual Behavior

When I run the command npm run serve:single-spa:menu I get the following errors:

`./src/main.single-spa.ts:4:0-45 - Error: Module not found: Error: Can't resolve './app/app.module' in 'C:\Repositorios\micro-frontends\menu\src'

./src/main.single-spa.ts:5:0-57 - Error: Module not found: Error: Can't resolve './environments/environment' in 'C:\Repositorios\micro-frontends\menu\src'

Error: src/main.single-spa.ts:7:27 - error TS2307: Cannot find module './app/app.module' or its corresponding type declarations.

7 import { AppModule } from './app/app.module'; ~~~~~~~~~~~~~~~~~~

Error: src/main.single-spa.ts:8:29 - error TS2307: Cannot find module './environments/environment' or its corresponding type declarations.

8 import { environment } from './environments/environment'; `

My main.single-spa.ts:

`

import { enableProdMode, NgZone } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import { singleSpaPropsSubject } from './single-spa/single-spa-props';

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

const lifecycles = singleSpaAngular({ bootstrapFunction: singleSpaProps => { singleSpaPropsSubject.next(singleSpaProps); return platformBrowserDynamic().bootstrapModule(AppModule); }, template: '', NgZone, });

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

I'm using the single-spa framework and I have simply created an angular app following the steps that come out of the terminal

[mgg709]

Also I have another question, How can I specify the version of Angular when installing it using the default steps through the terminal?

[claudiomerli]

Seems schematics actually doesn't support Angular 18

[anwarminst]

same issue I'm facing. any help will be appreciate

[dipsx]

Seems schematics actually doesn't support Angular 18

it's angular 17 - I have the same error

[Arjun99]

Can you please share your folder structure?

[muneebahmad0600]

this might be helpful:

import { APP_BASE_HREF } from '@angular/common';
import { NgZone } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { NavigationStart, Router } from '@angular/router';
import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';

import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { getBaseHrefFromSingleSpaProps } from './single-spa/base-href';
import { SingleSpaProps, singleSpaPropsSubject } from './single-spa/single-spa-props';

const lifecycles = singleSpaAngular({
  bootstrapFunction: (singleSpaProps: SingleSpaProps) => {
    singleSpaPropsSubject.next(singleSpaProps);

    const baseHref = getBaseHrefFromSingleSpaProps(singleSpaProps);

    return bootstrapApplication(AppComponent, {
      providers: [...appConfig.providers, { provide: APP_BASE_HREF, useValue: baseHref }, getSingleSpaExtraProviders()],
    });
  },
  template: '<app-root />',
  Router,
  NavigationStart,
  NgZone,
});

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

this is the new created base-href.ts

import { environment } from '../environments/environment';
import { SingleSpaProps } from './single-spa-props';

export const getBaseHrefFromSingleSpaProps = (props: SingleSpaProps): string =>
  props[environment.appName as keyof SingleSpaProps]?.baseHref || '/';

This is single-spa-props.ts

import { ReplaySubject } from 'rxjs';
import { AppProps } from 'single-spa';

import { environment } from '../environments/environment';

export const singleSpaPropsSubject = new ReplaySubject<SingleSpaProps>(1);

// Add any custom single-spa props you have to this type def
// https://single-spa.js.org/docs/building-applications.html#custom-props

interface CustomAppProps {
  configuration: { [key in typeof environment.appName]?: { baseHref: string } };
}

export type SingleSpaProps = AppProps & CustomAppProps;