mteb/FreshStackRetrieval huggingface dataset:
I uploaded my project to angular 18 (also material v.18) and the styles of my palette theme have changed and I cannot deploy my project.
@use 'SASS:map';
@use '@angular/material' as mat;


$md-primary: (
    50 : #fee6fe,
    100 : #fcbffd,
    200 : #fa95fb,
    300 : #f76bf9,
    400 : #f64bf8,
    500 : #f42bf7,
    600 : #f326f6,
    700 : #f120f5,
    800 : #ef1af3,
    900 : #ec10f1,
    A100 : #ffffff,
    A200 : #feebff,
    A400 : #fdb8ff,
    A700 : #fc9eff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);


$md-secondary: (
    50 : #f6e1ff,
    100 : #eab3ff,
    200 : #dc80ff,
    300 : #cd4dff,
    400 : #c327ff,
    500 : #b801ff,
    600 : #b101ff,
    700 : #a801ff,
    800 : #a001ff,
    900 : #9100ff,
    A100 : #ffffff,
    A200 : #f9f2ff,
    A400 : #e0bfff,
    A700 : #d4a6ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

//GLOBAL

$my-primary: mat.m2-define-palette($md-primary, 500);
$my-secondary: mat.m2-define-palette($md-secondary, 500);
$my-theme: mat.m2-define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-secondary,
 )
));
@include mat.all-component-themes($my-theme);

$color-config: mat.get-color-config($my-theme);
$primary-palette: map.get($color-config, 'primary');
$primary: mat.get-theme-color($primary-palette, 500);
$secondary: mat.get-theme-color($accent-palette, 500);
$light-secondary: mat.get-theme-color($accent-palette, 300);
$light-primary: mat.get-theme-color($primary-palette, 300);

//PALETTE BASICS
$light-grey: rgb(228, 228, 228);
$grey: #252525;
$secondary-text: #525252;
$black: rgb(20, 20, 20);


:root {
    --primary: #{$primary};
    --secondary: #{$secondary};
    --light-secondary: #{$light-secondary};
    --light-primary: #{$light-primary};
    --light-grey: #{$light-grey};
    --grey: #{$grey};
    --secondary-text: #{$secondary-text};
    --black: #{$black};
}




I have tried changing the variables to m2-(example) but I get the error: 'Hue "500" does not exist in palette. Available hues are: 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100, secondary, neutral, neutral-variant, error'
I am upgrading my Angular 17 application to Angular 18 and want to migrate to the new application builder.
I am using ng update @angular/core@18 @angular/cli@18 and opted in to the new application builder when I was asked. Next, I updated the angular.json file so that the browser build's location is using dist/project-x instead of dist/project-x/browser as suggested by the update process:

The output location of the browser build has been updated from dist/project-x to dist/project-x/browser. You might need to adjust your deployment pipeline or, as an alternative, set outputPath.browser to "" in order to maintain the previous functionality.

