After refactoring my Angular 2 component code and adding some tabulations, the code suddenly stopped working. Surprisingly, when I removed the tabs (spaces), it started working again.
@Component({
templateUrl : './app.component.html',
styleUrls : ['./app.component.scss'],
encapsulation : ViewEncapsulation.None
})
export class AppComponent {}
The initial code snippet did not work as expected. However, the following modification made it work:
@Component({
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {}
This behavior is quite odd and unexpected.
https://i.sstatic.net/owpIQ.png
UPDATE: I am using webpack along with awesome-typescript-loader and angular2-template-loader for transpiling the code.
When the code includes tabs and spaces, it compiles to this result: https://i.sstatic.net/sgRpp.png
On the other hand, without any tabs or spaces, the compilation leads to a different outcome: https://i.sstatic.net/vdjRA.png
It appears that the webpack loaders are having trouble recognizing the code when there are spaces between the ":" in the object decorator definition.