stackblitz / starters

StackBlitz Starter Project
MIT License
37 stars 16 forks source link

New Angular starter is not beginner friendly #5

Open Manish-Giri opened 1 year ago

Manish-Giri commented 1 year ago

The new Angular starter seems to have removed the default AppComponent that all new Angular projects, generated by Angular CLI, are setup with. There's no app folder, instead the usual contents of the AppComponent are now somehow in main.ts -

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FirstComponent } from './first/first.component';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FirstComponent], // ERROR - cannot import custom components
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a>
    <app-first></app-first>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Creating new, custom components and importing them into an AppComponent (which is what everyone does when getting started with Angular) now no longer works -

Screenshot 2023-06-17 at 9 09 25 PM

URL - https://stackblitz.com/edit/stackblitz-starters-2hwyyr?file=src%2Fmain.ts

It is not convenient having users go and first learn how to deal with standalone components and NgModule, if all they want to do is get started with a simple Angular app quickly.