ng g @nrwl/angular:application failing while running using externalSchematic on Windows machine

[sandeeppatidar30]

Current Behavior

ng g @nrwl/angular:application if i run it using externalSchematic.

Expected Behavior

It should not break the ng g @nrwl/angular:application

Steps to Reproduce

1. Create a custom generator
2. Run ng g @nrwl/angular:application using externalSchematics

import { chain, externalSchematic, mergeWith, Rule, SchematicContext, template, Tree,  url } from '@angular-devkit/schematics';
   export default function(schema: Schema): Rule {
     return (host: Tree, context: SchematicContext) => {
   
       return chain([
         externalSchematic('@nrwl/angular', 'application', {
           name: 'myapp'
         })
       ])(host, context);
     };
   }

3. After running above generator e.g. ng g @org/mylib:my-custom-generator

Failure Logs

[NX] Angular devkit called `writeWorkspace`, this may have had unintended consequences in angular.json
[NX] Double check angular.json before proceeding
Error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
   at findModule (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:81:11)
   at findModuleFromOptions (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:26:38)
   at C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\component\index.js:105:66
   at processTicksAndRejections (internal/process/task_queues.js:93:5)
Error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
   at findModule (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:81:11)
   at findModuleFromOptions (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:26:38)
odule.
   at findModule (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:81:11)
   at findModuleFromOptions (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:26:38)
   at C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\component\index.js:105:66
   at processTicksAndRejections (internal/process/task_queues.js:93:5)
Error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
   at findModule (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:81:11)
   at findModuleFromOptions (C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schematics\angular\utility\find-module.js:26:38)
   at C:\workspace\tooling\tooling-examples\556-check\ruf560test5\node_modules\@schem

Environment

@angular-devkit/architect v0.1301.2
@angular-devkit/build-angular v13.1.2
@angular-devkit/schematics v13.1.2
@nrwl/angular v13.3.11

[Coly010]

@sandeeppatidar30
Thanks for filing the issue!

I'm struggling to reproduce this locally. Would you be able to provide a minimal repo that I could clone that reproduces this error so I can investigate further?

[Coly010]

This has been sitting a while now with no update. I'm going to close this issue as a result.

If there is any new information, feel free to tag me :)

[sandeeppatidar30]

Hey @Coly010,

I'm sorry, I was busy in some work so could not update you.

Please find the attached repos to reproduce the issue.

I have attached 2 applications. First one is for "my-app" is my custom schematics application and second one "nrwl1350" is a Nrwl workspace created using nrwl v13.5.0.

Steps to setup the applications -

1. Run "npm install" in my-app application.
2. Run "npm install" in nrwl1350 application.
3. Run "npm run build" in my-app, which generates a "dist/myapp" directory.
4. Run "npm link <path-to/dist/myapp>" in nrwl1350 application.
5. Run "ng g @ruf/myapp:app" in nrwl1350 application.
6. Check the issue in console.

my-app.zip
nrwl1350.zip

[seadonk]

dup of nstudio/xplat#286?

[sandeeppatidar30]

i'm still facing this issue even with Nrwl v13.8.2 and @schematics/angular v13.2.3.

[habtim]

@Coly010 I can confirm same behaviour with Nrwl v13.8.1 and @angular-devkit v13.2.3
Running nx g app on the other hand does not result in this issue. 🤔

[sandeeppatidar30]

@habtim, Did you run nx g app using external schematics? I have created my own schemaitcs and internally i'm running nx g app using externalSchematic() and i'm getting this issue.

e.g.

import { chain, externalSchematic, mergeWith, Rule, SchematicContext, template, Tree,  url } from '@angular-devkit/schematics';
   export default function(schema: Schema): Rule {
     return (host: Tree, context: SchematicContext) => {
   
       return chain([
         externalSchematic('@nrwl/angular', 'application', {
           name: 'myapp'
         })
       ])(host, context);
     };
   }

In Nx i can see they are not using externalSchematics and instead of that Nx uses wrapAngularDevkitSchematic but that resulting some different issue like path.match is not a function.

import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
const angularAppSchematic = wrapAngularDevkitSchematic(
    '@nrwl/angular',
    'application'
  );
  await angularAppSchematic(host, { });

[habtim]

@sandeeppatidar30
No, running nx g app in terminal works.
I did experience same issue when running externalSchematics in a custom schematic.

[Coly010]

@sandeeppatidar30 After running your reproduction, I do get the warning about writeWorkspace, but I do not get any errors. The warning is fine. It's just to make you aware that you could break your application by using writeWorkspace if you're not careful. That is fine.

[habtim]

@Coly010 Could you verify this repo, by running nx workspace-generator application?
I dont get, why this error should not be reproduceable...

[sandeeppatidar30]

@Coly010,

I'm able to reproduce this issue with error logs Error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

Did you make any change to repo? It is a complete blocker for our application, we can not move ahead with this issue.

[Coly010]

@habtim
No error, just the warning.

test-habtim-repo.mp4

[Coly010]

@sandeeppatidar30
Didn't change the repo at all

sandeep-error.mp4

[sandeeppatidar30]

@Coly010,

May I know some details about your machine environment.

Node version -
Npm version -
OS -

[Coly010]

@sandeeppatidar30

Node version - 16.14.0
Npm version - 8.3.1
OS - macOS 12.1

[habtim]

Updated node to 16.14.0 and npm to 8.3.1
Updated global angular cli (to 13.8.1)
Deleted node_modules and ran npm cache clean --force

Still the same issue... Running on win10 btw

[sandeeppatidar30]

@Coly010,

