Completion stops working when switched to a profile based on Angular template

[NeuSandeZ]

As in title. I run both extensions in latest versions.

[ecmel]

Could you provide a link for other extension?

[NeuSandeZ]

I use Angular profile built into VSCode + your extension.

[ecmel]

What is exactly broken? can you provide more info

[NeuSandeZ]

IntelliSsense doesn't pop up automatically when i start typing some css class in html code. It happens only when your extension is on. I'm able to trigger it by ctrl+space and it works correctly. I use legacy colors.

[ecmel]

Can you share your .vscode/settings.json file? This extension is named "HTML CSS Support" as well so can you provide the file you are working on?

[NeuSandeZ]

Sorry for the late replay. Here are files you've asked for.

settings.json

This is just html in an angular project.

<div>
  <h1>{{ recipe.title }}</h1>
  <div class="card">
    <img class="card-img-top" [src]="recipe.imgUrl" alt="Card image cap" />
    <div class="card-body">
      <p class="card-text">
        {{ recipe.description }}
      </p>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Submited by: nick | updated on:</li>
      <li class="list-group-item">Tested by:</li>
    </ul>
    <div class="card-body">
      <button mat-raised-button color="warn">
        Save <span><mat-icon>favorite</mat-icon></span>
      </button>
      <a class="card-link">Another link</a>
    </div>
  </div>

  <div class="mt-4">
    <mat-accordion class="example-headers-align" multi>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title class="mat-panel-title-custom-style">
            Ingredients
          </mat-panel-title>
        </mat-expansion-panel-header>

        <ul>
          @for (item of recipe.ingredients; track $index) {
          <li>{{ item.ingredient }}</li>
          <hr />
          }
        </ul>
      </mat-expansion-panel>
    </mat-accordion>
  </div>

  <div class="recipe-box mt-4">
    <div class="row g-3">
      @for (item of recipe.prepTime; track $index) {
      <div class="col-sm-4">
        <span class="recipe-header">{{ item.name }}:</span>
        {{ item.amount }} mins
      </div>
      }
    </div>
    <hr />
    <a href="#nutrition-facts" class="jump-link">Jump to Nutrition Facts</a>
  </div>

  <div class="card mt-4">
    <div class="card-body">
      <h1 class="card-header">Directions</h1>
      <div class="col m-2">
        @for (item of recipe.steps; track $index) {
        <div class="card-body">
          <h3 class="card-title">Step {{ $index }}</h3>
          <p class="card-text">{{ item.directionStep }}</p>
        </div>
        }
      </div>
    </div>
  </div>
</div>

[ecmel]

Can you also tell me where is your css located? e.g in which file cardclass is defined in your project?

[NeuSandeZ]

Class card is a bootstrap class and it is acknowledged by HTML extension in .vscode.settings.json as well as all of css files references.

"css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
    "src/**/*.css",
    // "SRC/Frontend/RecipeRhapsody/src/**/*.css",
  ],

On top of that in angular.json project file i provide:

 "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "@angular/material/prebuilt-themes/deeppurple-amber.css",
            "src/styles.css"
          ],

[ecmel]

With the same settings:

"css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
    "src/**/*.css",
    // "SRC/Frontend/RecipeRhapsody/src/**/*.css",
  ],

Completion works in the html file.

Which Angular extension are you using?

[NeuSandeZ]

Oh i'm sorry i didn't specify

vscode-angular-html

extension for highlighting angular syntax. When it's enabled the intellisense doesn't work for css html.

[ecmel]

I installed vscode-angular-html but no matter I tried the completion worked.

[NeuSandeZ]

Can you switch to Angular profile built in vscode install the vscode-angular-html and try again cause there's bunch of extensions installed there? Did you run the command 'vscode-angular-html: Set legacy color customizations' from the command pallette?

[ecmel]

Created a new profile based on Angular template now the completion stopped working. At last. :)