当我的模块位于某些 CDN 上时，如何在我的路由中加载儿童 [英] How can I loadChildren in my Routes when my module is on some CDN

问题描述

好的，所以我想在一些 cdn 上发布我预构建的 angular 模块，然后让一些 angular 路由能够指向它并加载它.

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.

我还没有执行 angular 代码，但可能有一个很好的理由我不能简单地将 loadChildren 指向某个随机 url 并期望它获取和加载模块.如果您查看我的代码示例，唯一有效的部分是当我将预构建的 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.

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

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.

See the plunk that illustrates this.

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