question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

schematics ng-add run as externalSchematic throws error "TypeError: Cannot read property 'projectType' of undefined" because projects in angular.json are not read

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I am trying to run the ng-add schematic in one of my schematics:

externalSchematic('@ngneat/transloco', 'ng-add', {
  // passing my config here...
        langs: languages.join(', '),
        path: 'assets/',
      }),

When I run it, I get the following error:

TypeError: Cannot read property 'projectType' of undefined
    at /Users/laurens/git/sandbox/node_modules/@ngneat/transloco/schematics/ng-add/index.js:91:31

So, this line is failing: https://github.com/ngneat/transloco/blob/master/schematics/src/ng-add/index.ts#L122 Because there are no projects found: https://github.com/ngneat/transloco/blob/master/schematics/src/utils/projects.ts#L31 If I put a console.log(config) here, I do indeed see the projects are missing: https://github.com/ngneat/transloco/blob/master/schematics/src/utils/projects.ts#L18

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 2,
	"newProjectRoot": "projects",
	"projects": {},
	"defaultProject": "sandbox"
}

However, my angular.json has projects, it’s just a default config generated by the CLI:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/sandbox",
            "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.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "sandbox:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "sandbox:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "sandbox:build"
          }
        },
        "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": "sandbox:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "sandbox:serve:production"
            }
          }
        },
        "cypress-run": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "sandbox:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "sandbox:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "sandbox:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "sandbox:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "sandbox"
}

Why does it not read out the projects?

Expected behavior

I expect it to run the ng-add schematic

Minimal reproduction of the problem with instructions

See above description. Simply run the @ngneat/transloco:ng-add schematic using the externalSchematic command in a custom schematic, in an Angular app.

What is the motivation / use case for changing the behavior?

Running the Transloco schematic from schematics.

Environment


Angular version: 9.1.7
 
For Tooling issues:
- Node version: 12.16.3
- Platform: Mac

Others:
    "@angular-devkit/build-angular": "~0.901.6",
    "@angular-devkit/schematics": "^9.1.7",
    "@schematics/angular": "^9.1.7",

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9

github_iconTop GitHub Comments

19reactions
BruneXXcommented, Aug 10, 2022

Found a solution, something similar sometimes happens for components generation and you need to set the project using --project={your-project-name}

So the full solution will be: ng add @ngneat/transloco --project={your-project-name}

5reactions
tarleppcommented, Jul 27, 2022

I’m having this same issue and in my angular.json I have defined that projectType what should I do?

node@node:/app$ ng add @ngneat/transloco
ℹ Using package manager: yarn
✔ Found compatible package version: @ngneat/transloco@4.1.1.
✔ Package information loaded.

The package @ngneat/transloco@4.1.1 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? 🌍 Which languages do you need? en, fi
? 🚀 Are you working with server side rendering? No
Cannot read properties of undefined (reading 'projectType')
node@node:/app$ 

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

typescript - Angular schematics error when using external ...
I finally find a solution, yo have to use it as an ng command. I changed new-project to ng-new and i used it...
Read more >
Schematics for libraries - Angular
In your library project's package.json file, add a "schematics" entry with the path to your schema file. The Angular CLI uses this entry...
Read more >
cannot read properties of undefined (reading 'map') in angular
I'm trying to use the eslint command on my angular project in the terminal to check a typescript component for errors. I'm getting...
Read more >
@angular-devkit/schematics SchematicContext TypeScript ...
This page shows TypeScript code examples of @angular-devkit/schematics ... (buffer === null) { throw new SchematicsException(`Could not read .gitignore`); } ...
Read more >
Extend Angular Schematics to customize your development ...
I think every Angular developer uses Angular Schematics, at least when creating components or services, but if you are not familiar with this ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found