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"
