Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular 2 application does not load but I get no errors

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() {

    }
}
like image 552
Elisabeth Avatar asked Feb 27 '16 10:02

Elisabeth


2 Answers

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
  }
}
like image 175
mseimys Avatar answered Nov 15 '22 19:11

mseimys


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.)

like image 1
Jan Aagaard Avatar answered Nov 15 '22 17:11

Jan Aagaard