Я обнаружил, что <router-outlet></router-outlet> не сохраняет CSS/SCSS styling. Я создаю модуль для авторизации. В рамках этого модуля у меня есть «логин», «регистрация» и т. Д. c. , Я также использую MDBootstrap Kit.
В файле login.component.html я перечислил ряд кнопок. Эти кнопки НЕ имеют CSS styling. Но когда я помещаю точно такой же код в app.component.html, CSS/SCSS styling работает (см. Рисунок ниже).
Почему это происходит место?
Любая помощь, советы или рекомендации будут с благодарностью.
Текущая версия:
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
Файл: login.component. html
[на картинке выше]
Файл: 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() {
}
}
Файл : авторизация-маршрутизация. 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 ]
Файл: 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 { }
Файл: 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 { }
Файл: 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';
}