Компонент из лениво загруженного модуля в частичном представлении MVC5 не отображается

Question

У меня большой проект MVC5, который разделен на разные области. Я пытаюсь интегрировать Angular 7 в этот проект, потому что я хочу постепенно переместить все в Angular. Это живой проект, поэтому его нужно конвертировать шаг за шагом. Я следовал некоторым учебникам (например, этот ), но у меня возникают проблемы, когда я пытаюсь лениво загрузить компонент. При открытии частичного представления я вижу, как загружается файл reach.achievement.module.js, поэтому я знаю, что эта часть работает, и в консоли нет ошибок. Но тег <app-root> не заменяется.

Я пытался использовать тег <app-root> вместе с тегом <achievement-overview>, просто тег <achievement-overview>, ... но результат тот же.

Решение работает, когда я не использую отложенную загрузку и просто добавляю компонент в тег 'bootstrap' в моем файле app.module.ts, но я хотел бы использовать модули и отложенную загрузку, иначе мой проект станет очень захламленный временем.

Любая помощь будет оценена!

Моя угловая файловая структура:

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 = 'angular-ui';
}

приложение-routing.module.ts

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

const routes: Routes = [{ 
  path: 'Customer/Achievement',
  loadChildren: './achievement/achievement.module#AchievementModule'
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

achievement.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AchievementRoutingModule } from './achievement-routing.module';
import { AchievementOverviewComponent } from './achievement-overview/achievement-overview.component';

@NgModule({
  declarations: [AchievementOverviewComponent],
  imports: [
    CommonModule,
    AchievementRoutingModule
  ]
})
export class AchievementModule { }

достижение-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AchievementOverviewComponent } from './achievement-overview/achievement-overview.component';

const routes: Routes = [
  {path: '', component: AchievementOverviewComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AchievementRoutingModule { }

достижение-overview.component.ts

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

@Component({
  selector: 'achievement-overview',
  templateUrl: './achievement-overview.component.html',
  styleUrls: ['./achievement-overview.component.css']
})
export class AchievementOverviewComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

мое частичное представление в MVC, которое открывается под URL-адресом Клиент / Достижение, выглядит так:

<app-root></app-root>

@section scripts{
    <script type="text/javascript" src="~/Scripts/Libs/runtime.js"></script>
    <script type="text/javascript" src="~/Scripts/Libs/polyfills.js"></script>
    <script type="text/javascript" src="~/Scripts/Libs/styles.js"></script>
    <script type="text/javascript" src="~/Scripts/Libs/vendor.js"></script>
    <script type="text/javascript" src="~/Scripts/Libs/main.js"></script>
}