Menu
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?
247
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.
105
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";
(...)
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
