monoreponrwl-nxangular-devkit

Nx custom schematic in repository not able to load


I setup a repo for a custom Nx builder and schematics to build an application / init. Initially I developed it in the tools/schematics folder and everything was working, but decided it should live in its own repo. I made sure to add the schematics (collection.json) and builders (builders.json) to the package.json, and setup the two files. Everything up to there seems to be working. I used yarn link to add the schematics to my nx monorepo (so I don't have to push it repeatedly while testing), and then try to add an app with nx g nx-name:app but I keep getting an error that it is unable to find the module for the schematic.

I have tried a lot before posting this. Renaming files. Using index.ts. Reinstalling node_modules. Re-linking in yarn.

Error:

Cannot find module 'C:\...\monorepo\node_modules\nx-name\src\schematics\application\application'
Require stack:
- C:\...\monorepo\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\...\monorepo\node_modules\@angular-devkit\schematics\tools\index.js
- C:\...\monorepo\node_modules\@nrwl\workspace\src\command-line\workspace-schematic.js
- C:\...\monorepo\node_modules\@nrwl\workspace\src\command-line\nx-commands.js
- C:\...\monorepo\node_modules\@nrwl\workspace\index.js
- C:\...\monorepo\node_modules\@nrwl\cli\lib\init-local.js
- C:\...\monorepo\node_modules\@nrwl\cli\bin\nx.js
- C:\...\AppData\Roaming\npm\node_modules\@nrwl\cli\bin\nx.js

My collection.json:

{
    "name": "nx-name",
    "version": "0.0.1",
    "extends": [
        "@nrwl/workspace"
    ],
    "schematics": {
        "init": {
            "factory": "./src/schematics/init/init",
            "schema": "./src/schematics/init/schema.json",
            "description": "Initialize the plugin",
            "aliases": [
                "ng-add"
            ],
            "hidden": true
        },
        "application": {
            "factory": "./src/schematics/application/application",
            "schema": "./src/schematics/application/schema.json",
            "description": "Create an application",
            "aliases": [
                "app"
            ]
        }
    }
}

My folder structure:

- src
    - builders
        - build
            - build.impl.ts
            - schema.json
    - schematics
        - application
            - files
                - a bunch of template files
            - application.ts
            - schema.d.ts
            - schema.json
        - init
            - init.ts
            - schema.d.ts
            - schema.json
- .gitignore
- builders.json
- collection.json
- package.json
- tsconfig.json
- index.ts
- yarn.lock

Update:

Pointing the collection factories to the dist folder seems to run it partially? JSON files update, but the builder doesn't run and generate files from the templates. Maybe there is something I need to setup so that it knows to build the typescript source?

Adding package.json deps:

"dependencies": {
    "@angular-devkit/architect": "^0.803.21",
    "@angular-devkit/core": "8.3.14",
    "@angular-devkit/schematics": "8.3.14",
    "shelljs": "^0.8.3",
    "typescript": "~3.5.3"
},
"devDependencies": {
    "@nrwl/workspace": "^8.9.0",
    "@types/node": "^13.1.4",
    "@types/shelljs": "^0.8.6"
}

Solution

  • Turns out I was outputting the typescript builds to a dist folder. Don't do that or it breaks all the paths for the collection.json and any files used for templates. Just build the js files in the same locations as the ts files.