bug(Material): "Project name is required" or 'Path "undefined" does not exist' errors when installing @angular/material

[alaindeurveilher]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a project which contains several projects, Angular 17, created with:

• ng new ng-mfe-app-starter --create-application false --package-manager yarn

I added some projects in it:

• ng g app shell --style scss --ssr false
• ng g app mfe1 --style scss --ssr false

Now I want to install @angular/material, so I first tried:

• ng add @angular/material@latest

But I get the following error message in the end:

✔ Packages installed successfully.
Project name is required.

"Project name is required" is displayed in red in the terminal.

So I tried like so:

• ng add @angular/material@latest --project mfe1

But I get the following error message in the end:

✔ Packages installed successfully.
Path "undefined" does not exist.

"Path "undefined" does not exist" is displayed in red in the terminal.

I don't know what could be wrong and what is missing, I would like some help to understand how to properly install Angular Material in such a project.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Angular Material is installed and configured without any error.

Actual Behavior

An error message is displayed after installing angular material, no configuration file is generated

Environment

• Angular: 17.2.0
• CDK/Material: 17.2.1
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

I just tried the steps from the issue description and it worked fine. It's hard to tell what might be going on, but my best guess is that you may have an older version of the CLI installed globally. You can check your global version by cding to a non-CLI directory and running ng version.

Here's the full log from my local run:

~/Projects ng new ng-mfe-app-starter --create-application false --package-manager yarn
CREATE ng-mfe-app-starter/README.md (1069 bytes)
CREATE ng-mfe-app-starter/.editorconfig (274 bytes)
CREATE ng-mfe-app-starter/.gitignore (548 bytes)
CREATE ng-mfe-app-starter/angular.json (184 bytes)
CREATE ng-mfe-app-starter/package.json (1001 bytes)
CREATE ng-mfe-app-starter/tsconfig.json (903 bytes)
CREATE ng-mfe-app-starter/.vscode/extensions.json (130 bytes)
CREATE ng-mfe-app-starter/.vscode/launch.json (470 bytes)
CREATE ng-mfe-app-starter/.vscode/tasks.json (938 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
~/Projects cd ng-mfe-app-starter/
~/Projects/ng-mfe-app-starter [main] ng g app shell --style scss --ssr false
CREATE projects/shell/src/app/app.component.scss (0 bytes)
CREATE projects/shell/src/app/app.component.html (19903 bytes)
CREATE projects/shell/src/app/app.component.spec.ts (913 bytes)
CREATE projects/shell/src/app/app.component.ts (302 bytes)
CREATE projects/shell/src/main.ts (250 bytes)
CREATE projects/shell/src/app/app.config.ts (227 bytes)
CREATE projects/shell/src/app/app.routes.ts (77 bytes)
CREATE projects/shell/tsconfig.app.json (271 bytes)
CREATE projects/shell/tsconfig.spec.json (281 bytes)
CREATE projects/shell/src/favicon.ico (15086 bytes)
CREATE projects/shell/src/index.html (291 bytes)
CREATE projects/shell/src/styles.scss (80 bytes)
CREATE projects/shell/src/assets/.gitkeep (0 bytes)
UPDATE angular.json (2985 bytes)
UPDATE package.json (1049 bytes)
✔ Packages installed successfully.
~/Projects/ng-mfe-app-starter [main] ng g app mfe1 --style scss --ssr false
CREATE projects/mfe1/src/app/app.component.scss (0 bytes)
CREATE projects/mfe1/src/app/app.component.html (19903 bytes)
CREATE projects/mfe1/src/app/app.component.spec.ts (910 bytes)
CREATE projects/mfe1/src/app/app.component.ts (301 bytes)
CREATE projects/mfe1/src/main.ts (250 bytes)
CREATE projects/mfe1/src/app/app.config.ts (227 bytes)
CREATE projects/mfe1/src/app/app.routes.ts (77 bytes)
CREATE projects/mfe1/tsconfig.app.json (271 bytes)
CREATE projects/mfe1/tsconfig.spec.json (281 bytes)
CREATE projects/mfe1/src/favicon.ico (15086 bytes)
CREATE projects/mfe1/src/index.html (290 bytes)
CREATE projects/mfe1/src/styles.scss (80 bytes)
CREATE projects/mfe1/src/assets/.gitkeep (0 bytes)
UPDATE angular.json (5770 bytes)
✔ Packages installed successfully.
~/Projects/ng-mfe-app-starter [main] ng add @angular/material@latest --project mfe1
ℹ Using package manager: yarn
✔ Package information loaded.

The package @angular/material@latest will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1115 bytes)
✔ Packages installed successfully.
UPDATE projects/mfe1/src/app/app.config.ts (338 bytes)
UPDATE angular.json (5904 bytes)
UPDATE projects/mfe1/src/index.html (513 bytes)
UPDATE projects/mfe1/src/styles.scss (181 bytes)

[alaindeurveilher]

Hi, actually, I understood why, it's because in my project, prior to install @angular/material, I installed and set up Native Federation on each of the projects.
In that case, the setup of Material fails, probably because Native Federation modifies the angular.json and the main.ts file in each project.
Example of project set up before installing angular Material:
https://github.com/alaindeurveilher/ng-mfe-app-starter/tree/starter-routing

(for instance, the content of main.ts is moved to bootstrap.ts, and the architecture in the angular.json is arranged differently).

So I don't know who's responsibility it is then to handle the use case, @angular or @angular-architects.

In the meantime, I had to configure everything manually:
(https://github.com/alaindeurveilher/ng-mfe-app-starter/tree/with-material?tab=readme-ov-file#adding-angular-material)

• update the app.config.ts file manually to add the provider for animations
• update the index.html file manually to add the stylesheet references and the typography
• update the styles.scss manually too
• update the angular.json manually to add the used theme .scss

[crisbeto]

Looks like the problem was that the CLI utility we use to include the animations module wasn’t able to find the main module and was throwing an error. I’ve sent a fix so the process isn’t interrupted, but you can also work around it by selecting that animations should not be added.