angular - 라우팅이 작동하지만 데이터가 표시되지 않습니다

각도 8의 지연된 설치에서 두 페이지를로드하고 있습니다. 페이지가 올바르게 리디렉션되지만 페이지에 데이터가 표시되지 않습니다.

아래는 내 파일 중 일부입니다

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'crm-pj';
}

app.component.html

<div class="page-container">    
   <div class="left-content">
       <div class="mother-grid-inner">
            <!--header start here-->
                <div class="header-main">
                    <div class="header-left">
                            <div class="logo-name">
                                     <a href="index.html"> <h1>Shoppy</h1> 
                                    <!--<img id="logo" src="" alt="Logo"/>--> 
                                  </a>                              
                            </div>
                         </div>
                         <div class="header-right">
                            <div class="profile_details">       
                                <ul>
                                    <li class="dropdown profile_details_drop">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                            <div class="profile_img">   
                                                <span class="prfil-img"><img src="images/p1.png" alt=""> </span> 
                                                <div class="user-name">
                                                    <p>Malorum</p>
                                                    <span>Administrator</span>
                                                </div>
                                                <i class="fa fa-angle-down lnr"></i>
                                                <i class="fa fa-angle-up lnr"></i>
                                                <div class="clearfix"></div>    
                                            </div>  
                                        </a>
                                        <ul class="dropdown-menu drp-mnu">
                                            <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li> 
                                            <li> <a href="#"><i class="fa fa-user"></i> Profile</a> </li> 
                                            <li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"> </div>               
                        </div>
                     <div class="clearfix"> </div>  
                </div>
<!--heder end here-->
<!--inner block start here-->
<div class="inner-block" style="height: 500px">
    <router-outlet></router-outlet>
</div>
<!--inner block end here-->
<!--copy rights start here-->
<div class="copyrights">
     <p>© 2016 Shoppy. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
</div>  
<!--COPY rights end here-->
</div>
</div>
<!--slider menu-->
    <div class="sidebar-menu">
            <div class="logo"> <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="logo" ></span> 
                  <!--<img id="logo" src="" alt="Logo"/>--> 
              </a> </div>         
            <div class="menu">
              <ul id="menu" >
                <!--<li id="menu-home" ><a href="index.html"><i class="fa fa-tachometer"></i><span>Dashboard</span></a></li>-->
                <li><a href="#"><i class="fa fa-cogs"></i><span>Masters</span><span class="fa fa-angle-right" style="float: right"></span></a>
                  <ul>
                    <li><a routerLink="/state">State</a></li>
                    <li><a routerLink="/city">City</a></li>                 
                  </ul>
                </li>
              </ul>
            </div>
     </div>
    <div class="clearfix"> </div>
</div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    { path: 'state', loadChildren: () => import('./state/stateModule').then(m => m.stateModuleCls) },
    { path: 'city', loadChildren: () => import('./city/cityModule').then(m => m.cityModuleCls) },
    {
      path: '',
      redirectTo: '',
      pathMatch: 'full'
    }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

stateModule.ts
//import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {stateCompCls} from './stateComp';
@NgModule({
    imports : [],
    declarations : [stateCompCls],
    bootstrap : [stateCompCls]
})
export class stateModuleCls{
}

stateComp.ts

import {Component} from '@angular/core';
@Component({
    selector :'app-root',
    templateUrl : 'state.html',
})
export class stateCompCls{
}

state.html

<h1>This is State Module</h1>

상태 재 지정이 작동하지만 데이터로 재 지정할 때 도시와 동일한 문제가 표시되지 않는 상태 모듈입니다