title: Why my angular service variable is undefined?
body: <p>i've been trying to get a varaible from one component to another in my code and yet it returns undefined</p>
  
  <p>my service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ColorService {
  
    public color : string;
  
    constructor() { }
  }
  </code></pre>
  
  <p>My app module</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  import { RouterModule, Routes } from '@angular/router';
  
  import { ColorService } from './core/color.service';
  
  import { UserComponent } from './user/user.component';
  import { PublicComponent } from './public/public.component';
  
  const routes : Routes = [
    {
      path: '',
      redirectTo: 'user',
      pathMatch: 'full'
    },
    {
      path: 'user',
      component: UserComponent
    },
    {
      path: 'public',
      component: PublicComponent
    },
    {
      path: '**',
      redirectTo: 'user'
    }
  ]
  
  @NgModule({
    declarations: [
      AppComponent,
      UserComponent,
      PublicComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes)
    ],
    providers: [
      ColorService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>my user component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ColorService } from '../core/color.service';
  
  @Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.scss']
  })
  export class UserComponent implements OnInit {
  
    constructor(private color: ColorService) { }
  
    ngOnInit(): void {
  
    }
  
    colorit(){
      this.color.color = 'blue';
      console.log(this.color.color);
    }
  
  }
  </code></pre>
  
  <p>and the component that should get the color string</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ColorService } from '../core/color.service';
  
  @Component({
    selector: 'app-public',
    templateUrl: './public.component.html',
    styleUrls: ['./public.component.scss']
  })
  export class PublicComponent implements OnInit {
  
    constructor(private color: ColorService) { }
  
    ngOnInit(): void {
  
    }
  
    getColor(){
      console.log(this.color.color);
    }
  }
  
  </code></pre>
  
  <p>yet, everytime that i try to get the color in the public component i get a undefined, even tought it's included within the providers of appModule</p>