Infer path when outside app folder

[clabough]

Right-clicking on a folder outside the app folder is not inferring the path. For example, I have src/app and src/plugins. When I right-click on a folder within src/app like src/app/test, the path is inferred, but when I right-click on src/plugins, the path is not inferred and if I go ahead with creating a component, it creates it within src/app

Here's my startup info.

[Info - 10:40:13 AM] Angular Schematics extension has been activated.
[Info - 10:40:13 AM] 1 workspace folder(s) detected.
[Info - 10:40:13 AM] Loading configuration of "DERA.Presentation" workspace folder.
[Info - 10:40:13 AM] Loading Angular configuration.
[Info - 10:40:16 AM] Angular config file for "DERA.Presentation" workspace folder found at: /c:/Users/myaccount/source/repos/DERA/DERA.Presentation/angular.json
[Info - 10:40:16 AM] Your Angular project is not at the root of your "DERA.Presentation" workspace folder. Real path: /c:/Users/myaccount/source/repos/DERA/DERA.Presentation
[Info - 10:40:16 AM] Default schematics collection detected in your Angular config: @schematics/angular
[Info - 10:40:16 AM] 5 Angular project(s) detected.
[Info - 10:40:16 AM] "UI.Shell" Angular project is of type "application" and its path is: src/app.
[Info - 10:40:16 AM] Loading "UI.Shell" Angular project's lint configuration.
[Info - 10:40:16 AM] 0 custom component suffixe(s) detected in eslint config
[Info - 10:40:16 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:16 AM] "UI.Shell" project is the root Angular project.
[Info - 10:40:16 AM] "UI.Shell-local" Angular project is of type "application" and its path is: src/app.
[Info - 10:40:16 AM] Loading "UI.Shell-local" Angular project's lint configuration.
[Info - 10:40:17 AM] 0 custom component suffixe(s) detected in eslint config
[Info - 10:40:17 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:17 AM] "plugin-test" Angular project is of type "application" and its path is: src/app.
[Info - 10:40:17 AM] Loading "plugin-test" Angular project's lint configuration.
[Info - 10:40:17 AM] 0 custom component suffixe(s) detected in eslint config
[Info - 10:40:17 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:17 AM] "plugins" Angular project is of type "application" and its path is: src/plugins/app.
[Info - 10:40:17 AM] Loading "plugins" Angular project's lint configuration.
[Warning - 10:40:17 AM] No linter configuration found.
[Info - 10:40:17 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:17 AM] "storybook" Angular project is of type "application" and its path is: src/app.
[Info - 10:40:17 AM] Loading "storybook" Angular project's lint configuration.
[Info - 10:40:17 AM] 0 custom component suffixe(s) detected in eslint config
[Info - 10:40:17 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:17 AM] Loading global lint configuration.
[Info - 10:40:17 AM] 0 custom component suffixe(s) detected in eslint config
[Info - 10:40:17 AM] Loading schematics configuration.
[Info - 10:40:17 AM] Loading the list of schematics collections.
[Info - 10:40:17 AM] 0 user schematics collection(s) detected in Code preferences
[Info - 10:40:17 AM] 3 installed collection(s) detected: @schematics/angular, @angular/material, @angular/cdk
[Info - 10:40:17 AM] Loading "@schematics/angular" collection.
[Info - 10:40:17 AM] 20 schematic(s) detected for "@schematics/angular" collection: ng-new, workspace, service-worker, application, e2e, class, component, directive, enum, guard, resolver, interceptor, interface, module, pipe, service, universal, app-shell, library, web-worker
[Info - 10:40:17 AM] 16 filtered schematic(s) keeped for "@schematics/angular" collection: service-worker, application, class, component, directive, enum, guard, resolver, interceptor, interface, module, pipe, service, app-shell, library, web-worker
[Info - 10:40:17 AM] Loading "@schematics/angular:service-worker" schematic
[Info - 10:40:17 AM] 3 options detected for "service-worker" schematic: project, target, configuration
[Info - 10:40:17 AM] 0 required option(s) detected for "service-worker" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:application" schematic
[Info - 10:40:17 AM] 15 options detected for "application" schematic: projectRoot, name, inlineStyle, inlineTemplate, viewEncapsulation, routing, prefix, style, skipTests, skipPackageJson, minimal, skipInstall, lintFix, strict, legacyBrowsers
[Info - 10:40:17 AM] 0 required option(s) detected for "application" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:class" schematic
[Info - 10:40:17 AM] 6 options detected for "class" schematic: name, path, project, skipTests, type, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "class" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:component" schematic
[Info - 10:40:17 AM] 20 options detected for "component" schematic: path, project, name, displayBlock, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, type, skipTests, flat, skipImport, selector, skipSelector, module, export, entryComponent, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "component" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:directive" schematic
[Info - 10:40:17 AM] 11 options detected for "directive" schematic: name, path, project, prefix, skipTests, skipImport, selector, flat, module, export, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "directive" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:enum" schematic
[Info - 10:40:17 AM] 4 options detected for "enum" schematic: name, path, project, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "enum" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:guard" schematic
[Info - 10:40:17 AM] 7 options detected for "guard" schematic: name, skipTests, flat, path, project, lintFix, implements
[Info - 10:40:17 AM] 0 required option(s) detected for "guard" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:resolver" schematic
[Info - 10:40:17 AM] 5 options detected for "resolver" schematic: name, skipTests, flat, path, project
[Info - 10:40:17 AM] 0 required option(s) detected for "resolver" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:interceptor" schematic
[Info - 10:40:17 AM] 6 options detected for "interceptor" schematic: name, path, project, flat, skipTests, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "interceptor" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:interface" schematic
[Info - 10:40:17 AM] 6 options detected for "interface" schematic: name, path, project, prefix, type, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "interface" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:module" schematic
[Info - 10:40:17 AM] 10 options detected for "module" schematic: name, path, project, routing, routingScope, route, flat, commonModule, module, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "module" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:pipe" schematic
[Info - 10:40:17 AM] 9 options detected for "pipe" schematic: name, path, project, flat, skipTests, skipImport, module, export, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "pipe" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:service" schematic
[Info - 10:40:17 AM] 6 options detected for "service" schematic: name, path, project, flat, skipTests, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "service" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:app-shell" schematic
[Info - 10:40:17 AM] 7 options detected for "app-shell" schematic: clientProject, route, appId, main, appDir, rootModuleFileName, rootModuleClassName
[Info - 10:40:17 AM] 0 required option(s) detected for "app-shell" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:library" schematic
[Info - 10:40:17 AM] 7 options detected for "library" schematic: name, entryFile, prefix, skipPackageJson, skipInstall, skipTsConfig, lintFix
[Info - 10:40:17 AM] 0 required option(s) detected for "library" schematic
[Info - 10:40:17 AM] Loading "@schematics/angular:web-worker" schematic
[Info - 10:40:17 AM] 5 options detected for "web-worker" schematic: path, project, target, name, snippet
[Info - 10:40:17 AM] 0 required option(s) detected for "web-worker" schematic
[Info - 10:40:17 AM] Loading "@angular/material" collection.
[Info - 10:40:17 AM] 7 schematic(s) detected for "@angular/material" collection: ng-add, ng-add-setup-project, dashboard, table, navigation, tree, addressForm
[Info - 10:40:17 AM] 5 filtered schematic(s) keeped for "@angular/material" collection: dashboard, table, navigation, tree, addressForm
[Info - 10:40:17 AM] Loading "@angular/material:dashboard" schematic
[Info - 10:40:18 AM] 16 options detected for "dashboard" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent
[Info - 10:40:18 AM] 0 required option(s) detected for "dashboard" schematic
[Info - 10:40:18 AM] Loading "@angular/material:table" schematic
[Info - 10:40:18 AM] 16 options detected for "table" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent
[Info - 10:40:18 AM] 0 required option(s) detected for "table" schematic
[Info - 10:40:18 AM] Loading "@angular/material:navigation" schematic
[Info - 10:40:18 AM] 17 options detected for "navigation" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent, routing
[Info - 10:40:18 AM] 0 required option(s) detected for "navigation" schematic
[Info - 10:40:18 AM] Loading "@angular/material:tree" schematic
[Info - 10:40:18 AM] 16 options detected for "tree" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent
[Info - 10:40:18 AM] 0 required option(s) detected for "tree" schematic
[Info - 10:40:18 AM] Loading "@angular/material:addressForm" schematic
[Info - 10:40:18 AM] 16 options detected for "addressForm" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent
[Info - 10:40:18 AM] 0 required option(s) detected for "addressForm" schematic
[Info - 10:40:18 AM] Loading "@angular/cdk" collection.
[Info - 10:40:18 AM] 2 schematic(s) detected for "@angular/cdk" collection: ng-add, drag-drop
[Info - 10:40:18 AM] 1 filtered schematic(s) keeped for "@angular/cdk" collection: drag-drop
[Info - 10:40:18 AM] Loading "@angular/cdk:drag-drop" schematic
[Info - 10:40:18 AM] 16 options detected for "drag-drop" schematic: path, project, name, inlineStyle, inlineTemplate, viewEncapsulation, changeDetection, prefix, style, skipTests, flat, skipImport, selector, module, export, entryComponent
[Info - 10:40:18 AM] 0 required option(s) detected for "drag-drop" schematic
[Info - 10:40:18 AM] 0 custom component type(s) detected in the preferences.
[Info - 10:40:18 AM] Lazy-loaded module type: enabled
[Info - 10:40:18 AM] Configurations of all workspace folders are now ready. Duration: 4696ms.

