Angular-cli: ng generate component --module doesn't support module names properly

[shadowmint]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

$ ng version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.5
node: 8.2.1
os: win32 x64
@angular/animations: 4.4.4
@angular/cli: 1.4.5
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

Repro steps.

$ ng new
...

$ ng generate module TestMod
  create src/app/test-mod/test-mod.module.ts (191 bytes)

$ ng generate component TestComp --module test-mod.module.ts
Error: Specified module does not exist
Specified module does not exist

The log given by the failure.

Error: Specified module does not exist

Desired functionality.

Support a meaningful parameter value; either a path to a file, or a module name.
ie. One of:

ng generate component Foo --module FooBar
ng generate component Foo --module ./src/app/foo-bar/foo-bar.module.ts

Mention any other details that might be useful.

Previously this worked (1.3.x): ng generate component Foo --module Bar, (although ng generate component Foo --module FooBar never did).

However, the wiki (https://github.com/angular/angular-cli/wiki/generate-component) now suggests:

ng generate component Foo --module bar.module.ts

...but that doesn't work either.

By adding a console log to node_modules/@schematics/angular/utility/find-module.js to log the base path, you can see it failing to find the correct path:

$  ng generate component FooBarOne --module FooBar
Attempting to resolve using base path: /src/app/FooBar
Error: Specified module does not exist
Specified module does not exist

$ ng generate component FooBarOne --module ./src/app/foo-bar/foo-bar.module.ts
Attempting to resolve using base path: /src/app/src/app/foo-bar/foo-bar.module.ts
Error: Specified module does not exist
Specified module does not exist

$ ng generate component FooBarOne --module foo-bar.module.ts
Attempting to resolve using base path: /src/app/foo-bar.module.ts
Error: Specified module does not exist
Specified module does not exist

In fact, it turns out the 'correct' invocation is:

$ ng generate component FooBarOne --module ./foo-bar/foo-bar.module.ts
Attempting to resolve using base path: /src/app/foo-bar/foo-bar.module.ts
  create src/app/foo-bar-one/foo-bar-one.component.html (30 bytes)
  create src/app/foo-bar-one/foo-bar-one.component.spec.ts (651 bytes)
  create src/app/foo-bar-one/foo-bar-one.component.ts (302 bytes)
  create src/app/foo-bar-one/foo-bar-one.component.scss (0 bytes)

This both changes the previous behaviour and contradicts the wiki, so although I can vaguely see how this might be some kind of 'intended' behaviour (automatically resolve the src path), it seems like a regression to me.

[AhsanAyaz]

Hi @shadowmint
I guess there's an issue with usual interpretation of the WIKI .
It says :

Allows specification of the declaring module's file name (e.g `app.module.ts`).

Since app.module.ts is inside the app folder, that makes total sense.
For any subfolders, you'd have to specify the whole path (relative to app folder).

E.g. for profile/profile-info/profile-info.module.ts, you'd have to specify the whole path. (relative to app folder)

I'll try to update the wiki, also I'll try to make these work also,

• ng generate component FooBarOne --module FooBar considering we have foo-bar.module.ts at app folder.
• ng generate component FooBarOne --module ./extra-module/ExtraModule considering path relative to app folder

[hansl]

As @AhsanAyaz commented, you need to specify the subfolder for the module. This is because the logic is:

1. take the component creation folder (in your case src/app/foo-bar-one)
2. go up to the parent folder, as long as we don't see the module name (including a folder if there's one).

The correct invocation is indeed ng generate component FooBarOne --module foo-bar/foo-bar.module.ts.

We could support asking the module directly, by path, from the command line. That's a feature we'll consider.

Thanks. Closing this as wprking as intended for now.

[shadowmint]

Obviously if the logic in code is 'take the component folder and look for the module there', then the correct invocation on the command line as you've described... but we both already know that.

I lodged this issue not because I didn't know how to invoke it; but because:

• That's weird. If you're looking for a module in the parent folder, why does it generate the module in its own folder? It's inconsistent.

• It used to work.

So... you can describe this as 'working as intended' if you like, and if so, please at least just update the wiki here to reflect that: https://github.com/angular/angular-cli/wiki/generate-component

However, I ask this: Why did it used to work, if its now working as intended?

You're saying this isn't a regression?

You're simply saying; it does what it does, and that's what we want it to do, because that's what it currently does; but you changed what it does, that's why I lodge this issue.

I'm pretty much 100% certain this is a regression introduced when you migrated the generation code to using schematics, but it's your tool.

At the very least please update the wiki.

[maccurt]

Sorry, this is confusing at best. I finally got it work, only because I came across this thread. The trick for me was to remember it is relative to the app folder..

[Vandivier]

Here's another way the issue manifests. Is this working as expected?

Does Angular CLI support renaming modules? It appears not.

At least we need to be clear about how [name] is derived for ng generate in the docs. It does indeed seem to be the "component creation folder" as hansl notes, but it appears to be non-updateable after creation time.

[Subhojit1992]

I just do this
ng g c components/search --module search
my module name was search.module.ts and exported class was
export class SearchModule { }
this is work like a charm

[simeyla]

It's not the docs that need fixing as a priority - it is the error message:

Specified module does not exist

This is very unhelpful. We're in an interactive console - so error messages should be as informative as possible. Should be something like :

 Specified module could not be found in project root. 
 Please specify a fully qualified path to your module.ts file eg. -m modules/AdminModule

[MeltdownInteractive]

Even better, let us just specify the module name, and the CLI does all the plumbing for us instead of having to input path locations and what not.

[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._}