WIP: feat(angular): add ivy support with JIT #11157
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,7 @@ | ||
| module.exports = { | ||
| preset: 'jest-preset-angular', | ||
| setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'], | ||
| moduleNameMapper: { | ||
| '@storybook/node-logger': '<rootDir>/../../lib/node-logger/dist/cjs/index.js', | ||
| }, | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import { buildStatic } from '@storybook/core/server'; | ||
| import { runNgcc } from './ngcc-execution'; | ||
| import options from './options'; | ||
|
|
||
| runNgcc(); | ||
| buildStatic(options); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import { buildDev } from '@storybook/core/server'; | ||
| import { runNgcc } from './ngcc-execution'; | ||
| import options from './options'; | ||
|
|
||
| runNgcc(); | ||
|
There was a problem hiding this comment. This is a synchronous operation, correct? There was a problem hiding this comment. You can choose https://github.com/angular/angular/blob/master/packages/compiler-cli/ngcc/index.ts#L17 If I would provide There was a problem hiding this comment. You should be aware that, in sync mode, ngcc will crash out if there is another ngcc process running at the same time - it is not able to wait like it can in async mode. This is probably not a problem but worth being aware of. There was a problem hiding this comment. Thanks for the info! I can imagine that someone starts the app + storybook in parallel right after installing all dependencies If it is that simple to prevent a crash then let's do this 🙂 There was a problem hiding this comment. If you can call There was a problem hiding this comment. That error indicates that you are somehow triggering ngcc via its command line executable. There was a problem hiding this comment. No, only from the code. I extracted the code from this PR in a smaller external package which makes it easier to see what happens: https://github.com/storybookjs/addon-angular-ivy/blob/main/src/preset/index.ts That's all There are 2 ways to avoid the error
No other prebuild steps involved: https://github.com/storybookjs/addon-angular-ivy/blob/main/package.json#L22 There was a problem hiding this comment. Oh I just realised... in async mode we kick off child processes, which will receive the arguments passed to the original parent process. Perhaps this is how they are getting passed to ngcc. I'll investigate There was a problem hiding this comment. Perhaps this is where it is coming from? There was a problem hiding this comment. A workaround would be to clear the command line args before triggering ngcc: process.argv.length = 0; |
||
| buildDev(options); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import path from 'path'; | ||
| import { process as ngccProcess } from '@angular/compiler-cli/ngcc'; | ||
|
|
||
| /** | ||
| * Run ngcc for converting modules to ivy format before starting storybook | ||
| * This step is needed in order to support Ivy in storybook | ||
| * | ||
| * Information about Ivy can be found here https://angular.io/guide/ivy | ||
| */ | ||
| export function runNgcc() { | ||
| ngccProcess({ | ||
| basePath: path.join(process.cwd(), 'node_modules'), // absolute path to node_modules | ||
| createNewEntryPointFormats: true, // --create-ivy-entry-points | ||
| compileAllFormats: false, // --first-only | ||
| }); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,7 +17,7 @@ | |
| "prop-types": "15.7.2", | ||
| "react": "16.14.0", | ||
| "react-dom": "16.14.0", | ||
| "typescript": "^4.1.3", | ||
| "webpack": "4" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,7 +16,7 @@ | |
| "prop-types": "15.7.2", | ||
| "react": "16.14.0", | ||
| "react-dom": "16.14.0", | ||
| "typescript": "^4.1.3", | ||
| "webpack": "4" | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I honestly don't know how jest managed to successfully run tests with external packages without
moduleNameMapperbefore 🤔There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now
build-storybookfails withI guess that's not the solution we were looking for