Angular Material <router-outlet></router-outlet> does not preserve CSS/SCSS styling

Question

I have found that <router-outlet></router-outlet> does not preserver the CSS/SCSS styling. I create a Module for Authorization. As part of this module, I have "login", "register", etc. . I am also using the MDBootstrap Kit.

In the login.component.html file, I have listed a row of buttons. These buttons DO NOT have CSS styling. But, when I place the exact same code in app.component.html, the CSS/SCSS styling works (see picture below).

Why is this taking place?

Any help, hints or advice would be greatly appreciated.

Current Version:

Angular CLI: 8.3.24
Node: 12.14.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.24
@angular-devkit/build-angular     0.803.24
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.24
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cli                      8.3.24
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.24
@schematics/update                0.803.24
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

File: login.component.html

[in the picture above ]

File: login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

File: authorization-routing. module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// components that we need to navigate to
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { RegisterComponent } from './register/register.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
    { path: '**' , component: PageNotFoundComponent }
];

@NgModule({
    imports: [ RouterModule.forChild(routesAuth) ], 
    exports: [ RouterModule ],
    declarations: [   ]
  })

export class AuthorizationRoutingModule {}

// according to this, EVERY component developed will be listed under the <router-outlet> </router-outlet>
export const authRoutingComponents = [ LoginComponent, RegisterComponent, ForgotPasswordComponent, PageNotFoundComponent  ]

File: authorization.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorizationRoutingModule } from './authorization-routing. module';
import { authRoutingComponents  } from './authorization-routing. module';

@NgModule({
  declarations: [ authRoutingComponents  ],
  exports: [ authRoutingComponents, AuthorizationRoutingModule ],
  imports: [ CommonModule, AuthorizationRoutingModule ]
})

export class AuthorizationModule { }

File: app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthorizationModule } from './kdc/authorization/authorization.module';
import { LoginComponent } from './kdc/authorization/login/login.component';
import { RegisterComponent } from './kdc/authorization/register/register.component';

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule],
})

export class AppRoutingModule { }

File: app.component.ts

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

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

Answer 1

You use lazy-loading for your authorization module and if you lazy load a module, it's not included in the global scope of your app and it doesn't have access to the modules that you imported in the AppModule. You probably imported MDB modules in your AppModule, that's why the buttons are rendered correctly in your app.component.html.

You need to import MDB ButtonsModule in your AuthorizationModule as well.

Here is a list of all MDB Modules: https://mdbootstrap.com/docs/angular/getting-started/modules/