Mismatch between code, ng build output and browser interpretation

Question

Im making an angular 13 library the contains two services and a set of models. Its an auth service and a client service. After building some global variables are missing, and when the browser interpretes it its even more off. problems will be better described in the examples.

This is the auth service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface IAuthenticate {
    Token: string,
    TwoFactor: boolean,
    UserId: string,
    MaxRetry: number
}

@Injectable({
  providedIn: 'root'
})
export class Auth {
  constructor(private http:HttpClient) { }
  // Authenticate user
  public authenticate(username:string, password:string, url:string):Observable<IAuthenticate> {
    const URL = url+'/Auth';

    const httpOptions = {
      headers: new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) })
    }
    return this.http.get<IAuthenticate>(URL, httpOptions)
  }

}

This is the client service:

import { Injectable } from '@angular/core' 
import { HttpClient, HttpHeaders } from '@angular/common/http' 
import { Observable } from 'rxjs' 

@Injectable({
  providedIn: 'root'
})
export class DatalexClient { 
    constructor(private http:HttpClient) { } 

    token!: string; 
    webURL!: string; 

    public InitializeClient(token: string, webURL: string, callback: () => any) {
        this.token = token;
        this.webURL = webURL;
        callback()
    }

    public GetAccounts(): Observable<any[]> 
    { 
        const URL = this.webURL + '/GetAccountss'; 
        const body = { 
            'token': this.token, 
        }; 
        const httpOptions = { 
            headers: new HttpHeaders({'content-type': 'application/json'}) 
        } 
        return this.http.post<any[]>(URL, body, httpOptions); 
    }  

}

The thought behind this is to first authenticate and then initialize the client, setting token and weburl.

How I planned to use it in my project:

      // inside component class

      this.dlxAuth.authenticate(this.username, this.password, "url").subscribe({
        next: (r) => this.client.InitializeClient(r.token, "url", this.callback)
        error: console.error.bind(this)
      })

      callback(): any {
        console.log("initilized")
        // any init code
      }

So here i run in to my first problem, ng serve compiles the project just fine. When i try to call "InitializeClient" i get an error saying "ERROR TypeError: this.dlxClient.InitializeClient is not a function". I have checked all the library files(output from ng build in the library project) and "InitializeClient" actually exist in the in all the library ".mjs" files and ".d.ts" files, but its missing when I check chrome devtools -> sources -> node_modules -> mylib client.mjs.

Im lost on why this happens.

I got around this problem bu setting token and weburl directly:

      // inside component class

    this.auth.authenticate(this.username, this.password, url).subscribe({
      next: (r) => {
        // this.client.InitializeClient(r.Token, url, this.init);
        this.client.token = r.Token;
        this.client.webURL = url;
        this.init();
      },
      error: console.error.bind(this)
    })

This seems to work because when i console.log "this.client" it does contain the token and url.

Now that i have a valid token and url in my client service, I try to use it in a component to fetch "accounts".

Here is how i do it:

    this.client.GetAccounts().subscribe({
      next: console.log.bind(this),
      error: console.error.bind(this)
    });

Now my second problem appears. The HTTP request fails because the url passed to the function (typescript const URL = this.webURL + '/GetAccountss'; ) is "undefined". And when i inspect the source in the browser it becomes clear why its undefined. It tries use "this.auth.url" which does not exist at anypoint in my code, not in the compiled code, not even the interpreted code in the browser, so how it gets there beats me.

screenshot from browser source:

it also injects the auth service in to the client which its not supposed to do:

If someone could enlighten me on this it would be super appreciated.

Answer 1

Stopping restarting "NG SERVE" solved my problem, seems like the bundler didnt include the new updated files without restarting.