Menu
When I load my typescript angular 2 test app it does not load as expected.
I always see "Loading..." what is from the my-app in the index html file.
I also get no errors in the bowser console :/
Anyone is seeing the error?
INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="~/lib/es6-shim.js"></script>
<script src="~/lib/es6-promise.js"></script>
<script src="~/lib/system-polyfills.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/system.js"></script>
<script src="~/lib/Rx.js"></script>
<script src="~/lib/angular2.js"></script>
<script src="~/lib/http.dev.js"></script>
<script src="~/lib/router.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {provide} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'
bootstrap(AppComponent).catch(err => console.error(err));
app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
// providers: [...FORM_PROVIDERS],
// directives: [...ROUTER_DIRECTIVES, RouterActive],
pipes: [],
styles: [],
template: `
<h1>Hello {{ name }}</h1>
`
})
export class AppComponent {
angularclassLogo = 'assets/img/angularclass-avatar.png';
name = 'Angular 2 Webpack Starter';
url = 'https://twitter.com/AngularClass';
constructor() {
}
}
552
Try studying the great Angular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html (TypeScript)
You are using Typescript, but don't have it included in HTML and properly configured in systemjs:
// Missing typescript transpiler
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script>
System.config({
transpiler: 'typescript', // <-- missing!
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}} // <-- you have bad extension
});
System.import('app/main') // <-- main.ts should be inside 'app' folder!
.then(null, console.error.bind(console));
...
</script>
Also, i don't think it is ok to use tilde ~ character in script's src attribute.
UPDATE
If you already have your .ts code transpiled into .js, please make sure that you compiled it with experimental decorators enabled - your tsconfig.json should be similar to this:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
I had an issue in my template. I removed Mobx and ng2-mobx from an app, but forgot to remove *mobxAutorun from the template. Removing the directive made it work.
(Apparently Angular does not show any errors if they are in the template. This might actually a feature, so that if you have an ngIf that fails, it will just consider that if as false, instead of showing an error. Don't know if it's possible to change this behavior.)
1
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
