fix(material/schematics): support standalone components in ng-add #24931

crisbeto · 2022-05-17T18:25:04Z

Adds code to handle apps that are bootstrapped through bootstrapApplication instead of bootstrapModule.

Adds code to handle apps that are bootstrapped through `bootstrapApplication` instead of `bootstrapModule`.

AndrewKushnir · 2022-05-17T20:22:02Z

src/material/schematics/ng-add/setup-project.ts

+    if (importsProvidersFrom(host, mainFile, noopAnimationsModuleName)) {
+      context.logger.error(
+        `Could not set up "${browserAnimationsModuleName}" ` +
+          `because "${noopAnimationsModuleName}" is already imported.`,


nit: can we include information on where the NoopAnimationsModule is imported?

Suggested change

`because "${noopAnimationsModuleName}" is already imported.`,

`because "${noopAnimationsModuleName}" is already imported into ` +

`the "${...}" NgModule.`,

AndrewKushnir · 2022-05-18T00:34:06Z

src/material/schematics/ng-add/setup-project.ts

+    try {
+      addAnimationsModuleToNonStandaloneApp(host, project, context, options);
+    } catch (e) {
+      if (e instanceof SchematicsException && e.message.includes('Bootstrap call not found')) {


@crisbeto quick question: is there a situation now when the Bootstrap call not found is thrown? If that's the case, may be we can try to improve the messaging there as well (just change the content)?

It comes from the vendored utilities from the CLI repo. I'd rather avoid changing the message here since it'll be reset whenever they're updated. The only case where this will be thrown is if the main file doesn't have a bootstrapModule or bootstrapApplication call at all.

pkozlowski-opensource · 2022-05-18T13:46:16Z

src/material/schematics/ng-add/index.spec.ts

@@ -227,6 +227,52 @@ describe('ng-add schematic', () => {
      expect(errorOutput.length).toBe(1);
      expect(errorOutput[0]).toMatch(/Could not set up "BrowserAnimationsModule"/);
    });
+
+    it('should add the BrowserAnimationsModule to a bootstrapApplication call', async () => {
+      appTree.delete('/projects/material/src/app/app.module.ts');


question: why do we need to delete this file?

We don't, but I figured that if we had a --standalone option for ng new, this file wouldn't exist so I wanted the test to be as close as possible to the "real thing".

pkozlowski-opensource · 2022-05-18T13:50:18Z

src/material/schematics/ng-add/setup-project.ts

+    try {
+      addAnimationsModuleToNonStandaloneApp(host, project, context, options);
+    } catch (e) {
+      if (e instanceof SchematicsException && e.message.includes('Bootstrap call not found')) {


I'm worried that "sniffing" on the exception + its error message is rather fragile (will break any time someone decides to alter the error message). Could we have a specific exception type for this case? Or some other reliable way detecting what is going on?

I'm not a fan of it either, but I was trying to avoid changing any of the vendored schematic utilities. We have unit tests for this so if the message changes and the check doesn't hold anymore, we'll know about it.

Yeah, I guess this comes down to the common utils at some point, but for now seems fine.

devversion · 2022-05-17T19:16:13Z

.bazelignore

@@ -9,6 +9,9 @@ integration/ng-update-v13/node_modules
 integration/ng-add/.angular
 integration/ng-add/node_modules

+integration/ng-add-standalone/.angular
+integration/ng-add-standalone/node_modules
+


Thx for adding it here!

…4931) Adds code to handle apps that are bootstrapped through `bootstrapApplication` instead of `bootstrapModule`. (cherry picked from commit fc35e2b)

… private export for Angular components The standalone component helper utilities introduced into the `@angular/cdk` via angular/components#24931 have been added to an export path (`private/components`) within `@schematics/angular`. The export path is primarily intended for the use of the components schematics within `@angular/cdk` and `@angular/material`. The API exported from this path is not considered public API, does not provide SemVer guarantees, and may be modified or removed without a deprecation cycle.

… private export for Angular components The standalone component helper utilities introduced into the `@angular/cdk` via angular/components#24931 have been added to an export path (`private/components`) within `@schematics/angular`. The export path is primarily intended for the use of the components schematics within `@angular/cdk` and `@angular/material`. The API exported from this path is not considered public API, does not provide SemVer guarantees, and may be modified or removed without a deprecation cycle. (cherry picked from commit e895fc7)

angular-automatic-lock-bot · 2022-06-19T00:04:12Z

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.}

fix(material/schematics): support standalone components in ng-add

c74413f

Adds code to handle apps that are bootstrapped through `bootstrapApplication` instead of `bootstrapModule`.

crisbeto force-pushed the schematics-standalone branch from c0cc4f6 to c74413f Compare May 17, 2022 18:29

crisbeto added P2 The issue is important to a large percentage of users, with a workaround merge safe target: rc This PR is targeted for the next release-candidate labels May 17, 2022

crisbeto marked this pull request as ready for review May 17, 2022 18:42

crisbeto requested review from a team, andrewseguin and devversion as code owners May 17, 2022 18:42

AndrewKushnir reviewed May 17, 2022

View reviewed changes

crisbeto mentioned this pull request May 17, 2022

fix(material/tabs): ensure the ink bar realigns when the tab header changes dimensions #24885

Merged

AndrewKushnir reviewed May 18, 2022

View reviewed changes

pkozlowski-opensource reviewed May 18, 2022

View reviewed changes

devversion approved these changes May 19, 2022

View reviewed changes

crisbeto added the action: merge The PR is ready for merge by the caretaker label May 19, 2022

crisbeto merged commit fc35e2b into angular:main May 19, 2022

clydin mentioned this pull request May 25, 2022

refactor(@schematics/angular): move standalone component helpers to a private export for Angular components angular/angular-cli#23217

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(material/schematics): support standalone components in ng-add #24931

fix(material/schematics): support standalone components in ng-add #24931

crisbeto commented May 17, 2022

AndrewKushnir May 17, 2022

AndrewKushnir May 18, 2022

crisbeto May 18, 2022

pkozlowski-opensource May 18, 2022

crisbeto May 18, 2022

pkozlowski-opensource May 18, 2022

crisbeto May 18, 2022

devversion May 19, 2022

devversion May 17, 2022

angular-automatic-lock-bot bot commented Jun 19, 2022

	`because "${noopAnimationsModuleName}" is already imported.`,
	`because "${noopAnimationsModuleName}" is already imported into ` +
	`the "${...}" NgModule.`,

fix(material/schematics): support standalone components in ng-add #24931

fix(material/schematics): support standalone components in ng-add #24931

Conversation

crisbeto commented May 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Jun 19, 2022