Generated angular.json file does not correctly lower case the application name

[DeborahK]

🐞 Bug report

Command (mark with an x)

• [x ] new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

I'm not certain whether this is a regression. I don't recall seeing the issue. No one had reported it to me previously. But that doesn't mean it didn't exist.

Description

When you create a new Angular project using ng new with an upper case or mixed case name, the Angular CLI correctly converts the name to lower case for the keys in the package.json file. It does not convert the name to lower case for the keys in the angular.json file. See the "Minimal Reproduction" for screen shots.

🔬 Minimal Reproduction

ng new Hello-World

Resulting package.json file correctly lower cases the project name:

Resulting angular.json file does not lower case the project name, resulting in an error (see below):

Notice the resulting error:

🔥 Exception or Error

Property Hello-World is not allowed

🌍 Your Environment

Angular CLI: 9.1.3
Node: 12.16.1
OS: win32 x64

Angular: 9.1.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@angular/cli                      9.1.3
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

[mgechev]

Two alternatives for more consistent behavior would be:

1. Error on invalid characters which do not match the JSON schema regex
2. Transform both - the project name and the package name to lower case

The second alternative would be more implicit, but also less surprising for folks used to the partial name transform we do right now only for the package name.

[DeborahK]

Thank you.

I'd like to see #2 as it is more friendly for beginners and for those used to being able to use mixed case project names as they can now.

[karthick-manoharan]

I am claiming this issue. I have started to work on the fix.

[vltansky]

I may be wrong, as I'm not familiar with how angular-cli work under the hood, but if angular uses project name for file structure - lower casing it could lead to bugs.

For example this one: Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical see more on StackOverflow.

example:

And by the way a question, @mgechev, although @karthick-manoharan claimed this issue, I was curious to take a look on the angular-cli source code and for now, I event couldn't figure out where the angular.json file generation happens. I succeded to npm link (global) angular-cli, but I have a feeling that I need angular-devkit/core, am I right? Can you give a tip/direction?

[karthick-manoharan]

@vltansky The fix will be applicable only to the workspace name occurrences in angular.json file. I couldn't relate the StackOverflow issue to this fix. Kindly correct me if i am missing any of your ideas.

My perception is the files under packages/schematics/angular are responsible for angular.json file generation. I have currently applied my changes there and figuring out a way to test it locally.

[Splaktar]

• .angular.json template
• Workspace options applied to the template

The application schematic adds the project to the workspace using options.name

angular-cli/packages/schematics/angular/application/index.ts

Lines 290 to 294 in 1d2e7bb

	workspace.projects.add({
	name: options.name,
	...project,
	});
	});

There's a validateProjectName() function, but it doesn't change the name.

You may want to apply the appropriate string transform function to options.name just after validateProjectName() is called in the default function since options.name feeds into so many other configurations.

[karthick-manoharan]

@Splaktar Thank you for the pointers. I am leveraging strings.dasherize() method to transform options.name as lower casing the name wont be sufficed as camelcase is not supported as well.
This will match the name as same as in package.json.

In addition to the change in schematics/angular/application/index.ts i was validating if the name transformation needs to be applied for the corresponding individual rules ng-new, app-shell etc. Which i have not found the answers why i should not make the changes in rules.

[Splaktar]

@karthick-manoharan I can't think of a reason why any of the other schematics would need to be changed in general. The only other schematic that should create a project is the library schematic. Have you tested if that accepts the invalid format?

If you have some other lines of code where you think the name might need to be transformed, feel free to post them here along with your reasoning.