As a newcomer to Angular JS and TypeScript, I have encountered an issue while going through the hero tutorial. The problem arises when defining the Hero class between @Component and AppComponent instead of at the beginning or end of the file. This causes a runtime exception with the message "No Directive annotation found on AppComponent". I lack the necessary understanding of TypeScript and Angular JS to comprehend why this sequence is crucial. Is there a special syntax required when placing the Hero definition in the middle? Your guidance would be greatly appreciated. You can find the Plunker for the tutorial here. Thank you!