feat(@schematics/angular): Implement a standalone flag for new applications

[Brocco]

PR Checklist

Please check to confirm your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

The ability to create an application without the use of NgModules does not exist.

Issue Number: #23976

What is the new behavior?

The flag --standalone is added to both the ng new command as well as ng generate application schematic.

Does this PR introduce a breaking change?

• Yes
• No

Other information

[AndrewKushnir]

@Brocco great work, thanks! 👍 Just left a few minor comments.

[alan-agius4]

Most of the files in module-file and standalone-files are the same 6 out of the 8 files. Can we have these into a separate directory and re-use it instead of have them multiple times?

My concern here is that certain files should always be the same irrespective if users select standalone and not. But we already started diverging example the index.html file is not identical.

[Brocco]

Combined most of the files to a set of common directories, but kept a few separate in order to not overly complicate the internal logic.

[eneajaho]

Hello, this is great 🔥

I have a question, isn't it better to have the config directly in the main.ts file?

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter()
  ]
})

This way we don't need another file like app.config.ts. One less file to explain.

I understand that app.config.ts imitates AppModule's model and is easier for devs to connect the dots with the newer version, but isn't it better if this separation is done by devs themselves?

Things like router or http client or animations, are setup only once, and changed very little during development, that's why I think it's better to have them in one file in main.ts.

EDIT: Also, that's the default behavior of the migration schematic, put providers in the main.ts file.

[Brocco]

@eneajaho the decision to put these dependencies in app.config (or app.routes) is to keep them closer to the application in the app directory. This location parallels the location of app.module. Also by keeping it outside of main.ts for the browser will allow the same configuration to be used for apps taking advantage of universal which creates a main.server.ts file.

[alan-agius4]

I believe that we can still simply the schematic greatly. But let's do that in a followup to unblock the other schematics.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}