[cyrilletuzi]

The extension matches Angular CLI behavior, so this is an expected behavior. Indeed, if you do directly ng g component src/plugins/demo with just Angular CLI, it will create a component in src/app/src/plugins.

Angular CLI (and so this extension) is based on angular.json configuration, where each project has a root and a sourceRoot properties to be able to know the paths.

This configuration is done automatically when using Angular CLI. The default project is src/app, but you can add more with ng g application (default path projects/xxx/src/app) or ng g library (default path projects/xxx/src/lib). The paths can be customized, but Angular CLI enforce that the last part is app for applications and lib for libraries.

So I suppose you should do ng g library plugins to have a proper configuration.

When the configuration is OK, the extension will detect the project automatically when right-clicking.

Moving this to Discussions as it's not an issue.

[cyrilletuzi]

Note that you can also just do an app/plugins folder. I know it's weird conceptually, but as explained it's the structure enforced by Angular CLI.

[clabough]

Interesting. Using the CLI with this command will put it in the plugins folder. Can the extension be updated to support it?

ng generate component test --path=src/plugins/paige/components --no-interactive

Note: I found the --path option by using the Nx Console extension.

This also works:

ng generate component ../plugins/paige/components/test --no-interactive

[cyrilletuzi]

The second solution sounds like a "hack", so it's not something that should be investigated.

