angular - How can I loadChildren in my Routes when my module is on some CDN

Question

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.

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.

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

Answer 1

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"

See the plunk that illustrates this.