Search code examples
angularsystemjs

Loading angular2 application without systemjs dynamic loader in browser


Is there a way I can load and bootstrap angular2 application without systemjs dynamic loader in browser? I mean I want to load all js files with <script> tag or jquery $.loadScript() and then want to bootstrap angular2 app when all scripts loaded.

I am developing an application which will be injected inside another application and I have to load all my js, html, css at a time in the browser. There will be no dynamic loading option due to server security. so I cannot use systemjs dynamic loading and I have to load all html, css, js once and once that are loaded I need to bootstrap the angular2 application in browser.

I gone through all other links and they are all provided how to do with systemjs dynamic loading but I need other way.


Solution

  • Finally the angular-cli option works for me. After beta-10 they removed systemjs dynamic loader and creating one js file for libraries (all dependencies like angular, rxjs, etc) and one js file for all project code. So the production build will only contain 2 js file link in your index.html file. No dynamic loading and rest calls to my server for the scripts.

    I have created 2 yo generator to scaffold application, one with systemjs dynamic loading and another without systemjs loading in case anyone have the same issue can refer.

    Without systemjs (angular-cli):

    npm install -g yo
    npm install -g generator-angular2-without-systemjs
    yo generator-angular2-without-systemjs
    

    With systemjs dynamic loading:

    npm install -g yo
    npm install -g generator-angular2-with-systemjs
    yo generator-angular2-with-systemjs
    

    problem with Babel::

    Babel does not supports typescript, To use babel, I have to move all my typescript code to js and the syntax is also little different. I did not wont to move away from typescript