Angular-cli: 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
https://github.com/angular/angular-cli/blob/1d2e7bba07e1477fe3a551314ab93ad7aaa63420/packages/schematics/angular/application/index.ts#L290-L294

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.

[krishnaanaril]

@kyliau @karthick-manoharan How can I help?

[Randle-Lanre]

using the current version of angular at the time of posting this, there is no fix for the bug ?

[Splaktar]

There is no fix for the bug ?

I haven't seen any PR for this yet. There's not one linked to this issue.

[SchnWalter]

Somebody has created this somewhat related PR a few hours ago: https://github.com/angular/angular-cli/pull/17949

[Jefiozie]

Is anybody working on this? Would love to try and make a PR for this. As I understand the issue correct we should lowercase the name within the angular.json and package.json.

[Splaktar]

Is anybody working on this? Would love to try and make a PR for this. As I understand the issue correct we should lowercase the name within the angular.json and package.json.

@Jefiozie I don't believe so. https://github.com/angular/angular-cli/issues/17579#issuecomment-622503192 and the following comment cover those details (it's not just calling .toLowercase() 😁 ).

[alan-agius4]

Hi all,

Hello-World is a perfectly valid project name. The problem here is that the schema used by the IDE is not accounting for this. https://github.com/angular/angular-cli/blob/a98c71dbf241499532c49216795c13d40c92015b/packages/angular/cli/lib/config/schema.json#L30

The above schema also doesn't account for other valid project names such as @foo/bar.

The above doesn't match the actual RegExp used to valid project names https://github.com/angular/angular-cli/blob/a98c71dbf241499532c49216795c13d40c92015b/packages/schematics/angular/utility/validation.ts#L33

Also there seems to be a misalignment between the library and application schematic, where the library folder is always dasherized, while in the application it's not.

ng g lib fooBar
CREATE projects/foo-bar/README.md (996 bytes)
...

ng g app fooBox
CREATE projects/fooBox/.browserslistrc (853 bytes)
...

[Jefiozie]

Hi @alan-agius4

Thank you for showing us these points of misalignment, I have done some changes already locally to the code and made the same conclusion as you. What would you advise as the best approach for solving this issue?

Personally I never use a - in my names and just use fooBox for my package names and project names. However, if we change this behavior from project name it would (maybe) be a breaking change for the people that use a dash in the project name?

[alan-agius4]

@Jefiozie, project names are valid both in camel case or kebeb case. Therefore we'd need to update the above mention RegeExp.

When it comes to project directories, I am inclined towards always dasherizing the project folder name to align with other schematics where the folder name is always dasherized, that being said It's not a biggy, as long as the schema validation is fixed.

ng g c myCool
CREATE src/app/my-cool/my-cool.component.scss (0 bytes)
CREATE src/app/my-cool/my-cool.component.html (22 bytes)
CREATE src/app/my-cool/my-cool.component.spec.ts (627 bytes)
CREATE src/app/my-cool/my-cool.component.ts (279 bytes)
UPDATE src/app/app.module.ts (474 bytes)

Personally I never use a - in my names and just use fooBox for my package names and project names

This is so also personal preference, I always use kebab casing when it comes to file and directory naming.

[angular-automatic-lock-bot[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._}