Here is an extract of my angular.json file:
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-x": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/project-x",
              "browser": ""
            },
            // ...
          },
          // ...
          "configurations": {
            // ...
            "development": {
              // ...
              "outputPath": {
                "base": "dist/project-x",
                "browser": ""
              }
            }
            // ...

ng build, ng build --configuration development and ng build --configuration production works as expected.
However, when overriding the output path in the command line, then it does not work as expected.
The command below, will create a folder browser in /projects/project-x-backend/:
ng build --base-href=/x/ --output-path=/projects/project-x-backend/wwwroot \
    --watch --configuration development --verbose

How can I get rid of the browser folder when using ng build --watch with a custom output path? (I would like to avoid setting the output path for the development configuration to /projects/project-x-backend/wwwroot in angular.json itself.)
I am using with angular 13
https://github.com/bbc/slayer

Its a commonjs lib and has no @types.I Managed to make it work with angular 13 (a while back) but now with the vite compiler I just dont know how.
I added "types": ["node"] to tsconfig.json and tsconfig.app.json
add declared a type.d.ts
declare module 'slayer';
but nothing works
ReferenceError: process is not defined
    at node_modules/slayer/node_modules/readable-stream/lib/_stream_writable.js

How can I import properly a commonjs module in my angluar 18 app ?
Thanks
Are there any differences or advantages or proper way to do this?
Let's say I have an observable, I may receive it from backend call, a service or through a GUI event like scrolling event.
I have a property in the template that depends on that observable. I am planning to provide the value to that property through a signal.
So I want to transfer the value to that signal through my observable, whenever it receives a value.
I found two ways to provide value to a signal through an observable:-

By modifying the value of the signal inside the subscribe method of the observable.
By converting the observable to a signal and directly using that signal.

Minimal Example Demonstrating Both Ways:-
Example On Stackblitz
import { Component, EventEmitter, OnDestroy, OnInit, Signal, signal } from '@angular/core';
import { toSignal } from "@angular/core/rxjs-interop";

@Component({
  selector: 'app-app',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

  // First Way
  nonToSignalButtonClick$ = new EventEmitter<number>();
  signalVar = signal<number>(-1);

  // Second Way
  toSignalButtonClick$ = new EventEmitter<number>();
  signalVarThroughToSignal = toSignal(this.toSignalButtonClick$, {initialValue: -1});

  ngOnInit() {
    // First Way
    this.nonToSignalButtonClick$.subscribe((v) => this.signalVar.update(initial => initial + v));
  }

  onDirectClick() {
    this.signalVar.update(initial => initial + 1);
  }

  // First Way
  onObservableClick() {
    this.nonToSignalButtonClick$.emit(1);
  }

  // Second Way
  onObservableToSignalClick() {
    this.toSignalButtonClick$.emit(this.signalVarThroughToSignal() + 1);
  }
}

<h1>{{ signalVar() }}</h1>

<button (click)="onDirectClick()">Direct Signal Incrase</button>

<hr />

<button (click)="onObservableClick()">Signal Increase Through Observable</button>

<hr />

<h1>Through toSignal: {{ signalVarThroughToSignal() }}</h1>

<button (click)="onObservableToSignalClick()">Signal Increase Through Observable converted to Signal</button>

Are there any advantages or differences between using one approach over the other? Thanks!
I have migrated my app to zoneless thanks to provideExperimentalZonelessChangeDetection() and having a mix of signals and Observables +AsyncPipe.
Do I still need the OnPush ChangeDetection Strategy ?
The Angular team just implemented the new @let syntax in templates. According to this comment it's implemented in this commit, which should already be released in version 18.0.2




I updated my NX workspace to use @angular/compiler 18.0.2 (npm update)

However it's still not working. I'm still getting the following error:
X [ERROR] NG5002: Incomplete block "let showSpan". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. [plugin angular-compiler]

    libs/example-ng-bootstrap/calendar/src/calendar.component.html:32:16:
      32 │                 @let showSpan = (day !== null) && day.isInMonth;
         ╵                 ~~~~~~~~~~~~~~

  Error occurs in the template of component BsCalendarComponent.

    libs/example-ng-bootstrap/calendar/src/calendar.component.ts:14:15:
      14 │   templateUrl: './calendar.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~

So what am I doing wrong?
The archivement is to use a base component where I would be able to render a default list of items or a customized one, to do so I've create a base component that has the mat-select-list in it like this:
<mat-selection-list class="pt-0" [multiple]="false" #list>
    <ng-content>
    @for (item of items(); track $index) {
        <mat-list-option [value]="{ id: item.id, name: item.name }">{{ item.name }}</mat-list-option>
    }            
    </ng-content>
</mat-selection-list>

The base mat-list-option has as the value the { id: item.id, name: item.name } and as the content {{ item.name }}, when I use this base component without passing any ng-content so by using the default one, I have no issues and the component behave as it has to.
The issue is when I try to use a custom in ng-content in a component like this:
@Component({
  selector: 'app-product-select-modal',
  standalone: true,
  imports: [BaseSelectModalComponent, MatListOption],
  template: `
    <app-base-select-modal title="Seleziona la licenza" [items]="items()" [itemsCount]="count()" [isLoading]="isLoading()" (onClose)="close()" (onConfirm)="confirm($event)">
      @for (item of items(); track $index) {
          <mat-list-option [value]="item">
            <div>{{ item.product.name }}</div>
            <span>{{ item.key }}</span>
          </mat-list-option>
      }
    </app-base-select-modal>
  `,
})
export class LicenseSelectModalComponent {
...
}

I just get NullInjectorError: NullInjectorError: No provider for InjectionToken SelectionList! error when the base-select-modal is trying to render.
I've tried yet to import MatListModule even in the LicenseSelectModalComponent but it has no effect.
Here is the base-select-modal:
@Component({
  selector: 'app-base-select-modal',
  standalone: true,
  imports: [MatDialogModule, MatButton, MatFormField, MatInput, MatLabel, MatListModule, ReactiveFormsModule, MatProgressSpinnerModule],
  templateUrl: './base-select-modal.component.html',
  styleUrl: './base-select-modal.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BaseSelectModalComponent {
...
}
I'm doing a project in Angular 18, I want to use the httpClientModule but it tells me that it is deprecated when I want to import it directly into a component. Likewise, when I want to import the httpClient within the imports of the same component it tells me component imports must be standalone components, directives, pipes, or must be NgModules.
I was investigating and it said that the solution is to put the provideHttpClient() function within the providers of the app.module.ts file but in my case I don't have that file, I only have the app.config.ts and app.config.server.ts In which of both should I put it?
The content of both files are this:
//app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes, withComponentInputBinding()), provideClientHydration()]
}; 

//app.config.server.ts
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { provideHttpClient } from '@angular/common/http';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);
I'm read all the Amplify Gen 2 Documentation but I don't find how to list all registered users in application.
It's because  need to create a admin page to list all users with his roles in Angular.
I think that probably can do this with lambda functions or something like that but I don't find nothing about that.
Thanks for all!
I'm read all the documentation: https://docs.amplify.aws/angular/build-a-backend/auth/connect-your-frontend/
Can't bind to 'ngModel' since it isn't a known property of 'textarea'
component.html
<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<button (click)="onSavePost()">save</button>
<p>{{ newPost }}</p>

component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-post-create',
  standalone: true,
  templateUrl: './post-create.component.html',
  styleUrl: './post-create.component.css'
})
export class PostCreateComponent {
newPost="NO content Here";
enteredValue='';
onSavePost(){
  this.newPost = this.enteredValue;
}
}

