fix(vite-plugin-angular): reenables test bed and jit mode for partial compilations #1675
Conversation
… compilations
When trying to build with `"complationMode": "partial"` set in `tsconfig.json`, the following errors occur:
```
vite v6.2.5 building for production...
✓ 0 modules transformed.
✗ Build failed in 1.19s
error during build:
[@analogjs/vite-plugin-angular] TestBed support ("supportTestBed" option) cannot be disabled in partial compilation mode.
at NgCompiler.makeCompilation (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:4224:13)
at file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:3838:31
at ActivePerfRecorder.inPhase (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-Q2WE7ECN.js:142:14)
at NgCompiler.analyzeAsync (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:3837:29)
at buildAndAnalyze (file:///Users/.../node_modules/@analogjs/vite-plugin-angular/src/lib/angular-vite-plugin.js:593:35)
at Object.buildStart (file:///Users/.../node_modules/@analogjs/vite-plugin-angular/src/lib/angular-vite-plugin.js:200:23)
at Object.handler (file:///Users/.../node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:51802:15)
at file:///Users/.../node_modules/rollup/dist/es/shared/node-entry.js:21835:40
at async Promise.all (index 5)
at async PluginDriver.hookParallel (file:///Users/.../node_modules/rollup/dist/es/shared/node-entry.js:21763:9)
```
```
vite v6.2.5 building for production...
✓ 0 modules transformed.
✗ Build failed in 1.09s
error during build:
[@analogjs/vite-plugin-angular] TestBed support ("supportTestBed" option) cannot be disabled in partial compilation mode.
at NgCompiler.makeCompilation (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:4224:13)
at file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:3838:31
at ActivePerfRecorder.inPhase (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-Q2WE7ECN.js:142:14)
at NgCompiler.analyzeAsync (file:///Users/.../node_modules/@angular/compiler-cli/bundles/chunk-UJU2GLGZ.js:3837:29)
at buildAndAnalyze (file:///Users/.../node_modules/@analogjs/vite-plugin-angular/src/lib/angular-vite-plugin.js:593:35)
at Object.buildStart (file:///Users/.../node_modules/@analogjs/vite-plugin-angular/src/lib/angular-vite-plugin.js:200:23)
at Object.handler (file:///Users/.../node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:51802:15)
at file:///Users/.../node_modules/rollup/dist/es/shared/node-entry.js:21835:40
at async Promise.all (index 5)
at async PluginDriver.hookParallel (file:///Users/.../node_modules/rollup/dist/es/shared/node-entry.js:21763:9)
```
This diff ensures these options are enabled when the `tsCompilerOptions.compilationMode` is resolved to `partial`.
✅ Deploy Preview for analog-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for analog-blog ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for analog-app ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for analog-ng-app ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I'm not sure why Prettier is failing, but it's unrelated to my changes as the failures are in files this PR doesn't modify. |
|
Thanks @shannonmoeller! @allcontributors add @shannonmoeller for code. |
|
I've put up a pull request to add @shannonmoeller! 🎉 |
|
Thank you for reviewing so quickly and accepting the change! This will make my life a lot easier. |
|
No problem @shannonmoeller, thanks for the PR! Are you using Vite instead of ng-packagr to build these Angular libraries? |
|
Yep! Exactly. I would share a link to the code, but it's in a private work repo. The component library is developed within a monorepo that has adapter libraries for Angular, React, and Vue. Both React and Vue were already using vite for storybook and production builds. Angular was the odd one out and we had to have a bunch of exceptions in our publish scripts to account for ng-packagr weirdness. Your vite plugin allowed us to unify everything and keep the Angular-specific stuff inside the Angular directory. Huge quality of life improvement for the team all around. |
|
That's great to hear. Is there anything else special about building the Angular component lib with Vite as far as the Vite configuration? Maybe we can add a guide on this if it's mostly standard configuration + the plugin. |
|
There were some pain points, yes. The storybook and production builds have slightly different tsconfig and vite plugin config. In order to make that work properly we had to use Storybook's tsconfig.json and tsconfig.build.jsonWe have a base tsconfig.json file which gets used by type checking and storybook, then a tsconfig.build.json file that extends the base file and adds vite.config.jsimport fg from 'fast-glob';
import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';
export default defineConfig({
plugins: [angular({ tsconfig: 'tsconfig.build.json' })],
resolve: {
mainFields: ['module'],
},
build: {
target: ['esnext'],
emptyOutputDir: false,
lib: {
entry: fg.globSync('src/**/index.ts'),
formats: ['es'],
fileName: (_format, entryName) => `${entryName}.js`,
},
rollupOptions: {
external: [/^[@\w]/],
output: {
preserveModules: true,
},
},
},
});.storybook/main.tsexport default {
// ...
core: {
// ...
builder: {
name: '@storybook/builder-vite',
options: {
viteConfigPath: undefined,
},
},
},
async viteFinal(config) {
const { default: angular } = await import('@analogjs/vite-plugin-angular');
const { default: tsconfig } = await import('../tsconfig.json', { with: { type: 'json' } });
config.plugins = [
...(config.plugins || []).filter((plugin) => {
return !plugin || !('name' in plugin) || !plugin.name.includes('analogjs');
}),
...angular({
jit: true,
tsconfig: 'tsconfig.json',
}),
];
config.define = {
...config.define,
'process.env.FORCE_SIMILAR_INSTEAD_OF_MAP': false,
STORYBOOK_ANGULAR_OPTIONS: JSON.stringify(tsconfig.angularCompilerOptions),
};
return config;
}
// ...
}; |
|
Thanks for the configs 👍 |
PR Checklist
When trying to build with
"complationMode": "partial"set intsconfig.json, the following errors occur:What is the new behavior?
This PR ensures these options are enabled when the
tsCompilerOptions.compilationModeis resolved topartial.Does this PR introduce a breaking change?
Other information
This change is useful when building component libraries you wish to share via npm that should support a range of Angular versions.
What gif best describes this PR or how it makes you feel?