Search code examples
typescriptangularsystemjs

Including Concatenated Typescript JS outFile - Angular 2 + Typescript

I've got the following code:

index.html

<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script src="test.js"></script

<script>

  System.import('test.js')
        .then(null, console.error.bind(console));
</script>

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outFile": "test.js"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

And in the root of my project I have the "outFile" created by tsc named as "test.js" - it appears that all of the components, modules, etc are concatenated in test.js correctly but the app doesn't load anything other than the initial "loading..." and there are no console errors when visiting index.html in the browser.'

Also note that the initial index.html:

<body>
  <rz-app>Loading...</rz-app>
</body>

So I actually just get "loading..." on the html page.

I've been beating my head against a wall and I know it is something simple...

Q So, what am I doing wrong - how do I include the concatenated ts outFile in my html?

Solution

  • Not sure if this has been figured out yet, but I was running into the same issue and found this fixed it:

    Look at your test.js file (the one that was outputted via tsc->outFile) and look for your app (looks like it's something like rzApp). There should be some code that looks something like System.register("app", ["angular2/platform/browser", ... The name (in this case app) is what you want to use in your System.import() call. So in my case, I used System.import('app').then(null, console.error.bind(console)); and everything started working. Make sure you have your test.js in <script> tags.

    I think this is similar to what was being described in the first answer, but it was unclear to me so I figured I'd re-word it in a way that helped me realize what was going on.