Naming restriction for new projects is more restrictive than error indicates

[judepoole]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Ubuntu Linux

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.24
node: 6.6.0
os: linux x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

try to create a app named alpha-bravo-2

The log given by the failure.

Normally this include a stack trace and some more information.

project name "alpha-bravo-2" is not valid. New project names must start with a letter, and must contain only alphanumeric characters or dashes.

Mention any other details that might be useful.

Regular expression checking name of project is more restrictive than the error message indicates. It actually requires than any part of the name following a dash (-) must itself start with an alpha character, not just the initial character for the whole name.

---

Thanks! We'll be in touch soon.

[beeman]

@judepoole thanks for creating this issue. You are right, the error message is not detailed enough, I've added a patch to address this.

[zsfarkas]

Can somebody explain, what is the reason of this restriction?

[beeman]

@zsfarkas as far as I understand the main reason for this is that there are class names that are derived from the project name, and class names must start with [a-zA-Z].

So if you would create an app with ng new 1-two it would try and generate the module 1TwoModule which leads to an invalid class name.

[zsfarkas]

@beeman Thank you. I think there is no generated class with the project name. Instead of, the selector of the root component is generated by the project name. And html tags like <1-two></1-two> are not allowed.

It is kind of sad, but reasonable.

[beeman]

@zsfarkas you are right, it's the selector, not a class.

That selector is (afaik) only controlled by the --prefix parameter. If that's the case it might make sense to move this check to the prefix option, not to the app name.

Because when you run ng new my-app-name the root component will be called app-root, so it might be possible to move this check to the prefix.

[zsfarkas]

@beeman Thank you. It must be a small change. May I try to solve that? Is there a guide, how to contribute?

[Dorus]

I'm adding this for future reference for anyone running into this problem.

I read in a guide i should use {kebab-cased-app-name-here}. Now obvious the { and } should be left out when you replace it by your own app name.

Btw, the error message is not very clear still, it points at the wrong invalid charcher.

Project name "{my-test-app}" is not valid. New project names must start with a letter, and
must contain only alphanumeric characters or dashes. When adding a dash the segment after
the dash must also start with a letter.
{my-test-app}
    ^

A few more examples:

{my-something-app}
         ^

{my-some-app}
    ^

{mymy-test-app}
    ^

These do work correctly:

{some-app}
^

{some-thingapp}
^

These last 2 made me realize my mistake :)

Also, to find out where the name fails, you could use this regex: $[a-z]\w*(-[a-z]\w*)*, this will match the correct part of the string, so if this matches 0 characters, the first character failed. If this matched 6 characters, the 7th failed etc.

[chrillewoodz]

We have an existing scope that's @21kso but when trying to generate a library with this scope you can't. Which means we must change the scope entirely, which will break all of our apps and force us to rewrite A LOT of things. Is there really no way to port the existing scope to a CLI environment?.. @beeman

[beeman]

@chrillewoodz I'm not sure, but i think the issue is that identifiers in JavaScript (and thus TypeScript) can't start with an integer.

What I would try is generated it with a dummy name and then run a search/replace on my codebase to rename the dummy name to the desired name, and see where it breaks.

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