3

The global css present in the styles.scss file is not getting applied. I have used single-spa in the application

Below is my index.html file-

<!doctype html>
<html lang="en"> 
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/"><meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="/src/styles.scss" type="text/scss" rel="stylesheet" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

I am using single-spa version 5.9.4. I tried getting the global styles from the angular.json file but for one of the MFEs the global scss styles are not getting applied

Priyanshu Paul
  • 31
  • 2
  • should be "". Remember: Angular create a bundles in a "dist folder" (or in memory) with the elements on assets folder and a index.html and .js and .css bundles. NOT in src (src is not exist for the app Angular) – Eliseo Jun 23 '23 at 05:56

3 Answers3

1

Try to add this in main.ts and main.single-spa.ts.

/// @ts-ignore
require('src/styles.css?ngGlobalStyle');

It's a knowed behaviour of single-spa.

Also refer to this Single-SPA Styles

Alessandro_Russo
  • 1,799
  • 21
  • 34
0

You should look in angular.json if it's not correct check a parent folder of src maybe another style.scss in there.

Kayra
  • 3
  • 3
  • The host project is having multiple projects with its respective  styles.scss so for each module how to load the MFE application's that is global scss to take precedence over the host app using  single-spa-framework angular.json – Priyanshu Paul Jan 24 '23 at 11:45
0

It is a known issue in single page application in angular (v15). You can see the reported issue here: https://github.com/single-spa/single-spa-angular/issues/471 and there is a workaround fix to this issue here, you can see at https://github.com/single-spa/single-spa-angular/issues/463#issuecomment-1582486882

Selvam Elumalai
  • 693
  • 7
  • 22
Harsh Lakhara
  • 21
  • 4
  • No, Hasrh it's not a issue. You can not refer to "src" folder because when Angular create the app only have an assets folder. NOTE: **NOT** put .css in assets folder, instead of add the .css in angular.json to allow Angular create a bundle.css joining all the .css – Eliseo Jun 23 '23 at 05:59
  • You can actually try reproducing it. Use single-spa-angular 8 version with angular 15 as parcel. I have tried to find the solution, but just workarounds are there. – Harsh Lakhara Jun 25 '23 at 09:42
  • @Priyanshu can you please tell me the version of angular you are using? – Harsh Lakhara Jun 25 '23 at 09:43