console.log not working in Angular2 Component (Typescript)

I am relatively new to both Angular2 and typescript. Since typescript is a superset of javascript, I'd expect functions like console.log to work. console.log works perfectly in .ts files when outside a component class but does not work as I'd expect from inside the component class.

// main.ts import { Component } from '@angular/core'; console.log("Hello1"); //1. This works perfectly @Component({..) export class App { s: string = "Hello2"; // console.log(s); //2. This gives compilation error (when uncommented) // Error: Function implementation is missing or not immediately following the declaration. } 

Is there anything that I am missing?

4 Answers

It's not working because console.log() it's not in a "executable area" of the class "App".

A class is a structure composed by attributes and methods.

The only way to have your code executed is to place it inside a method that is going to be executed. For instance: constructor()

console.log('It works here') @Component({..) export class App { s: string = "Hello2"; constructor() { console.log(this.s) } }

Think of class like a plain javascript object.

Would it make sense to expect this to work?

class: { s: string, console.log(s) }

If you still unsure, try the typescript playground where you can see your typescript code generated into plain javascript.

The console.log should be wrapped in a function , the "default" function for every class is its constructor so it should be declared there.

import { Component } from '@angular/core'; console.log("Hello1"); @Component({ selector: 'hello-console', }) export class App { s: string = "Hello2"; constructor(){ console.log(s); } } 

Also try to update your browser because Angular need latest browser. check:

I fixed console.log issue after updating latest browser.

go to setting and use the options"restore defaults and relodenter image description here"

enter image description here