mteb/FreshStackRetrieval huggingface dataset:
The goal is to create a web components using angular and use it in an external html file.
I created the web component : 'my-web-component'
(async () => {
  const app: ApplicationRef = await createApplication(appConfig);

  // Define Web Components
  const MyComponent = createCustomElement(MyComponentComponent, { injector: app.injector });
  customElements.define('my-web-component', MyComponent);
})();

I served(ng serve) and the Custom element works!
So, I build my project getting 3 files : main.js, polyfills.js and index.html  (/dist).
I tested the dist/index.html with Live Server and the Custom element still works.
<!doctype html>
<html lang="en" data-critters-container>
<head>
  <meta charset="utf-8">
  <title>WebComponentClean</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles-5INURTSO.css"></head>
<body>
  <my-web-component></my-web-component>
  <script src="polyfills-RT5I6R6G.js" type="module"></script>
  <script src="main-QVCUGX7F.js" type="module"></script>
  <script src="prova.js"></script>
</body>
</html>


Now there is the problem
I created a second index2.html in this project, but out of src folder, and I tested my web component:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/dist/web-component-clean/browser/styles-5INURTSO.css">
</head>
<body>
    <my-web-component></my-web-component>
    <script src="/dist/web-component-clean/browser/main-QVCUGX7F.js" type="module"></script>
    <script src="/dist/web-component-clean/browser/polyfills-RT5I6R6G.js" type="module"></script>
    <script src="/dist/web-component-clean/browser/prova.js"></script>
</body>
</html>
I have an Angular 17 application that uses server-side rendering. The state of the application is managed using ngrx.
When I access the page, I can see that the page comes pre-rendered (by viewing the source of the page, for example), but once the page loads, Angular seems to start from scratch.
For example, I have some labels that are obtained through an HTTP request. Initially I see the labels in the page, but then Angular starts and clears the state, rendering  the labels blank. It then performs the HTTP request to fetch those labels and displays them again. The end-result is correct but there is a flicker when Angular takes over. From what I read it should be reusing the state from the server.
On the browser console, I can see the following:
Angular hydrated 12 component(s) and 98 node(s), 0 component(s) were skipped. Learn more at https://angular.io/guide/hydration.

This seems to indicate the Angular was able to hydrate all my components. I have the Redux dev tools, and by checking them it seems that it is the store that is not being hydrated, as the initial state corresponds to the default state of the store while I would expect it to start from the state that came from the server.
What do I need to do to preserve the state of the store?
Icons don't work in Angular.
In the component.ts file:
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-dashboard-space',
  standalone: true,
  imports: [
    MatIconModule,
  ],

And in the HTML file:
<div class="w-[20rem] h-[20rem] bg-yellow-100">
  <mat-icon>grade</mat-icon>
</div>

and what I see is the text: "gra"
Of course, I ran npm install --save @angular/material.
But the console is empty.
Do you have any idea?
My application runs fine. My application is a standalone component app. When I try to test the component, I get the error mentioned in the title in Karma.
Imports of my component
import { Component } from '@angular/core';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import { NavigationComponent } from '../../../0_navigation/navigation.component';
import jsonDataShipments from '../../../../../assets/shipments.json';

@Component({
  selector: 'app-sort-functionality',
  standalone: true,
  imports: [NavigationComponent, MatFormFieldModule, MatSelectModule],
  templateUrl: './sort-functionality.component.html',
  styleUrl: './sort-functionality.component.css'
})

Config of my app
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(), provideAnimationsAsync(),
  ],
};

Error
Error: NG05105: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).

If I import BrowserAnimationsModule
I get this error
Uncaught (in promise): Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
I have a component (see: it is a standalone one):
@Component({
  standalone: true, // <--- See here 
  selector: "app-login",
  imports: [FormsModule, CommonModule],
  templateUrl: "./login.component.html",
  styleUrl: "./login.component.css"
})
export class LoginComponent {
  constructor(private authService: AuthService) {}
}

And the service is (see, it requires HttpClient to be injected):
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export default class AuthService {
  constructor(private http: HttpClient) {} // <--- See here: if I remove this httpClient, it works.
}

It does not works:
ERROR NullInjectorError: R3InjectorError(Standalone[e])[e -> e -> e -> e]: 
  NullInjectorError: No provider for e!

