noImplicitAny from parent tsconfig.json cannot be overridden in projects (libraries)

[digeomel]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have an Angular 15 workspace with a main app and multiple independent projects (aka libraries). For the main app and some projects, I want to set noImplicitAny: true for the TypeScript compiler, but for some others, I want it to remain false (the default). The tsconfig.lib.json files inside the libraries are extending the main tsconfig.json from the root Angular folder (although I tried removing the extends as well, no difference, read below).

The problem is, no matter what I do, I keep getting errors about noImplicitAny from the libraries where it is even explicitly set to false! It seems that the TypeScript compiler disregards the individual tsconfig.lib.json settings inside those libraries and takes the global setting.

Moreover, I tried moving the setting from the main tsconfig.json in the root folder, to the app-specific src/tsconfig.app.json and I still get the same error from the libraries!

These are the other contents of the main tsconfig.json file:

{
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "module": "es2022",
        "target": "es2022",
        "lib": ["es2022", "dom"],
        "forceConsistentCasingInFileNames": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "moduleResolution": "node",
        "emitDecoratorMetadata": false,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "importHelpers": true,
        "typeRoots": ["node_modules/@types"],
        "resolveJsonModule": true,
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

We are not using "full" TypeScript strict mode.

What am I missing?

Minimal Reproduction

This is a repo which reproduces the problem:

https://github.com/digeomel/angular-no-implicit-any

Exception or Error

 ~  ng build
✔ Browser application bundle generation complete.

Error: projects/test2/src/lib/test2.component.ts:14:25 - error TS7006: Parameter 'param' implicitly has an 'any' type.

14     testMethodWithParam(param) {
                           ~~~~~

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.2.4
Node: 18.17.1
Package Manager: npm 10.2.0
OS: win32 x64

Angular: 16.2.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.4
@angular-devkit/build-angular   16.2.4
@angular-devkit/core            16.2.4
@angular-devkit/schematics      16.2.4
@angular/cli                    16.2.4
@schematics/angular             16.2.4
ng-packagr                      16.2.3
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Anything else relevant?

I posted this issue first on the Typescript repo and I got the answer that this is the expected behaviour, but I thought that maybe the Angular compiler spawns individual, separate processes to compile each project, respecting the tsconfig file in each.
In any case, this seems counter-intuitive to me. If there's a workaround, I'd like to know it.

Here's the issue on the Typescript repo:
microsoft/TypeScript#55983

[alan-agius4]

Hi @digeomel, I am unable to replicate the issue with the reproduction provided.

$ ng build test2
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'test2'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Generating FESM bundles
✔ Copying assets
✔ Writing package manifest
✔ Built test2

------------------------------------------------------------------------------
Built Angular Package
 - from: /angular-no-implicit-any/projects/test2
 - to:   /angular-no-implicit-any/dist/test2
------------------------------------------------------------------------------

Build at: 2023-10-09T07:37:08.645Z - Time: 3445ms

[digeomel]

@alan-agius4 I have forgotten to add the Test1Module and Test2Module to main AppModule. Of course I'm building those libraries to use them in the main app.

Please pull the latest and try again with just ng build. ng build test2 works, but I expect it to work when building the main project as well.

 ~  ng build
✔ Browser application bundle generation complete.

Error: projects/test2/src/lib/test2.component.ts:14:25 - error TS7006: Parameter 'param' implicitly has an 'any' type.

14     testMethodWithParam(param) {
                           ~~~~~

[digeomel]

@alan-agius4 also, if you open the projects\test2\src\lib\test2.component.ts in vscode, it will also mark the error. I am guessing this is the Angular Language Service?

[alan-agius4]

This is expected as vscode TypeScript language service can only read tsconfig files that are named tsconfig.json, and since there is no tsconfig.json in the library directly it will fallback to read the closest one which is located in the root directory.

As a workaround you can rename tsconfig.lib.json to tsconfig.json.

[digeomel]

@alan-agius4 will this also fix the build?

[alan-agius4]

The problem with the build is that the libraries are being imported incorrectly.

- import { Test1Module } from 'projects/test1/src/public-api';
+ import { Test1Module } from 'test1';
- import { Test2Module } from 'projects/test2/src/public-api';
+ import { Test2Module } from 'test2';

[digeomel]

This will only work if the libraries are first built independently and then I build the main app, i.e.
ng build test1 && ng build test2 && ng build
Apart from creating an npm script with this specific command, is there another way to it?

[alan-agius4]

Currently there is no way to build multiple projects with a single command. Please see: #11002

Closing as this is working as expected since the library is being build as part of the application. IE: you don't have a 2 libraries and an application but just an application.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}