console.log not working in Angular2 Component (Typescript)

Question

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?

what did you put in the @Component? Can you try and put a constructor in the class like this: constructor() { console.log('test')} — L.querter
– L.querter, Commented Jun 16, 2016 at 21:19
i think it's not working because console.log is not wrapped in a function. can you show the JS compiled form ? — L.querter
– L.querter, Commented Jun 16, 2016 at 21:21
@L.querter: console.log is working when it's used inside the constructor but doesn't work when used outside the constructor even if constructor is present. Maybe wrapping it in a function is necessary. I wasn't aware of this. — Pranjal Mittal
– Pranjal Mittal, Commented Jun 16, 2016 at 21:26

Paradox · Accepted Answer · 2020-01-19 17:58:47Z

83

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.

https://www.typescriptlang.org/play/index.html

edited Jan 19, 2020 at 17:58

Paradox

4,56413 gold badges50 silver badges91 bronze badges

answered Jun 16, 2016 at 21:58

Daniel Pliscki

1,94316 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pranjal Mittal Over a year ago

A variable initialization is also an expression and I am confused why that works outside the constructor's scope and function calls do not.

Daniel Pliscki Over a year ago

Try that typescript playgroung I mentioned above, you'll see that every variable definition is transpilled to a javascript function body.

Mauricio Gracia Gutierrez Over a year ago

something so obvious and I was starting to go crazy trying to solve this - thanks

QuestForMastery Over a year ago

In the javascript example you gave, it still makes no sense that s:string, console.log(s) shouldn't return at least some value. It should at least say in the browser s is of type string.

Jonathan Over a year ago

Wow, in an hour of searching, this answer finally made it click in my mind. Thank you! Angular newbie here.

SeleM · Accepted Answer · 2016-06-16 23:01:55Z

7

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); 
    }

}

answered Jun 16, 2016 at 23:01

SeleM

9,6785 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

console.log not working in Angular2 Component (Typescript)

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related