Lightrun
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.

Angular 12 migration fails when updating the ActivatedRouteSnapshot

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

I’ve been trying to upgrade my Angular 11 library to Angular 12. The error I’m receiving happens at the point where the migration is changing the ActivatedRouteSnapshot.fragment to nullable. The error I’m getting is

✖ Migration failed: Could not find any tsconfig file. Cannot migrate `ActivatedRouteSnapshot.fragment` accesses.

But i’ve checked and double checked and and I can confirm all my tsconfig.json paths in my angular.json file are correct. I’m hoping i’m just missing something simple.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "platform-components": {
      "projectType": "library",
      "root": "projects/platform-components",
      "sourceRoot": "projects/platform-components/src",
      "prefix": "package",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/platform-components/tsconfig.lib.json",
            "project": "projects/platform-components/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/platform-components/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/platform-components/src/test.ts",
            "tsConfig": "projects/platform-components/tsconfig.spec.json",
            "karmaConfig": "projects/platform-components/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/platform-components/.eslintrc.json",
            "lintFilePatterns": [
              "projects/platform-components/**/*.ts",
              "projects/platform-components/**/*.html"
            ],
            "tsConfig": [
              "projects/platform-components/tsconfig.lib.json",
              "projects/platform-components/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "app-header-footer": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "projects/app-header-footer",
      "sourceRoot": "projects/app-header-footer/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/platform-header",
            "index": "projects/app-header-footer/src/index.html",
            "main": "projects/app-header-footer/src/main.ts",
            "polyfills": "projects/app-header-footer/src/polyfills.ts",
            "tsConfig": "projects/app-header-footer/tsconfig.app.json",
            "assets": [
              "projects/app-header-footer/src/favicon.ico",
              "projects/app-header-footer/src/assets",
              {
                "glob": "**/!(*.scss)",
                "input": "projects/kds-assets",
                "output": "/assets"
              },
              {
                "glob": "**/*",
                "input": "node_modules/atom-components/assets/",
                "output": "/assets"
              }
            ],
            "styles": [
              "./node_modules/@progress/kendo-theme-material/dist/all.css",
              "./node_modules/atom-components/assets/fonts/fonts.css",
              "./node_modules/atom-components/assets/icons/icons.css",
              "projects/app-header-footer/src/styles.scss",
              "./node_modules/bootstrap/scss/bootstrap.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/app-header-footer/src/environments/environment.ts",
                  "with": "projects/app-header-footer/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            },
            "browserTarget": "app-header-footer:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app-header-footer:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app-header-footer:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/app-header-footer/src/test.ts",
            "polyfills": "projects/app-header-footer/src/polyfills.ts",
            "tsConfig": "projects/app-header-footer/tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["projects/app-header-footer/src/favicon.ico", "projects/app-header-footer/src/assets"],
            "styles": [
              "./node_modules/@progress/kendo-theme-material/dist/all.css",
              "projects/app-header-footer/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/app-header-footer/.eslintrc.json",
            "lintFilePatterns": ["projects/app-header-footer/**/*.ts", "projects/app-header-footer/**/*.html"],
            "tsConfig": [
              "projects/app-header-footer/tsconfig.app.json",
              "projects/app-header-footer/tsconfig.spec.json",
              "projects/app-header-footer/e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app-header-footer:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app-header-footer:serve:production"
            }
          }
        }
      }
    },
    "@package/platform-header-data": {
      "projectType": "library",
      "root": "projects/package/platform-header-data",
      "sourceRoot": "projects/package/platform-header-data/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/package/platform-header-data/tsconfig.lib.json",
            "project": "projects/package/platform-header-data/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/package/platform-header-data/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/package/platform-header-data/src/test.ts",
            "tsConfig": "projects/package/platform-header-data/tsconfig.spec.json",
            "karmaConfig": "projects/package/platform-header-data/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/package/platform-header-data/.eslintrc.json",
            "lintFilePatterns": [
              "projects/package/platform-header-data/**/*.ts",
              "projects/package/platform-header-data/**/*.html"
            ],
            "tsConfig": [
              "projects/package/platform-header-data/tsconfig.lib.json",
              "projects/package/platform-header-data/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "@package/platform-http-client": {
      "projectType": "library",
      "root": "projects/package/platform-http-client",
      "sourceRoot": "projects/package/platform-http-client/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/package/platform-http-client/tsconfig.lib.json",
            "project": "projects/package/platform-http-client/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/package/platform-http-client/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/package/platform-http-client/src/test.ts",
            "tsConfig": "projects/package/platform-http-client/tsconfig.spec.json",
            "karmaConfig": "projects/package/platform-http-client/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/package/platform-http-client/.eslintrc.json",
            "lintFilePatterns": [
              "projects/package/platform-http-client/**/*.ts",
              "projects/package/platform-http-client/**/*.html"
            ],
            "tsConfig": [
              "projects/package/platform-http-client/tsconfig.lib.json",
              "projects/package/platform-http-client/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "@package/platform-notifications-data": {
      "projectType": "library",
      "root": "projects/package/platform-notifications-data",
      "sourceRoot": "projects/package/platform-notifications-data/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/package/platform-notifications-data/tsconfig.lib.json",
            "project": "projects/package/platform-notifications-data/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/package/platform-notifications-data/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/package/platform-notifications-data/src/test.ts",
            "tsConfig": "projects/package/platform-notifications-data/tsconfig.spec.json",
            "karmaConfig": "projects/package/platform-notifications-data/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/package/platform-notifications-data/.eslintrc.json",
            "lintFilePatterns": [
              "projects/package/platform-notifications-data/**/*.ts",
              "projects/package/platform-notifications-data/**/*.html"
            ],
            "tsConfig": [
              "projects/package/platform-notifications-data/tsconfig.lib.json",
              "projects/package/platform-notifications-data/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "@package/lib-tenant-selector": {
      "projectType": "library",
      "root": "projects/package/lib-tenant-selector",
      "sourceRoot": "projects/package/lib-tenant-selector/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/package/lib-tenant-selector/tsconfig.lib.json",
            "project": "projects/package/lib-tenant-selector/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/package/lib-tenant-selector/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/package/lib-tenant-selector/src/test.ts",
            "tsConfig": "projects/package/lib-tenant-selector/tsconfig.spec.json",
            "karmaConfig": "projects/package/lib-tenant-selector/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/package/lib-tenant-selector/.eslintrc.json",
            "lintFilePatterns": [
              "projects/package/lib-tenant-selector/**/*.ts",
              "projects/package/lib-tenant-selector/**/*.html"
            ],
            "tsConfig": [
              "projects/package/lib-tenant-selector/tsconfig.lib.json",
              "projects/package/lib-tenant-selector/tsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "app-tenant-selector-host": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "projects/app-tenant-selector-host",
      "sourceRoot": "projects/app-tenant-selector-host/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app-tenant-selector-host",
            "index": "projects/app-tenant-selector-host/src/index.html",
            "main": "projects/app-tenant-selector-host/src/main.ts",
            "polyfills": "projects/app-tenant-selector-host/src/polyfills.ts",
            "tsConfig": "projects/app-tenant-selector-host/tsconfig.app.json",
            "assets": [
              "projects/app-tenant-selector-host/src/favicon.ico",
              "projects/app-tenant-selector-host/src/assets",
              {
                "glob": "**/!(*.scss)",
                "input": "projects/kds-assets",
                "output": "/assets"
              },
              {
                "glob": "**/*",
                "input": "node_modules/atom-components/assets/",
                "output": "/assets"
              }
            ],
            "styles": [
              "./node_modules/@progress/kendo-theme-material/dist/all.css",
              "./node_modules/atom-components/assets/fonts/fonts.css",
              "./node_modules/atom-components/assets/icons/icons.css",
              "projects/app-tenant-selector-host/src/styles.scss",
              "./node_modules/bootstrap/scss/bootstrap.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/app-tenant-selector-host/src/environments/environment.ts",
                  "with": "projects/app-tenant-selector-host/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app-tenant-selector-host:build",
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            }
          },
          "configurations": {
            "production": {
              "browserTarget": "app-tenant-selector-host:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app-tenant-selector-host:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/app-tenant-selector-host/src/test.ts",
            "polyfills": "projects/app-tenant-selector-host/src/polyfills.ts",
            "tsConfig": "projects/app-tenant-selector-host/tsconfig.spec.json",
            "karmaConfig": "projects/app-tenant-selector-host/karma.conf.js",
            "assets": [
              "projects/app-tenant-selector-host/src/favicon.ico",
              "projects/app-tenant-selector-host/src/assets"
            ],
            "styles": ["projects/app-tenant-selector-host/src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": "projects/app-tenant-selector-host/.eslintrc.json",
            "lintFilePatterns": [
              "projects/app-tenant-selector-host/**/*.ts",
              "projects/app-tenant-selector-host/**/*.html"
            ],
            "tsConfig": [
              "projects/app-tenant-selector-host/tsconfig.app.json",
              "projects/app-tenant-selector-host/tsconfig.spec.json",
              "projects/app-tenant-selector-host/e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/app-tenant-selector-host/e2e/protractor.conf.js",
            "devServerTarget": "app-tenant-selector-host:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app-tenant-selector-host:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "platform-components",
  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

[error] Error: Could not find any tsconfig file. Cannot migrate `ActivatedRouteSnapshot.fragment` accesses.
    at /Users/user.name/Projects/dsbu-platform-header-footer/node_modules/@angular/core/schematics/migrations/activated-route-snapshot-fragment/index.js:40:23
    at MergeMapSubscriber.project (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/src/rules/call.js:75:24)
    at MergeMapSubscriber._tryNext (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:67:27)
    at MergeMapSubscriber._next (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:57:18)
    at MergeMapSubscriber.Subscriber.next (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:66:18)
    at Observable._subscribe (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeToArray.js:5:20)
    at Observable._trySubscribe (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:30:22)
    at MergeMapOperator.call (/Users/user.name/.npm/_npx/35781/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:37:23)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 12.2.14
Node: 12.22.1
Package Manager: npm 6.14.12
OS: darwin x64

Angular: 12.2.14
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.14
@angular-devkit/build-angular   12.2.14
@angular-devkit/core            12.2.14
@angular-devkit/schematics      12.2.14
@schematics/angular             12.2.14
rxjs                            6.5.5
typescript                      4.3.5

Anything else?

One point I can add its that in looking at the activated-route-snapshot-fragment/index.js file it seems to call a method getProjectTsConfigPaths()

function getProjectTsConfigPaths(tree) {
        // Start with some tsconfig paths that are generally used within CLI projects. Note
        // that we are not interested in IDE-specific tsconfig files (e.g. /tsconfig.json)
        const buildPaths = new Set(['src/tsconfig.app.json']);
        const testPaths = new Set(['src/tsconfig.spec.json']);
        // Add any tsconfig directly referenced in a build or test task of the angular.json workspace.
       const workspace = getWorkspaceConfigGracefully(tree);
        if (workspace) {
            const projects = Object.keys(workspace.projects).map(name => workspace.projects[name]);
            for (const project of projects) {
                const buildPath = getTargetTsconfigPath(project, 'build');
                const testPath = getTargetTsconfigPath(project, 'test');
                if (buildPath) {
                    buildPaths.add(buildPath);
                }
                if (testPath) {
                    testPaths.add(testPath);
                }
            }
        }
        // Filter out tsconfig files that don't exist in the CLI project.
        return {
            buildPaths: Array.from(buildPaths).filter(p => tree.exists(p)),
            testPaths: Array.from(testPaths).filter(p => tree.exists(p)),
        };
    }

The only issue I can see here is that I’m not using any folders that start with src/. Everything in this projects is under the /projects folder. But the rest of the code looks to address that so I have no idea what the problem is.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:5
  • Comments:9

github_iconTop GitHub Comments

5reactions
oguzhanetcommented, Apr 15, 2022

I solved the problem. While on version 11 I installed the package @angular-devkit/core and then followed the steps for version 12.

Respectively;

1- npm i @angular-devkit/core@12.2.17 2- package-lock.json removed 3- npx @angular/cli@12 update @angular/core@12 @angular/cli@12 4- npm uninstall @angular-devkit/core 5- npx @angular/cli@12 update @angular/material@12

2reactions
phil-isaacscommented, Jan 24, 2022

Any update on this? Have same error, I am stuck.

None, I eventually just moved on without it completing the migration. I discovered that although it didn’t finish upgrading my project completely, nothing was broken and the code still worked as expected. Still it never felt good to leave it in this state.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Migration failed: Could not find any tsconfig file - Stack Overflow
I'm stuck on a similair issue trying to upgrade from Angular 11 to 12. Migration failed: Could not find any tsconfig file.
Read more >
Update Angular to v15
For more information about the updated components, see Migrating to MDC-based Angular ... In v15, the title property is required on ActivatedRouteSnapshot ....
Read more >
ActivatedRouteSnapshot - Angular
The following example initializes a component with route information extracted from the snapshot of the root node at the time of creation. content_copy...
Read more >
Guide to update your Angular application v14.0 -> v15.0 for ...
In the application's project directory, run ng update @angular/core@15 @angular/cli@15 to update your application to Angular v15. In ...
Read more >
Angular Update Guide
Warning: Be sure to follow the guide below to migrate your application to the new version. You can't run ng update to update...
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
Previous page

Unclear error message for badly configured custom form controls

Next page

Overridden internal methods show up in API docs