Including Concatenated Typescript JS outFile - Angular 2 + Typescript

Question

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?

score 5 · Accepted Answer · answered Apr 14 '16 at 19:56

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.

You just saved me hours. Thank you so much. – Will Ru Jul 14 '16 at 01:20 — Will Ru, Jul 14 '16 at 01:20

Thierry Templier · Answer 2 · 2016-04-07T18:40:38.220

2

When specifying the outFile option within the tsc compiler, you need to include the corresponding file (test.js) in your case this way:

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

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

You need to specify here the name of the module that contains the bootstrap processing. If the corresponding file is boot.ts, the module will be boot: System.import('boot').

Note that in this case, the name of modules is specified within the test.js file within System.register:

System.register("boot", // <-------------
  ['angular2/platform/browser', 'angular2/http', "app.component", "app.service"], function(exports_5, context_5) {
  "use strict";
  (...)
});

edited Apr 07 '16 at 18:40

answered Apr 07 '16 at 17:56

Thierry Templier

198,364
44
396
360

Okay, it still is loading a blank app and no errors. In my dev tools I can see that the source file is indeed being returned with all of the JS inside. Any other ideas? – karns Apr 07 '16 at 18:00
You could try to move the ` – Thierry Templier Apr 07 '16 at 18:03
Moreover you need to import the module containing the bootstrap processing. If it's in a file called `bootstrap.ts`, you need to use this: `System.import('boostrap');`. Now the name of modules are specified in the `test.js` file for each `System.register`. – Thierry Templier Apr 07 '16 at 18:05
I'm not exactly understanding your last comment. Could you provide a code example, please? Perhaps update your answer since it isn't the solution. – karns Apr 07 '16 at 18:07
Could you also include a link referencing the documentation for this, please? – karns Apr 07 '16 at 18:34
Here is the documentation for tsc configuration options: http://www.typescriptlang.org/docs/handbook/compiler-options.html. I dug to find out how it works. So I'm not that there is documentation on this ;-) – Thierry Templier Apr 07 '16 at 18:40
No I have not yet. I'm not sure what the whole register block is all about. Where are those modules coming from like "angular2/platform/browser", etc.? – karns Apr 07 '16 at 18:42
They are registered the same way within the `angular2.js` (or `angular2.dev.js` / `angular2.min.js`). If you have a look in it, we will see the `System.register('angular2/platform/browser', ...`. – Thierry Templier Apr 07 '16 at 18:43
In short I think that your problem is the string you provide to the initial `System.import` (not the js file name but the module containing the call to bootstrap rather) and eventually where you call it (could be moved at the end of the body block instead). – Thierry Templier Apr 07 '16 at 18:46
1

Still can't do it :( Would you by chance be able to do a hello world example from start to finish using NG2, Typescript, & SystemJS? I can get the app running but when I try to move files and concat/minify I run into issues. – karns Apr 07 '16 at 21:18

score 0 · Answer 3 · answered Jan 18 '17 at 19:14

In case the solutions posted here did not help you, the following did the trick for me. It is partially based on a combination of @Thierry Templier's and @batesiic's answers as well as the answers described in this systemjs issue. I am not exactly sure why it works, but it seems it is because the app package's format is described as 'register' and the app's map is the full path of the bundled JS file. This is my script block of my index.html:

<script src="/dist/bundledApp.js"></script> <!-- Needs to be here -->
<script>
    System.config({
        map: {
            app: 'dist/bundledApp.js', // <-- full path to bundled JS

            // other mappings...
        },
        packages: {
            app: {
                format: 'register', // <!-- this and the map.app value did the trick
                defaultExtension: 'js'
            },

            // other packages...
        }
    });
    System.import('main') // <-- the name of the main.ts file containing the 
                          //     bootstrapping logic and is bundled in the
                          //     bundledApp.js file as System.register("main", ["@angula...
        .then(null, console.error.bind(console));
</script>

The System.import('main') points to the registered module that is defined in the bundled JS after it was compiled from my /src/main.ts file. This is my tsconfig.json:

{
    "compilerOptions": {
        "module": "system",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "noEmitOnError": true,
        "sourceMap": true,
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "outFile": "./dist/bundledApp.js",
        "lib": [ "es2015", "dom" ],
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "./src/*.ts",
        "./src/**/*.ts"
    ],
    "compileOnSave": true // for VS2015
}

Including Concatenated Typescript JS outFile - Angular 2 + Typescript

3 Answers3

Linked