Javascript 延迟加载依赖项后，在执行时创建Angular 5组件

我正在尝试做一些不太常见的事情。我试图在不需要很多外部依赖项的情况下最好地利用Angular，但出于需求原因，我必须使用一个非常特定的库来选择日期范围（），但它使用JQuery和Moment.js，以及Bootstrap的CSS（但这个库已经添加）

在这种情况下，我可以简单地在页面中加载JQuery和momente.js，但这似乎不是一种明智的方法：捆绑包的大小会越来越大，我必须尽可能地优化这个应用程序

然后，我产生了一个想法：为什么不懒洋洋地加载这些依赖项，然后实例化我的组件？似乎是一个不错的方法，对吗

我正在使用一个提供者，它允许我将CDN中的脚本包含在文档中，并且工作得很好。但现在，我必须在执行时插入这个daterangepicker组件，当两个库都加载并解决了它们的承诺时

当前状态：

1-我有一个父类，它在执行时加载我的依赖项（JQuery和Moment.js）：

import { Component, OnInit } from '@angular/core';
import { LibraryLazyLoader } from '../../../providers/library_lazy_loader';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

@Component({
  selector: 'date-selector',
  templateUrl: './date-selector.component.html',
  styleUrls: ['./date-selector.component.css'],
  providers: [LibraryLazyLoader]
})
export class DateSelectorComponent implements OnInit {

  isLoaded = false;

  constructor(
    private libraryLoader:LibraryLazyLoader,
    private loadingSpinner:Ng4LoadingSpinnerService
  ){
    this.loadingSpinner.show();
    this.libraryLoader.loadJs('https://code.jquery.com/jquery-3.2.1.min.js')
        .subscribe(() => {
          console.log("JQuery included");
          this.libraryLoader.loadJs('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js')
            .subscribe(() => {
              console.log("Moment.js included");
              this.loadingSpinner.hide();
              this.isLoaded = true;
            })
         })
  }

  ngOnInit() {

  }

}

2-其模板如下所示：

<button>Load js</button>
<div *ngIf="isLoaded">
  <input daterangepicker>
</div>

Load js

其思想是，当两个库都被加载时，isLoaded boolean应该激发视图更新，正确加载daterangepicker指令，并允许我使用组件

问题是，这不起作用。虽然我不打算在项目中使用它，但我很好奇它是如何工作的，因为它可以让我们构建更优化的页面！延迟加载模块很好，但我认为下一步是延迟加载组件。如果这种方法不好的话，有人会纠正我，但我认为这确实是一个很好的改进

---

那么，有什么想法吗？

作为一个想法，您可以在加载脚本的路由中添加一个保护，一旦加载了脚本，就可以加载组件了

e、 g.扩展角度文档示例。在导航到需要依赖项的视图之前，您可以添加一个保护来解析依赖项

@Injectable()
class TeamResolver implements Resolve<any> {

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return Promise.all([
import("https://code.jquery.com/jquery-3.2.1.min.js"), 
import("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js")
])
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

---

嗨@Zerok，为什么这不起作用？你能添加一个例子吗？

setTimeout(() => {
   this.loadingSpinner.hide();
   this.isLoaded = true;
})