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?

3

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.

5

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

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.

Share this article
Twitter Facebook Pinterest