The first option works but is not a normal usage. The path option is marked as visible: false in the official Angular CLI schematics (code here). It's also undocumented.

Can the extension be updated to support it?

Not sure it's a good idea to support non official behaviors, especially when it's already extremely tedious and complicated to manage all paths officially possible. The first question to answer is rather: what is the use case which requires to step aside from the Angular CLI normal behavior?

[clabough]

Yeah, it's a project that I just stepped into and there's too much architecture already in place to get approval to change it. I'll just use Nx Console instead for this project.

[pedroestabruxelles]

I develop a component library internally at the company I work for and got rid of the lib folder to have a flat structure (recommended from my understanding by ng-packagr).
Using the extension makes this a more complicated process because always generates on the wrong folder. (from your previous comments i figured adding "sourceRoot" helped to point to the correct folder) but it still adds /lib where I don't have this defined anywhere on the app.
I always generate and move the folder where I want it to be, which is very inconvenient.
Could you please add a way to configure this to behave properly?

[cyrilletuzi]

Hi @clabough and @pedroestabruxelles, just to let you know the latest version (v6) of the extension allows you to generate everywhere.

[pedroestabruxelles]

Yes it works now. Although components are created with .css extension its not taking into consideration the configuration on angular.json

[cyrilletuzi]

Indeed, this is explained in the changelog and the documentation. The extension has its own configuration now. Use the configuration helper, accessible from the Angular logo in the left sidebar or from View > Command Palelette > type "schematics" > "Angular Schematics: Configuration helper".

[pedroestabruxelles]

Looking good the latest improvements, thanks!