If I remove the httpClient from the constructor of the service, it works (but it does nothing). It seem to me that the injection of the HttpClient inside the service is not working.
Any clue?
Version: Angular 17
PS: lot's of details removed :-)
Clicking on the second button in a @for-list changes the state to true of the 2nd and 3rd buttons when using it as a component. When using the button from the component directly, it works correctly: the state of the 2nd button is true, while the state of the 3rd button is still false. Why is that?
Stackblitz
app.component.ts:
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Clicking on second button changes state of 2nd and 3rd button when using as component<br><br>
    When using the button component directly, it works correctly<br><br>
    undone:
    @for (todo of undoneTodos; track $index) {
      <!-- <button (click)="toggle(todo)">{{ todo.done }}</button> -->
      <app-slider [id]="'undone-'+$index" [active]="todo.done" (activeChange)="toggle(todo)"></app-slider>
    }

    done:
    @for (todo of doneTodos; track $index) {
      <app-slider [id]="'done-'+$index" [active]="todo.done" (activeChange)="toggle(todo)"></app-slider>
    }
  `,
  imports: [SliderComponent]
})
export class App {
  undoneTodos: Todo[] = [];
  doneTodos: Todo[] = [];

  private todos: Todo[] = [
    {id: 1, done: false },
    {id: 2, done: false },
    {id: 3, done: false },
  ]

  constructor() {
    this.buildTodos();
  }

  toggle(todo: Todo) {
    todo.done = !todo.done

    this.buildTodos();
  }

  private buildTodos() {
    this.doneTodos = this.todos.filter(x => x.done);
    this.undoneTodos = this.todos.filter(x => !x.done);
  }
}

export interface Todo {
  id?: number;
  done: boolean;
}

slider.component.ts:
import { Component, EventEmitter, Input, Output } from "@angular/core";

@Component({
  selector: 'app-slider',
  standalone: true,
  template: '<button (click)="onClick($event)">{{ active }}</button>',
})
export class SliderComponent {
  @Input() active: boolean = false;
  @Output() activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  
  onClick(event: Event) {
    event.stopImmediatePropagation();
    
    this.active = !this.active;
    this.activeChange.emit(this.active);
  }
}
I have a timer for 10 minutes and I need to show it in my angular app that has many routing links (pages). I know that angular is one page site but you can browse to different areas by using routing. Since this is true, how to show the timer in the main app component for all the routing links without resetting the timer everytime i go to difffent routing link?
timer code:
typescript file:
timer(minute) {
    // let minute = 1;
    let seconds: number = minute * 60;
    let textSec: any = "0";
    let statSec: number = 60;

const prefix = minute < 10 ? "0" : "";

const timer = setInterval(() => {
  seconds--;
  if (statSec != 0) statSec--;
  else statSec = 59;

  if (statSec < 10) {
    textSec = "0" + statSec;
  } else textSec = statSec;

  this.display = `${prefix}${Math.floor(seconds / 60)}:${textSec}`;

  if (seconds == 0) {
    console.log("finished");
    clearInterval(timer);
  }
}, 1000);


}

html file:
{{display}}

if I put this in main app component and tried to go to different routing link it will reset the timer again and I don't want this to happened. Let us say main page is properties and second one is contacts, if i switch between then the timer resets again and again, I don't want that.
I am trying to add a bootstrap toaster to my angular project. I am using angular 17 with standalone components.
I am trying to follow what was done in this github repository but my project is standalone.
Running ng serve is successful but when I am trying to access http://localhost:4200/ I get the following error
[vite] Internal server error: document is not defined
      at enableDismissTrigger (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:802:19)
      at eval (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:884:1)
      at async instantiateModule (file:///D:/dev/git-2.0/base-templates/angular/angular-bootstrap-5-base/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9) (x6)

https://stackblitz.com/~/github.com/Chrispie/code-problems on my issue-creating-bootstrap-5-toaster-with-angular-17-standalone branch:

I added my sample project where I have reproduced the error to my github repo.
Any idea as to what am I doing wrong here or what does it mean in this context?
For completeness sake I am outlining below what I have done.
I created a new angular project with scss and added the following 2 dependencies
npm i bootstrap
npm i @types/bootstrap --save-dev

A toast and a toaster component is added with a service and 2 models. The main app component has a few buttons to launch the toasts.
When running I am expecting it to look something like this
I am trying to connect to an API through a service that I have created with Angular but when I enter the page, console browser returns the following error:
main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[_HomeComponent])[_EventosService -> _EventosService -> _EventosService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1654:27)
    at R3Injector.get (core.mjs:3093:33)
    at R3Injector.get (core.mjs:3093:33)
    at injectInjectorOnly (core.mjs:1100:40)
    at Module.ɵɵinject (core.mjs:1106:42)
    at Object.EventosService_Factory [as factory] (eventos.service.ts:8:28)
    at core.mjs:3219:47
    at runInInjectorProfilerContext (core.mjs:866:9)
    at R3Injector.hydrate (core.mjs:3218:21)
    at R3Injector.get (core.mjs:3082:33)

I am using Angular version 17 in my project and doing the imports in the same HomeComponent component. The affected files are the following.
home.component.ts
import { Component, OnInit } from '@angular/core';
import { EventosService } from '../../shared/services/eventos/eventos.service';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
  imports: [CommonModule, HttpClientModule],
  styleUrls: ['./home.component.sass']
})

export class HomeComponent implements OnInit{

  constructor( private es: EventosService ) {}

  usuarios : any = {};
  
  ngOnInit(): void {
    this.es.getEventos().subscribe(data => {
      this.usuarios = data;
    });
    console.log(this.usuarios);
  }

}

eventos.services.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable(
  {providedIn: 'root'}
)
export class EventosService {

  private baseUrl = "https://localhost:7019/api";

  constructor( private http: HttpClient ) { }

  public getEventos(): Observable<any> {
    return this.http.get(`${this.baseUrl}/Usuarios`);
  }

}

WARNING: I am aware that the service is called "Eventos" and I am calling "Usuarios" in the API, it is to test that it returns me some result even if it is by console.
INFO
I am using Angular 17 with the default settings although the project is migrated from Angular 16. The API is made with .NET but with other tools I can connect well to it and launch requests that return results.
I am using the command ng new <project-name> to create a new angular project. When the project is created, though it runs properly, there is no angular module present in the project.
The ng new command is generating a project only with StandAlone components.
I am using angular 17
I would like to initialize some important values when my application starts (Angular v17).
app.config.ts:
export const appConfig: ApplicationConfig = {
    providers: [
        ConfigService,
        ...
        {
            provide: APP_INITIALIZER,
            useFactory: (init: ConfigService) => init.load(),
            multi: true,
            deps: [ConfigService, HttpClient]
        }
    ]
};

config.service.ts:
@Injectable({
    providedIn: 'root',
})
export class ConfigService {
    private http = inject(HttpClient);
    
    private _config: any;
    private _user: AppUser;
    
    public getConfigUrl(key: string): string {
        return this._config.urls[key];
    }

    public load(): Promise<any> {
        return new Promise((resolve, reject) => {
            this._user = new AppUser(); <-- normally a request to my node-express server
            this._config = 'test';
            resolve(true);
        });
    }
}

Then I got this error when I ran the application and did not understand why.
ERROR TypeError: appInits is not a function
    at \_ApplicationInitStatus.runInitializers (core.mjs:31069:32)
    at core.mjs:34973:28
    at \_callAndReportToErrorHandler (core.mjs:31146:24)
    at core.mjs:34971:20
    at \_ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:14424:33)
    at \_ZoneDelegate.invoke (zone.js:367:52)
    at \_Zone.run (zone.js:130:43)
    at \_NgZone.run (core.mjs:14275:28)
    at internalCreateApplication (core.mjs:34948:23)
I have a select that controls a list that just doesn't seem to be working. The error I get in the console is
core.mjs:6531 ERROR Error: NG05105: Unexpected synthetic listener @transformPanel.done found. Please make sure that:

Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.

Typescript:
import { Component } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { DatePipe } from '@angular/common';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { provideAnimations } from '@angular/platform-browser/animations'; 
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';

export interface legend {
  name: string;
  image: string;
  tooltip: string;
}
export interface maplist {
  name: string;
  legends: Array<legend>
}



@Component({
  selector: 'app-legend',
  standalone: true,
  imports: [MatListModule, MatIconModule, MatDividerModule, DatePipe,
    MatSelectModule, MatTooltipModule, MatFormFieldModule, FormsModule, 
  ],
  providers: [
    provideAnimations()
  ],
  templateUrl: './legend.component.html',
  styleUrl: './legend.component.css',
})
export class LegendComponent {
  selectedValue: Array<legend> = [];

  maplistdata: maplist[] = [
    {
      name: "Echocondria",
      legends: [
        {
          name: "House",
          image: "",
          tooltip: "Living quarters for the residents."
        },
        {
          name: "Shop",
          image: "",
          tooltip: "Places to buy and sell goods."
        },
      ]
    },
    {
      name: "Echocondria Sewers",
      legends: [
        {
          name: "House",
          image: "",
          tooltip: "Living quarters for the residents."
        },
        {
          name: "Shop",
          image: "",
          tooltip: "Places to buy and sell goods."
        },
      ]
    },
  ]
}

HTML:
  <mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select 
    color="primary"
    [(ngModel)]="selectedValue" name="legendselect"
  >
    <mat-option>None</mat-option>
    @for (legend of maplistdata; track legend) {
        <mat-option [value]="legend.legends">{{legend.name}}</mat-option>
    }
   </mat-select>
  </mat-form-field>

  @for (legenditem of selectedValue; track legenditem) {
  <mat-list-item>
  <mat-icon matListItemIcon>folder</mat-icon>
  <div matListItemTitle [matTooltip]="legenditem.tooltip"><img class="legendIcon" [src]="legenditem.image"/> {{ legenditem.name }}</div>
   <div matListItemLine>{{legenditem.tooltip}}</div>
</mat-list-item>
  }


I've tried importing the modules in question but still get the same error or an error that the module is already included.
In the previous *ngIf directives we were able to chain multiple async operations to not repeat the async pipe in the template but to reuse them later as one subscription, now I want to use the same behavior using the new @if syntax provided in Angular 17, is it possible?
Old way:
<ng-container *ngIf="{
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // and so on...
} as data">
  <span *ngIf="data.test.length">Show something</span>
</ng-container

I want to replace the code above to use only @if statement
@if({
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // it doesn't work that way
} as data) {
   <!-- show something -->
}
My folder structure
I don't understand why the rendering is on the server side but the components are placed on the client because after building I see the components are in the browser folder. am I making a mistake here?
I tried turning off javascript to check if the components are being rendered on the server side, the result is that after turning off js, the website is still displayed, which means the website is still rendered on the server side.
I am using Angular version 17 cli
<div class="row" [class.dark-category-box]="themeService.isDark()" *ngIf="trendingCategories">

I get this error:
 Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the 
'CategoriesStyleThreeComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 
'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

This is the app.module:
    import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgxScrollTopModule } from 'ngx-scrolltop';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';  
import {CategoriesStyleThreeComponent} from './components/common/categories-style-three/categories-style-three.component'

 @NgModule({
 declarations: [],
 imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxScrollTopModule,
    HttpClientModule,
    CommonModule
 ],
 providers: [],
 bootstrap: [],
     exports: [CategoriesStyleThreeComponent]
 })
   export class AppModule { }

and my component code:
 import { Component, OnInit } from '@angular/core';
 import { ThemeCustomizerService } from '../theme-customizer/theme-customizer.service';
 import { RouterLink } from '@angular/router';
 import { CategoryService } from '../../../services/category.service';
 import { Category } from '../../../models/category.model';


@Component({
selector: 'app-categories-style-three',
standalone: true,
imports: [RouterLink],
templateUrl: './categories-style-three.component.html',
styleUrls: ['./categories-style-three.component.scss']
})
export class CategoriesStyleThreeComponent implements OnInit {
trendingCategories: Category[];
numCategories: number = 5;

isToggled = false;

constructor(public themeService: ThemeCustomizerService,
    private categoryService: CategoryService) {
    this.themeService.isToggled$.subscribe(isToggled => {
        this.isToggled = isToggled;
    });
}

toggleTheme() {
    this.themeService.toggleTheme();
}

ngOnInit(): void { 
    this.loadTrendingCategories();
}

loadTrendingCategories(): void {
    this.categoryService.getTrendingCategories()
        .subscribe(categories => {
            this.trendingCategories = categories;
            console.log(categories);
        });
  }

 }
I have a website that is a Video Gallery of my Youtube, and this videos are builded in iframe tag.
But I want use some loading in this for loop, because when I open my page the load is slow.
What I do?
My Code:
`@for (link of youtubeLinks; track $index) {
    <div class="video-container mx-1 mb-2">
      <iframe #youtubeVideos 
              width="315" 
              height="560" 
              [src]="getVideoSrc(link)" 
              frameborder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
               allowfullscreen>
       </iframe>
    </div>
 }`

I used a @defer directive, but doesn't worked.
I wanted each iframe to be loaded as the page scrolled, or to each one to be loaded at a time, not all of them as soon as they entered the page.
X [ERROR] Expected $config.color.primary to be a valid M3 palette.
angular 17
I can't find the expected valid M3 palette for @angular/material-experimental anywhere.
tryied this in styles.scss:
@use "@angular/material" as mat;
@use "@angular/material-experimental" as matx;

$primary-palette: (
    0: #000000,
    10: #191027,
    20: #2b1a41,
    25: #3d245c,
    30: #4f2f76,
    35: #9257c5,
    40: #654083,
    50: #79539b,
    60: #9d80b7,
    70: #c1aed3,
    80: #e5dbef,
    90: #e5ddee,
    95: #e9e3ef,
    98: #ebe7ef,
    99: #efecf1,
    100: #ffffff,
);

$m3-custom-theme: (
    color: (
        primary: $primary-palette
    ),
);

$light-theme: matx.define-theme($m3-custom);

html,
body {
    height: 100%;
    @include mat.button-theme($light-theme);
}