[browser-esbuild] Trying to use partial ivy compilationMode doesn't work

AnaA95 commented 1 year ago

Command

serve

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

Using browser-esbuild with partial compilation mode throws an error when trying to serve or build the application. The error is not present when using the default builder.

Minimal Reproduction

Create a new Angular application using the "ng new" command.
npm i
Switch to partial ivy in tsconfig.app.json by adding this code:
```
"angularCompilerOptions": { 
"compilationMode": "partial" 
}
```

Make the changes in angular.json to move to esbuild as mentioned in the docs:

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
...

Run ng serve (or try to build the app, it throws the same error).

Exception or Error

✘ [ERROR] File 'src/main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

✘ [ERROR] TestBed support ("supportTestBed" option) cannot be disabled in partial compilation mode. [plugin angular-compiler]

    node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compilation/aot-compilation.js:72:88:
      72 │ ...sync)('NG_ANALYZE_PROGRAM', () => angularCompiler.analyzeAsync());
         ╵                                                      ^

    at NgCompiler.makeCompilation (file:///Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular/compiler-cli/bundles/chunk-CWD5WGIF.js:7065:13)
    at file:///Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular/compiler-cli/bundles/chunk-CWD5WGIF.js:6758:31
    at ActivePerfRecorder.inPhase (file:///Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular/compiler-cli/bundles/chunk-HJOPJLIM.js:134:14)
    at NgCompiler.analyzeAsync (file:///Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular/compiler-cli/bundles/chunk-CWD5WGIF.js:6757:29)
    at /Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compilation/aot-compilation.js:72:89
    at profileAsync (/Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular-devkit/build-angular/src/tools/esbuild/profiling.js:55:16)
    at AotCompilation.initialize (/Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compilation/aot-compilation.js:72:44)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js:168:76
    at async /Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/esbuild/lib/main.js:1349:22

  This error came from the "onStart" callback registered here:

    node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js:136:18:
      136 │             build.onStart(async () => {
          ╵                   ~~~~~~~

    at setup (/Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js:136:19)
    at async handlePlugins (/Users/ana.andrei/Repos/mf/simple-angular/simple-angular/node_modules/esbuild/lib/main.js:1339:9)

Your Environment

Angular CLI: 16.2.7
Node: 16.20.2
Package Manager: npm 8.19.4
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.7
@angular-devkit/build-angular   16.2.7
@angular-devkit/core            16.2.7
@angular-devkit/schematics      16.2.7
@angular/cli                    16.2.7
@schematics/angular             16.2.7
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Anything else relevant?

No response

alan-agius4 commented 1 year ago

Partial compilation is only intended to be used with shippable libraries. @angular-devkit/build-angular:browser-esbuild does not support building of libraries as it's designed to build applications.

What is the reason that you are using partial compilation for your app?

JoostK commented 1 year ago

~This should probably report a better error to indicate this is explicitly not supported.~ Oh, there's already a PR for that :-)

justindoherty commented 1 year ago

Partial compilation is only intended to be used with shippable libraries. @angular-devkit/build-angular:browser-esbuild does not support building of libraries as it's designed to build applications.

What is the reason that you are using partial compilation for your app?

We are attempting to convert our use of @angular-architects/module-federation - npm which uses webpack module federation to @angular-architects/native-federation - npm which is the esbuild version of basically the same thing.

The reason we're using partial compilation is so we support hosts at different versions of Angular so that we can get the same sort of forward compatibility that is provided by Angular libraries. We have some middleware in between partial-ivy files which will read an incoming request and do the final full-ivy linking using babel before returning the response to the browser. This wasn't an issue in the webpack implementation.

It seemed like the only thing we needed to do to get this working with esbuild was to enable the supportTestBed and supportJitMode flags in angular-compilation.ts.

Could this be somehow configurable? Or just enabled? Or maybe an alternate suggestion?

alan-agius4 commented 1 year ago

Hi @justindoherty, from what your are explaining your are building your application as a library. So why not build libraries?

The browser/browser-esbuild/application builders are meant to use full compilation and supporting partial compilation at this layer is not a design goal. Whilst we could technically make it work now, by changing the mentioned options it might break again in the future.

justindoherty commented 1 year ago

Hi @alan-agius4, I haven't been able to figure out how I can achieve an MFE approach with a library build. I'd maybe have to spend some time looking at the tooling in @angular-architects/native-federation - npm. I also don't really know how I'd achieve my i18n goals, I think I need different builds for each locale with the translations baked in.

Do you have any pointers perhaps on how I might be able to achieve being able to have many teams each managing their own MFE consumable by one or more hosts at different versions of angular that are greater than or equal to that of the host? I'll have to give it some more thought.

alan-agius4 commented 1 year ago

@justindoherty, I cannot really help you here as my knowledge on the above packages is rather minimal. It's also worth mentioning that Module Federation is not supported by the Angular team.

justindoherty commented 1 year ago

Alright, I appreciate the responses @alan-agius4.

TexRx commented 1 year ago

I get this error when I use "@angular-devkit/build-angular:browser-esbuild", but I am NOT specifying "compilationMode" 9so i assume default of "full" is being used".


  This error came from the "onStart" callback registered here:

    node_modules/@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js:136:18:
      136 │             build.onStart(async () => {
          ╵

and

 [ERROR] File 'src\main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Relevant package.json entries

"dependencies": {
  "@angular/animations": "^16.2.11",
  "@angular/cdk": "^16.2.10",
  "@angular/common": "^16.2.11",
  "@angular/compiler": "^16.2.11",
  "@angular/core": "^16.2.11",
  "@angular/forms": "^16.2.11",
  "@angular/material": "^16.2.10",
  "@angular/platform-browser": "^16.2.11",
  "@angular/platform-browser-dynamic": "^16.2.11",
  "@angular/router": "^16.2.11",
  ...
}
"devDependencies": {
  "@angular-devkit/build-angular": "^16.2.8",
  "@angular/cli": "^16.2.8",
  "@angular/compiler-cli": "^16.2.11",
  ...
}

Environment:

Angular CLI: 16.2.9
Node: 18.18.2
Package Manager: npm 9.8.1
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.9
@angular-devkit/build-angular   16.2.9
@angular-devkit/core            16.2.9
@angular-devkit/schematics      16.2.9
@angular/cdk                    16.2.10
@angular/cli                    16.2.9
@angular/material               16.2.10
@schematics/angular             16.2.9
rxjs                            7.8.1
typescript                      4.9.5
zone.js                         0.13.3

angular-automatic-lock-bot[bot] commented 11 months ago

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

angular / angular-cli