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?

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.

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";
  (...)
});

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
}

来源：https://stackoverflow.com/questions/36483746/including-concatenated-typescript-js-outfile-angular-2-typescript

标签

typescript

angular

systemjs