Angular 2, Order of Classes

TypeScript itself not sensitive, but this compiled to JS, and JS care about the order

#1

From: https://stackoverflow.com/questions/44049121/has-order-of-exports-in-angular-2-ts-meaning
Author: Gianluca Paris

It's because, as described by Angular component reference (https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html), @Component
is a decorator, which " Marks a class as an Angular component and collects component configuration metadata." So you should put it before the class which is the component. If you put your @Component
decorator just before your Hero
class, you are marking that class as an Angular component, that's not correct.
The Unexpected value 'AppComponent' declared by the module 'AppModule'.
error comes because you declared AppComponent
as a Component
in your AppModule, and without the decorator, the app module does not recognize it anymore. Hope the explanation was helpful.

#2

From: https://stackoverflow.com/questions/37871626/why-the-order-of-classes-matters-in-angular-2-component
Author: Sasxa & Günter Zöchbauer

Decorators (@Component
for example) work on the objects that are right after them. Your code should be:

@Component({...})
class Hero {}
@Component({...})
class AppComponent {}

If you look at the JavaScript example:

app.AppComponent = 
  ng.core.Component({
  }) .Class({
  });

you can see why...
Also, if you're write multiple classes in single file, order matters. JavaScript is executed sequentially, if you ask for something that's not yet defined, you'll get an error.

#3

From: https://stackoverflow.com/questions/34810708/type-declaration-order-in-typescript
Author: vasa_c
TypeScript itself not sensitive, but this compiled to JS.

class A extends B {}
class B {}

In JS:

var A = (function (_super) { /* ... */ })(B);
var B = (function () { /* ... */  })();

B is undefined on line 1.