Hi, I think you don’t need to install node-sass globally. Have faced any issue without installing node-sass explicitly?

1) I haven’t seent any entry of “node-sass” in package.json . Getting error -

ERROR in ./src/assets/styles/app.scss (./node_modules/raw-loader./node_modules/sass-loader/lib/loader.js??ref—15-3!./src/assets/styles/app.scss)

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

Error: Cannot find module ‘node-sass’ at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.sassLoader (/ui/server/node_modules/sass-loader/lib/loader.js:46:72)

2) Which version of node-sass should we install ?

Please try changing the changeDetectionStrategy. right now it’s OnPush, change it to changeDetection: ChangeDetectionStrategy.Default in shared/components/layouts/admin-layout/admin-layout.component.ts

I did this and the text on the menu is not visible. The other thing I just noticed is when you resize and the alternate view is loaded everything is fine. Seems it is the first load that misses the text.

Is there any way I can look into your code? I think you need to detect changes manually inside “src/app/shared/components/sidebar-side/sidebar-side.component.ts”

constructor (private cdr: ChangeDetectorRef) {}

ngOnInit() {
    this.menuItemsSub = 
    this.navService.menuItems$.subscribe(menuItem => {
    this.menuItems = menuItem;
    this.cdr.markForCheck(); // detect change
    ...........

Here you go,

@Component({ selector: “app-sidebar-side”, templateUrl: ”./sidebar-side.component.html” }) export class SidebarSideComponent implements OnInit, OnDestroy, AfterViewInit { public menuItems: any[]; public hasIconTypeMenuItem: boolean; public iconTypeMenuTitle: string; private menuItemsSub: Subscription; public layoutConf: ILayoutConf; }

constructor(
  private navService: NavigationService,
  public themeService: ThemeService,
  private layout: LayoutService
) {}

ngOnInit() {
  this.iconTypeMenuTitle = this.navService.iconTypeMenuTitle;
  this.menuItemsSub = this.navService.menuItems$.subscribe(menuItem => {
    this.menuItems = menuItem;
    //Checks item list has any icon type.
    this.hasIconTypeMenuItem = !!this.menuItems.filter(
      item => item.type === "icon" 
    ).length;
  });
  this.layoutConf = this.layout.layoutConf;
}
ngAfterViewInit() {}
ngOnDestroy() {
  if (this.menuItemsSub) {
    this.menuItemsSub.unsubscribe();
  }
}
toggleCollapse() {
  if (
    this.layoutConf.sidebarCompactToggle
  ) {
      this.layout.publishLayoutChange({
      sidebarCompactToggle: false
    });
  } else {
      this.layout.publishLayoutChange({
          // sidebarStyle: "compact",
          sidebarCompactToggle: true
        });
  }
}

I wanted to take a look in your codebase, is it possible.

Please try “this.cdr.markForCheck(); // detect change” as i mentioned in previous comment.

https://1drv.ms/u/s!Aqyu2ghwbuvU3DlVv9dK8xzup39Q

I put it in a few places just to see