app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PostCreateComponent } from './post/post-create/post-create.component';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,FormsModule,PostCreateComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Project_ng_demo';
}

here is not app.module.ts file in agnular 18
import FormsModule in app.component.ts.
import { FormsModule } from '@angular/forms';
After upgrading my application to Angular 18.0.4, my test classes say:
'HttpClientTestingModule' is deprecated. Add provideHttpClientTesting() to your providers instead.
Therefore I adapted my code as follows:
        await TestBed.configureTestingModule(
            {
                imports: [
                    AssetDetailsComponent,
                ],
                providers: [
                    // replacement for HttpClientTestingModule:
                    provideHttpClientTesting() 
                ]
            })
            .compileComponents();

However, when I run the tests, I get the following error:
NullInjectorError: R3InjectorError(Standalone[AssetDetailsComponent])[InventoryActionService -> InventoryActionService -> _HttpClient -> _HttpClient]:
      NullInjectorError: No provider for _HttpClient!

If I use provideHttpClient() instead of provideHttpClientTesting() it works, yet I doubt that this is best practice. What is the correct solution to this issue?
I have a simple routing guard in my Angular application that uses "@angular/ssr": "^18.0.5" which check for the "redirect" query param.
export const redirectGuard: CanActivateFn = (_, state): boolean | UrlTree => {
  const hasRedirect = state.root.queryParams['redirect'];
  const router = inject(Router);
  if(!hasRedirect) {
    return router.createUrlTree(['/error']);
  }

  return true;
};

The app.routes.ts:
export const APP_ROUTES: Routes = [
  {
    path: '',
    canActivate: [redirectGuard],
    loadComponent: () =>
      import('./features/login/login.component').then((m) => m.LoginComponent),
  },
  ...
    {
    path: 'error',
    loadComponent: () =>
      import('./features/error/error.component').then((m) => m.ErrorComponent),
  }
]

When I try to reach the application like: http://localhost:4000/?redirect=https:%2F%2FXXX.XXX-XXX.XXX.XXX%2F the page behave like this:

