The Wayback Machine - https://web.archive.org/web/20200821225440/https://github.com/angular/angular-cli/issues/17579
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DeborahK opened this issue Apr 29, 2020 · 12 comments
Open

Comments

@DeborahK
Copy link
Contributor

@DeborahK DeborahK commented Apr 29, 2020

🐞 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:
image

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

Notice the resulting error:
image

🔥 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
Copy link
Member

@mgechev mgechev commented Apr 30, 2020

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
Copy link
Contributor Author

@DeborahK DeborahK commented Apr 30, 2020

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
Copy link

@karthick-manoharan karthick-manoharan commented Apr 30, 2020

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

@vltansky
Copy link
Contributor

@vltansky vltansky commented May 1, 2020

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:
image

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
Copy link

@karthick-manoharan karthick-manoharan commented May 1, 2020

@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
Copy link
Member

@Splaktar Splaktar commented May 1, 2020

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

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
Copy link

@karthick-manoharan karthick-manoharan commented May 1, 2020

@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
Copy link
Member

@Splaktar Splaktar commented May 1, 2020

@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
Copy link
Contributor

@krishnaanaril krishnaanaril commented Jun 4, 2020

@kyliau @karthick-manoharan How can I help?

@Randle-Lanre
Copy link

@Randle-Lanre Randle-Lanre commented Jun 14, 2020

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

@Splaktar
Copy link
Member

@Splaktar Splaktar commented Jun 16, 2020

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
Copy link
Contributor

@SchnWalter SchnWalter commented Jun 16, 2020

Somebody has created this somewhat related PR a few hours ago: #17949

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.