MVC5部分视图中的延迟加载模块中的组件未呈现

Question

我有一个大型的MVC5项目，该项目位于不同的区域。我想将Angular 7集成到该项目中，因为我想逐步将所有内容迁移到Angular。这是一个实时项目，因此必须逐步进行转换。 我遵循了一些教程（例如this one），但是在尝试延迟加载组件时遇到了麻烦。 打开部分视图时，我可以看到正在加载Achievement.achievement.module.js文件，因此我知道该部分正在工作，并且控制台中没有任何错误。但是<app-root>标签不会被替换。

我尝试将<app-root>标记与<achievement-overview>标记一起使用，仅使用<achievement-overview>标记，但结果相同。

当我不使用延迟加载，而只是将组件添加到我的app.module.ts文件中的'bootstrap'标记中时，该解决方案就可以使用，但是我想使用模块和延迟加载，否则我的项目将变得非常时间杂乱无章。

任何帮助将不胜感激！

我的Angular文件结构是这样的：

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';
}

app-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 { }

achievement-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 { }

achievement-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>
}