Search code examples
angularstackblitz

How to run stackblitz project

Sorry for the stupid question.

Beginner with angular (and stackblitz) I created a stackblitz project to ask for help on an angular subject (reactive forms) https://stackblitz.com/edit/angular-4vdtbe?file=src%2Fselect%2Fselect.component.ts,src%2Fselect%2Fselect.component.html But I can't run it. How can I do that ?

Thanks

Solution

  • Sorry, there are many issues, i've just fixed some of them

    1. First, look at the stackblitz console, it helps you to look for issues Console

    2. index.html should have main.ts component(which has selector ), that's why you need add in index.html

    <html>
  <head>
    <title>My app</title>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>
    1. main.ts template has default code. Add a selector of your component. Import your SelectComponent
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { SelectComponent } from './select/select.component';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, SelectComponent],
  template: `
    <app-select></app-select>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);
    1. select.component.ts, make your component as standalone and import nessesary modules
    import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';

export interface IDocument {
  id: string;
  label: string;
  maxQuantity: number;
}

@Component({
  selector: 'app-select',
  standalone: true,
  imports: [ReactiveFormsModule, FormsModule, CommonModule],
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css'],
})
....
    1. Fix other issues, with your code Here, a demo, there I cut some code(with issues) just to launch the application https://stackblitz.com/edit/angular-wiskwl?file=src/select/select.component.ts