0

I have an Angular 4 app which is using SystemJS. I want to move to using Angular CLI. The problem is, I bootstrap the application in the index.html using a script tag as follows.

<script>
    var sf = $.ServicesFramework([ModuleContext:ModuleId]);
    System.import('app/main.js')
        .then(module => module.main(sf.getModuleId(), sf.getTabId(), sf.getAntiForgeryValue())
        .catch(function (err) { console.error(err); });

</script>

Here is the relevant code from my main.ts

export function main(dnnModuleId: number, dnnTabId: number, dnnAntiForgeryToken: string) {

     let appConfig: IAppConfig = {
         DNN_MODULE_ID: dnnModuleId
         ...
      }

 platformBrowserDynamic([
     {provide: APP_CONFIG_TOKEN, useValue: appconfig
     ...
 ]).bootstrapModule(AppModule);

After an extensive search, I i was only able to find an old question related to Webpack 1 and not related to Angular CLI.

In short is it possible to do this with Angular CLI?

If so, any guidance in where to begin looking would be much appreciated.

Community
  • 1
  • 1
gravidThoughts
  • 613
  • 5
  • 18
  • what does `module.main` do? – Max Koretskyi Apr 26 '17 at 13:56
  • @Maximus I think it just runs `platform.bootstrap` with some configuration – yurzui Apr 26 '17 at 13:57
  • Angular-cli doesn't have `library` option AFAIK https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/models/webpack-configs/common.ts#L77-L82 So you can use `window` object – yurzui Apr 26 '17 at 13:59
  • @yurzui You are correct. I will update the answer with my `main` code. In the meantime, are you saying assign my `main` function in typescript to something like `window.UniqueLoaderName`, and then call that from a `script` tag in `index.html`? – gravidThoughts Apr 26 '17 at 14:07
  • 1
    Inside index.html write `var sf = $.ServicesFramework([ModuleContext:ModuleId]); window.FrameworkConfig = { moduleId: sf.getModuleId(), tabId: sf.getTabId(), antiForgeryValue: sf.getAntiForgeryValue() };` and use it inside `main.ts` You do not need `main` function anymore – yurzui Apr 26 '17 at 14:20
  • 1
    If you are going to get data asynchnously then you can create some function within `index.html` and call it inside `main.ts` – yurzui Apr 26 '17 at 14:22

0 Answers0