I can confirm it works on macOS but fails on windows machine with error logs Error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

[Coly010]

Ah interesting. Ok, in that case, we'll need to do some further investigation. Some path mapping from UNIX-style to Windows-style must be borked.

[Quken]

Ah interesting. Ok, in that case, we'll need to do some further investigation. Some path mapping from UNIX-style to Windows-style must be borked.

@Coly010, I'm also faced with the same issue using Nrwl v13.8.1 on Windows 10 (on macOS, everything works fine). Are there any workarounds to fix this or any other thoughts?

[zjkipping]

I would also appreciate any thoughts on this (work arounds or fixes). This is the only thing stopping our monorepo from officially being on nx 13 / angular 13. We rely pretty heavily on schematics so this is a large deal breaker/issue and we would like to move to angular 13 and per project config structure in nx 13 as soon as possible.

[sandeeppatidar30]

@zjkipping, it works till NX v13.2.4 with Angular v13.1.x, so if you are planning for migration then you can still try with NX v13.2.4 till we get the fix.

[zjkipping]

@sandeeppatidar30 We have tried this upgrade three times. 13 then 13.2.x and now on latest 13.8.x. We have had issues spanning across cypress, jest, storybook, and eslint across those upgrades. This has been the first time everything has worked (with some minor fixes on our side) disregarding this issue with schematics for angular applications. So, we will probably stay put until a fix/work around is put through for this instead of backporting to a lesser version of everything.

[habtim]

@zjkipping Exactly the same situation for us. Dealing more than a month now with the angular/nrwl upgrade to get everything work together.
Glad to hear, that we are not the onlyone with that problem, though 😅

[Coly010]

I have a windows VM set up and ready to investigate this issue don't worry. I'll see what I can find that can help unblock you all! :)

[zjkipping]

@Coly010 Hey, not to bother you too much, but is there any status update on this issue? Would this be something that is fixed in a month? or the more immediate future?

[Coly010]

Still working on it. Not sure when a fix will land for this.

A workaround, which is admittedly more involved, but does work:

• Change your schematic/generator to use Nx Devkit rather than Angular Devkit.

The problem appears to be in the hand off to Angular Devkit, trying to narrow it down.

If you have a schematic like the following using the Angular Devkit

import { Rule, chain, externalSchematic } from '@angular-devkit/schematics';
import { Tree } from '@nrwl/devkit';

export default function createApp(_options: any) {
 return function (_tree: Tree, schema: any): Rule {
   return chain([
     externalSchematic('@nrwl/angular'. 'application', { name: _options.name })
   ]);
 };
}

Then you can convert it to Nx Devkit by doing the following

Update schema.json to add: "cli": "nx"

Update the generator to be

import { Tree } from '@nrwl/devkit';
import { applicationGenerator } from '@nrwl/angular/generators';

export default async function createApp(tree: Tree, _options: any) {
  await applicationGenerator(tree, _options);
}

[zjkipping]

This worked out very well for us! We ended up only rewriting the one schematic that uses the angular application generator. We ended up crafting some quick utility functions to map from Nx devkit's Tree type and Angular devkits Tree type for create/overwrite and write. Overall went smoothly and looking forward to rewriting the rest of our schematics over to using the nx devkit instead :)

[ennovum]

@Coly010 have you been able to find something here? Since this is a blocker for me right now, I've spend a couple of hours experimenting and found the following.

The Nx app generator calls Ng app generator and then Ng component generator to create the Nx sample/welcome component. The component generator throws an error because it can't find a module file where it can add itself. So the Tree object on Ng side does not seem to "see" the generated app's files. But the Tree object on Nx side seems to see it all.

If I remove the sample/welcome component creation from the Nx generator, the generator is able to finish it's run. Of course there are no component files in the result, but the app's files are all there. Including the module file (which Ng generator did not see).

It seems to me the problem lies in chronology. My suspect #1 now is wrapAngularDevkitSchematic implementation and how it translates Tree between Nx and Ng.

I must admit I'm losing hope I can find the solution this way, the codebase is new to me. Also I'm currently unable to build either Nx or Ng projects, so I'm literally playing around with transpiled files... I could use some help. @Coly010 do you think you could find some time to look into this once more?

[ennovum]

One more thing. I believe it broke between:

@nrwl/angular@13.2.4 @nrwl/workspace@13.2.4

and

@nrwl/angular@13.3.4 @nrwl/workspace@13.3.4

[leosvelperez]

This issue has been solved in #10113 and the fix was released in v14.1.0. Please make sure to migrate your workspace to that version or greater.

Also, as mentioned in #8253 (comment), please consider writing generators using the Nx DevKit, it provides a better developer experience.

I'm closing this. If you still have an issue after migrating, feel free to reopen this issue or create a new one.

[pliniodng]

Hey @leosvelperez, any chances this fix can be released on a patch version for NX 13? We have several repos running NX 13 with no bandwidth to migrate to 14, and this issue has been affecting several developers that are running windows.

[adam-marshall]

Just an extra note:

I was using wrapAngularDevkitSchematic('@nrwl/angular', 'library'); to generate an Angular library as part of my generator.

This started failing since upgrading to a Nx 14 version.

The warning is as in the original post, the error was

FileDoesNotExistException [Error]: Path "/libs/<path-to-lib>/.browserslistrc" does not exist.

Using libraryGenerator from '@nrwl/angular/generators' instead works, the library is generated successfully, but I still get the warnings:

[NX] Angular devkit called `writeWorkspace`, this may have had unintended consequences in workspace.json
[NX] Double check workspace.json before proceeding

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.