`FatalDiagnosticError` is being throw instead of it being converted to a`ts.Diagnostic`

🐞 Bug report

Command (mark with an x)

• build

Is this a regression?

Unknown. I am in the process of updating from Angular 10.x (where things build fine) to 13.x (where things are breaking), but it’s unclear if this is a regression.

Description

I have two Angular library projects in a monorepo. Project B depends on Project A. Both are pretty small. When attempting to build both, Project A builds successfully but Project B fails with the following error:

Schema validation failed with the following errors:
  Data path "/error" must be string.

It’s unclear what schema the error is referring to and it’s also unclear what Data path "/error" is referring to. If “schema” refers to angular.json in this context, it’s unclear what Data path "/error" is referring to since an “error” key isn’t documented for angular.json.

🔬 Minimal Reproduction

Clone the angular-cli-build-bug branch of my service-work/is-loading repo. The repo contains a .devcontainer.json file which can be used to quickly setup the dev environment.

1. run yarn install
2. (optional) run yarn test. Tests should all pass.
3. run yarn build. The @service-work/is-loading project should build successfully but the @service-work/scroll-position library should fail with the following message:

   Schema validation failed with the following errors:
     Data path "/error" must be string.
   

Note that the @service-work/scroll-position package depends on the @service-work/is-loading package. However, the only file in @service-work/scroll-position that actually imports from @service-work/is-loading is the projects/scroll-position/src/scroll-position/module/directive/scroll-position.directive.ts file. If you comment out the @service-work/is-loading import in that file, as well as the related code, then the @service-work/scroll-position file builds without error.

It’s unclear if there’s something wrong in my code which is preventing the project from building (in which case the provided error message should be improved to make clear what the problem is) or if there’s a bug with the build script.

🔥 Exception or Error

Schema validation failed with the following errors:
  Data path "/error" must be string.

🌍 Your Environment

Angular CLI: 13.2.2
Node: 12.22.7
Package Manager: yarn 1.22.15
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.2
@angular-devkit/build-angular   13.2.2
@angular-devkit/core            13.2.2
@angular-devkit/schematics      13.2.2
@angular/cli                    13.2.2
@schematics/angular             13.2.2
ng-packagr                      13.2.1
rxjs                            6.6.7
typescript                      4.5.5

Anything else relevant?

• This repo is managed as a Yarn 1.x workspace.
• I don’t think this is actually relevant, but I’ll mention that my development computer is a M1 Pro Macbook Pro that is running an x86_64 devcontainer using qemu.

[alan-agius4]

There are two parts of this problem.

misconfiguration The root cause of the error is that the project is misconfigured. The TypeScript compiler is unable to resolve @service-work/is-loading. This can be resolved by setting as path mappings in your tsconfig.

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "paths": {
      "@service-work/is-loading": ["projects/is-loading/build"]
    }
  }
}

compiler-cli

The compiler-cli is surfacing this particular error as a FatalDiagnosticError, which should not happen and therefore this is also an issue in the compiler-cli, which should converted this to a ts.Diagnostic internally.

FatalDiagnosticError {
  code: 3004,
  node: <ref *1> SourceFileObject {
    pos: 0,
    end: 0,
    flags: 0,
    modifierFlagsCache: 0,
    transformFlags: 0,
    parent: undefined,
    kind: 303,
    statements: [ pos: 0, end: 0, hasTrailingComma: false, transformFlags: 0 ],
    endOfFileToken: TokenObject {
      pos: 0,
      end: 0,
      flags: 0,
      modifierFlagsCache: 0,
      transformFlags: 0,
      parent: [Circular *1],
      kind: 1
    },
    fileName: '/is-loading/projects/is-loading/src/is-loading/module/directive/is-loading-spinner.component.ngtypecheck.ts',
    text: '',
    languageVersion: 99,
    languageVariant: 0,
    scriptKind: 3,
    isDeclarationFile: false,
    hasNoDefaultLib: false,
    externalModuleIndicator: undefined,
    bindDiagnostics: [],
    bindSuggestionDiagnostics: undefined,
    pragmas: Map(0) {},
    checkJsDirective: undefined,
    referencedFiles: [],
    typeReferenceDirectives: [],
    libReferenceDirectives: [],
    amdDependencies: [],
    commentDirectives: undefined,
    nodeCount: 2,
    identifierCount: 0,
    identifiers: Map(0) {},
    parseDiagnostics: []
  },
  message: {
    category: 3,
    code: 0,
    messageText: 'Unable to import symbol IsLoadingSpinnerComponent.',
    next: [ [Object] ]
  },
  relatedInformation: [
    {
      category: 3,
      code: 0,
      file: [SourceFileObject],
      start: 75,
      length: 305,
      messageText: 'The symbol is declared here.'
    }
  ],
  _isFatalDiagnosticError: true
}

[PhiLhoSoft]

Update: I had this error after adding a component to the library project. I had another look at the component, and finally spotted the culprits: I routinely import classes by typing their name, then hitting Enter on the suggestion made by VSC. But I didn’t see it made import { SomeClass } from 'api'; where there is no definition of this api thing. It should have been import { SomeClass } from 'the-current-project/api'; because in tsconfig.json, I defined in the paths section: 'the-current-project/*': ['./*'], And then, it worked…

Note 1: the 'Unable to import symbol AddressbookAvatarComponent.' message is totally unrelated to the new component which doesn’t use this one. This is why it was hard to track… Note 2: beware, sometime VSC also makes import { Foo ] from '../'; (or from './';) because there is an index.ts file at this location (it is used to export models, services, modules, components, etc. Barrel files.). These imports creates subtle bugs too, perhaps cyclic dependencies. Change them to import { Foo ] from '../foo.ts'; for example.