Error when trying to run my Angular Schematics

Question

When running schematics .:schema from the root folder of my project, I get the following error:

An error occured:
Error: Cannot find module '/Users/pete/Desktop/projects/Angular/DEV/SchematicsDemo/src/my-component/index'
Require stack:
- /usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/tools/index.js
- /usr/local/lib/node_modules/@angular-devkit/schematics-cli/bin/schematics.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at new ExportStringRef (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/tools/export-ref.js:16:32)
    at NodeModulesEngineHost._resolveReferenceString (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:95:21)
    at NodeModulesEngineHost.createSchematicDescription (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:174:34)
    at SchematicEngine.createSchematic (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/engine/engine.js:215:38)
    at CollectionImpl.createSchematic (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/engine/engine.js:70:29)
    at NodeWorkflow.execute (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/node_modules/@angular-devkit/schematics/src/workflow/base.js:105:38)
    at main (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/bin/schematics.js:229:24)
    at Object.<anonymous> (/usr/local/lib/node_modules/@angular-devkit/schematics-cli/bin/schematics.js:336:5)

I am following the tutorial from this youtube video https://www.youtube.com/watch?v=M5YSPas3qFo&t=1707s and he receives the same error on his first attempt at 32:30.

To fix it, he runs npm run build:watch but I receive this error when trying to do the same

npm ERR! missing script: build:watch

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pete/.npm/_logs/2020-12-26T17_18_10_036Z-debug.log

Here is my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "SchematicsDemo": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/SchematicsDemo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "SchematicsDemo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "SchematicsDemo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "SchematicsDemo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "SchematicsDemo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "SchematicsDemo:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "SchematicsDemo"
}

Not sure how to fix this issue, any help would be greatly appreciated!

Does the file in that exact path exist? You could try to use different than index file name (and adjust collection.json to reflect that change) as index is sometimes resolved in weird ways based on module resolution settings. — tomastrajan, Dec 27 '20 at 13:12

score 1 · Answer 1 · answered Dec 26 '20 at 17:49

1

This issue is already logged in github, you can keep eye on the same using #12230.

But till then it is resolved, you can use below work around you have to tweak angular.json a bit

Change

projects.YOUR-APP-NAME.targets

To

projects.YOUR-APP-NAME.architect

answered Dec 26 '20 at 17:49

Kavinda Senarathne

1,813
13
15

I do not see anything like this in my `angular.json` file... I will add the file to the original post. – petehodl Dec 26 '20 at 19:01
Looks like there is already "architect" property in the angular.json as provided in the question. – tomastrajan Dec 27 '20 at 13:10

Error when trying to run my Angular Schematics

1 Answers1