The error page is shown for a while and then the guard process and show the LoginComponent.
I have an interceptor that adds the access token to every request. The only problem is, the only way I can get this access token is by using a function that returns a Promise:
 async getToken(): Promise<string> {
I HAVE to use this function to get the tokens. There is no other way. I have tried making the authInterceptor function async to no avail.
So how do I use this in a function based interceptor like so?
import { Inject, inject } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = Inject(AuthService)
  const authToken = await authService.getToken(); // how to do this?? 
  console.log(authToken);

  // Clone the request and add the authorization header
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${authToken}`
    }
  });

  // Pass the cloned request with the updated header to the next handler
  return next(authReq);
};

Please help.
It's any way to create component with cli to select the files of generate component? Or it can only set in the template in editors.
Sometimes, I need to create a simple component and i want to create a standalone component with one ts file,
However, when i use ng g c --standalone AComponent, It will create html, scss, spec, ts four file;
i cannot import FormsModule in task.component.ts file under task folder .Due to unable to solve error as "Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002)" .My code is
<input type="text" class="form-control" [(ngModel)]="newTask.description">
in task.component.html file.Pls help to resolve this error.
I need to use a programmatic stylebox overwrite, but for some reason it's not working. It says it's been overwritten, but continues to point to the default stylebox.
Here is some test code:
var panel = PanelContainer.new()
print(panel.has_theme_stylebox_override("normal"), panel.get_theme_stylebox("normal", "normal"))
    
var stylebox = StyleBoxFlat.new()
stylebox.bg_color = Color.from_string("#000000a0", Color.BLACK)
stylebox.corner_radius_bottom_left = 10
panel.add_theme_stylebox_override("normal", stylebox)
print(panel.has_theme_stylebox_override("normal"), panel.get_theme_stylebox("normal", "normal"))

Here is the output:
false<StyleBoxFlat#-9223372011084970892>
true<StyleBoxFlat#-9223372011084970892>

As you can see, despite being overwritten the stylebox is still pointing to the default for the theme.
So, I was following a tutorial for making my enemy move towards my player, and there comes a part of the script where its calls a "Move_Slide" so the enemy can move, but I get the error.
Heres my full code:
extends CharacterBody2D

# Movement speed
var speed = 100 
var player_position
var target_position
# Get a reference to the player. 
@onready var player = get_parent().get_node("Player")
 
func _physics_process(delta):
    
    # Set player_position to the position of the player node
    player_position = player.position
    # Calculate the target position
    target_position = (player_position - position).normalized()
 
    
    if position.distance_to(player_position) > 1:
        move_and_slide(target_position * speed)
        look_at(player_position)

the error is located at the part of the script "move_and_slide(target_position * speed)"
I've looked on Stack Overflow for this problem and I found a answer but this is for if i call a motion witch I don't so that doesn't help me.
I want to position one node to another, but they are under different parent nodes. How can I set one of the node's position to the other's, without interfering with the parent nodes' positions? Btw, the node3d with the position i'm trying to find has a random position
i've tried Node3D.global_position() and Node3D.global_translate (AI told me to try it). I know how to set global position, just not find it.
Recently I installed godot and decided to make a game but there was a problem:
I added Area2d for character for collision detection but the area2d sprite is kind of sick because it is overlapping the ground see:
See it is over lapping
Please solve
Please solve it is very important
For @TheJalfireKnight
Here You Go
I tried to make a project be in fullscreen in godot4. These are my settings:

and this is my main scene:

as you can see, I want the shape to be in the middle of the screen. But when I play the game, this happens:
why is the picture not in the center?
and why when I click on the green button (the resize button) it resizes and works perfectly fine. How do I fix this? I want it to work fine in fullscreen.
How do I detect mouse clicks/mouse events in an Area2D's script? Do I use the func _process(delta) function? Let's say I have an area 2D called area. So what should the script be like? I want something like this:
extends Area2D


func _process(delta):
    if mouse_touching && mouse_left_down:
        print("clicked on object")
Because my fullscreen godot game would be avaliable on many platforms (e.g. mac, windows) so I have to make sure that everytime my game launches on it's first time, it checks the OS and device it's on and sets the correct resolution for the device. How do I do this? I want something like this:
func _ready():
    device = project.get_device()
    project_settings.set_setting("window_width", device.width)
    project_settings.set_setting("window_height", device.height)
    project_settings.save()

note that the code I wrote is not actual GDscript, it's just an example of something I want.
This  multiplayer RPG game, which  i make, have a lots of problems :). This time, the problew is that, when the host place down a item with the my grid system, in remote tab(at Editor where you can see what is going on with the nodes when you ran the program) under the PlayerBuildings node nothing appears (in game the item is visible only for host) but when the client build sth is apear in remote tab  but again is visible only for client!!!. Also i get this error

get_node: Node not found:"World/PlayerBuildings/@Camp1@3/MultiplayerSynchronizer"   process_simplify_path: Condition "node == nullptr" is true.

Have anyone any idea??

And here is my grid base code:
extends Node2D

@onready var camp_fire = preload("res://src/Scenes/camp.tscn")
var tile_size =16

enum {OBSTACTLE, COLLECTABLE,RESOURCE}
var grid_size = Vector2(160,160)
var grid = []


func _ready():
    for x in range(grid_size.x):
        grid.append([])
        for y in range(grid_size.y):
            grid[x].append(null)
    var positions = []
    for i in range (50):
        var xcoor = (randi() % int(grid_size.x))
        var ycoor = (randi() % int(grid_size.y))
        var grid_pos = Vector2(xcoor,ycoor)
        if not grid_pos in positions:
            positions.append(grid_pos)

func _input(event):
    if GameManager.enable:
        if event.is_action_pressed("LeftClick"):
            var mouse_pos = get_global_mouse_position()
            var multiX = int(round(mouse_pos.x)/tile_size)
            var numX = multiX*tile_size
            var multiY = int(round(mouse_pos.y)/tile_size)
            var numY = multiY*tile_size
            var new_pos = Vector2(multiX, multiY)
            var new_camp_fire = camp_fire.instantiate()
            new_camp_fire.name = str(new_camp_fire.name + str(multiplayer.get_unique_id()) )
            new_camp_fire.set_position(tile_size*new_pos)
            grid[multiX][multiY] = OBSTACTLE
            get_tree().root.get_node("World").get_node("PlayerBuildings").add_child(new_camp_fire)