Geek Answers Handbook

Angular 2 application does not load, but I do not get errors

When I download my typescript angular 2 test application, it does not load as expected.

I always see "Loading ..." from my-app in the html index file.

I also don't get errors in the bowser console: /

Does anyone see a mistake?

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() { } }
+6
source share
2 answers

Try exploring the great Angular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html (TypeScript)

You use Typescript, but you don’t include it in HTML and you configured it correctly 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 you can use the ~ tilde character in a src script.

UPDATE

If you already have .ts code translated into .js , make sure you compile it with experimental decorators - your tsconfig.json should look like this:

 { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } }
+1
source

I had a problem in my template. I removed Mobx and ng2-mobx from the application, but forgot to remove *mobxAutorun from the template. Removing the directive made it work.

(Apparently, Angular does not show errors if they are in the template. It may actually be a function, so if you have an ngIf that does not work, it will simply assume that if false, instead of showing error. I don’t know if this behavior can be changed.)

+1
source

More articles:


All Articles