当模块在某些CDN上时，如何在Routes中加载Children [英] How can I loadChildren in my Routes when my module is on some CDN

问题描述

好吧，所以我想在一些CDN上发布我的预制角度模块，然后让一些角度路线能够指向它并加载它.

Ok, so I want to publish my prebuilt angular module on some cdn, and then let some angular route be able to point to it and have it loaded.

我还没有步进角度代码，但是可能有一个很好的理由，我不能简单地将loadChildren指向某个随机网址，并期望它获取并加载模块.如果您看一下我的代码示例，那么只有在我将预构建的goo.umd.js模块与index.html文件放在同一目录中时，才能起作用.

I haven't stepped the angular code yet, but there is probably a good reason I can't simply point the loadChildren to some random url and expect it to fetch and load the module. If you look at my code example, the only piece the works is when I have my prebuilt goo.umd.js module in the same directory as my index.html file.

我尚未找到CustomLoader的任何示例，该示例将从我的rawgit.com CDN中提取此模块.我可以集中精力进行研究的任何方向都将受到赞赏.

I have yet to find any example of a CustomLoader that will pull this module from my rawgit.com CDN. Any direction on where I can focus my research would be appreciated.

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

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
declare var System: any; 
let gooUrl = "https://rawgit.com/ghstahl/angular4-goo-module/master/dist/bundles/goo.umd.js#GooModule";
let badGooUrl = "https://idontexist.com/ghstahl/angular4-goo-module/master/dist/bundles/goo.umd.js#GooModule";

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent },
  { path: 'goo',     loadChildren: () => System.import(gooUrl)}, // doesn't work, and this url exists.
  { path: 'goo-bad',     loadChildren: () => System.import(badGooUrl)},// doesn't work, as I expected a 404.
  { path: 'goo-url',     loadChildren: gooUrl}, // doesn't work, and this url exists.
  { path: 'goo-local',     loadChildren: "goo.umd.js#GooModule"} // works
];

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

推荐答案

在SystemJS配置文件中提供指向您模块的链接:

Give a link to your module in the SystemJS config file:

'myModule': 'https://rawgit.com/ghstahl/angular4-goo-module/master/dist/bundles/goo.umd.js'

然后，您可以像这样加载它:

Then, you can load it like:

loadChildren: "myModule#GooModule"

请参见 plunk 进行说明.

这篇关于当模块在某些CDN上时，如何在Routes中加载Children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！