当我的模块在某个CDN

时间:2017-09-08 03:46:52

标签: angular angular-router

好的,所以我想在某些cdn上发布我的预建角度模块,然后让一些角度路径指向它并加载它。

我还没有处理角度代码,但可能有一个很好的理由我不能简单地将loadChildren指向一些随机url并期望它获取并加载模块。如果你看一下我的代码示例,那么当我将预构建的goo.umd.js模块放在与我的index.html文件相同的目录中时,唯一的工作就是。

我还没有找到任何可以从我的rawgit.com CDN中提取此模块的CustomLoader示例。我将重点关注研究的任何方向,我们将不胜感激。

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

1 个答案:

答案 0 :(得分:1)

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

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

然后,你可以加载它:

loadChildren: "myModule#GooModule"

请参阅说明这一点的plunk