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
– tomastrajan, Commented Dec 27, 2020 at 13:12

Kavinda Senarathne · Accepted Answer · 2020-12-26 17:49:49Z

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, 2020 at 17:49

Kavinda Senarathne

2,02015 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

petehodl Over a year ago

I do not see anything like this in my angular.json file... I will add the file to the original post.

tomastrajan Over a year ago

Looks like there is already "architect" property in the angular.json as provided in the question.

Collectives™ on Stack Overflow

Error when trying to run my Angular Schematics

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related