feat(angular): handle prerender and appshell in covert to rspack (#31210)
## Current Behavior The `convert-to-rspack` generator does not handle projects that use Prerendering or App Shell ## Expected Behavior The generator sets up Prerendering and App Shell Fixes https://github.com/nrwl/angular-rspack/issues/88
This commit is contained in:
parent
3be687bf95
commit
9aee5b7adf
@ -32,7 +32,13 @@ exports[`app --minimal should generate a correct setup when --bundler=rspack and
|
|||||||
"ssr": {
|
"ssr": {
|
||||||
"entry": "./src/server.ts"
|
"entry": "./src/server.ts"
|
||||||
},
|
},
|
||||||
"server": "./src/main.server.ts"
|
"server": "./src/main.server.ts",
|
||||||
|
"prerender": {
|
||||||
|
"discoverRoutes": true,
|
||||||
|
"routes": [
|
||||||
|
"/"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
@ -52,7 +58,11 @@ exports[`app --minimal should generate a correct setup when --bundler=rspack and
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"outputHashing": "all",
|
"outputHashing": "all",
|
||||||
"devServer": {}
|
"devServer": {},
|
||||||
|
"prerender": {
|
||||||
|
"discoverRoutes": true,
|
||||||
|
"routes": []
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -65,7 +75,11 @@ exports[`app --minimal should generate a correct setup when --bundler=rspack and
|
|||||||
"extractLicenses": false,
|
"extractLicenses": false,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"namedChunks": true,
|
"namedChunks": true,
|
||||||
"devServer": {}
|
"devServer": {},
|
||||||
|
"prerender": {
|
||||||
|
"discoverRoutes": true,
|
||||||
|
"routes": []
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}});"
|
}});"
|
||||||
|
|||||||
@ -1257,6 +1257,7 @@ describe('app', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const project = readProjectConfiguration(appTree, 'app2');
|
const project = readProjectConfiguration(appTree, 'app2');
|
||||||
|
|
||||||
expect(appTree.exists('app2/rspack.config.ts')).toBeTruthy();
|
expect(appTree.exists('app2/rspack.config.ts')).toBeTruthy();
|
||||||
expect(appTree.read('app2/rspack.config.ts', 'utf-8')).toMatchSnapshot();
|
expect(appTree.read('app2/rspack.config.ts', 'utf-8')).toMatchSnapshot();
|
||||||
expect(appTree.read('app2/src/server.ts', 'utf-8')).toMatchSnapshot();
|
expect(appTree.read('app2/src/server.ts', 'utf-8')).toMatchSnapshot();
|
||||||
|
|||||||
@ -32,6 +32,8 @@ const SUPPORTED_EXECUTORS = [
|
|||||||
'@angular-devkit/build-angular:browser',
|
'@angular-devkit/build-angular:browser',
|
||||||
'@angular-devkit/build-angular:dev-server',
|
'@angular-devkit/build-angular:dev-server',
|
||||||
'@angular-devkit/build-angular:server',
|
'@angular-devkit/build-angular:server',
|
||||||
|
'@angular-devkit/build-angular:prerender',
|
||||||
|
'@angular-devkit/build-angular:app-shell',
|
||||||
'@nx/angular:webpack-browser',
|
'@nx/angular:webpack-browser',
|
||||||
'@nx/angular:webpack-server',
|
'@nx/angular:webpack-server',
|
||||||
'@nx/angular:dev-server',
|
'@nx/angular:dev-server',
|
||||||
@ -428,6 +430,31 @@ export async function convertToRspack(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
serveTargetNames.push(targetName);
|
serveTargetNames.push(targetName);
|
||||||
|
} else if (target.executor === '@angular-devkit/build-angular:prerender') {
|
||||||
|
if (target.options) {
|
||||||
|
const prerenderOptions = {
|
||||||
|
routesFile: target.options.routesFile,
|
||||||
|
discoverRoutes: target.options.discoverRoutes ?? true,
|
||||||
|
routes: target.options.routes ?? [],
|
||||||
|
};
|
||||||
|
createConfigOptions.prerender = prerenderOptions;
|
||||||
|
if (target.configurations) {
|
||||||
|
for (const [configurationName, configuration] of Object.entries(
|
||||||
|
target.configurations
|
||||||
|
)) {
|
||||||
|
configurationOptions[configurationName] ??= {};
|
||||||
|
configurationOptions[configurationName].prerender ??= {
|
||||||
|
routesFile: configuration.routesFile,
|
||||||
|
discoverRoutes: configuration.discoverRoutes ?? true,
|
||||||
|
routes: configuration.routes ?? [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
buildTargetNames.push(targetName);
|
||||||
|
} else if (target.executor === '@angular-devkit/build-angular:app-shell') {
|
||||||
|
createConfigOptions.appShell = true;
|
||||||
|
buildTargetNames.push(targetName);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -463,6 +490,7 @@ export async function convertToRspack(
|
|||||||
|
|
||||||
await rspackInitGenerator(tree, {
|
await rspackInitGenerator(tree, {
|
||||||
addPlugin: true,
|
addPlugin: true,
|
||||||
|
framework: 'angular',
|
||||||
});
|
});
|
||||||
|
|
||||||
// This is needed to prevent a circular execution of the build target
|
// This is needed to prevent a circular execution of the build target
|
||||||
|
|||||||
@ -87,8 +87,12 @@ export async function rspackInitGenerator(
|
|||||||
const devDependencies = {
|
const devDependencies = {
|
||||||
'@rspack/core': rspackCoreVersion,
|
'@rspack/core': rspackCoreVersion,
|
||||||
'@rspack/cli': rspackCoreVersion,
|
'@rspack/cli': rspackCoreVersion,
|
||||||
'@rspack/plugin-react-refresh': rspackPluginReactRefreshVersion,
|
...(!schema.framework || schema.framework === 'react'
|
||||||
'react-refresh': reactRefreshVersion,
|
? {
|
||||||
|
'@rspack/plugin-react-refresh': rspackPluginReactRefreshVersion,
|
||||||
|
'react-refresh': reactRefreshVersion,
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
export type Framework = 'none' | 'react' | 'web' | 'nest';
|
export type Framework = 'none' | 'react' | 'web' | 'nest' | 'angular';
|
||||||
|
|
||||||
export interface InitGeneratorSchema {
|
export interface InitGeneratorSchema {
|
||||||
addPlugin?: boolean;
|
addPlugin?: boolean;
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import {
|
|||||||
import { Preset } from '../utils/presets';
|
import { Preset } from '../utils/presets';
|
||||||
import {
|
import {
|
||||||
angularCliVersion,
|
angularCliVersion,
|
||||||
|
angularRspackVersion,
|
||||||
nxVersion,
|
nxVersion,
|
||||||
typescriptVersion,
|
typescriptVersion,
|
||||||
} from '../../utils/versions';
|
} from '../../utils/versions';
|
||||||
@ -128,6 +129,9 @@ function getPresetDependencies({
|
|||||||
dev: {
|
dev: {
|
||||||
'@angular-devkit/core': angularCliVersion,
|
'@angular-devkit/core': angularCliVersion,
|
||||||
'@nx/angular': nxVersion,
|
'@nx/angular': nxVersion,
|
||||||
|
'@nx/rspack': bundler === 'rspack' ? nxVersion : undefined,
|
||||||
|
'@nx/angular-rspack':
|
||||||
|
bundler === 'rspack' ? angularRspackVersion : undefined,
|
||||||
typescript: typescriptVersion,
|
typescript: typescriptVersion,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -28,7 +28,7 @@ interface Schema {
|
|||||||
nextAppDir?: boolean;
|
nextAppDir?: boolean;
|
||||||
nextSrcDir?: boolean;
|
nextSrcDir?: boolean;
|
||||||
linter?: Linter | LinterType;
|
linter?: Linter | LinterType;
|
||||||
bundler?: 'vite' | 'webpack';
|
bundler?: 'vite' | 'webpack' | 'rspack';
|
||||||
standaloneApi?: boolean;
|
standaloneApi?: boolean;
|
||||||
routing?: boolean;
|
routing?: boolean;
|
||||||
useReactRouter?: boolean;
|
useReactRouter?: boolean;
|
||||||
|
|||||||
@ -5,3 +5,4 @@ export const typescriptVersion = '~5.7.2';
|
|||||||
// TODO: remove when preset generation is reworked and
|
// TODO: remove when preset generation is reworked and
|
||||||
// deps are not installed from workspace
|
// deps are not installed from workspace
|
||||||
export const angularCliVersion = '~19.2.0';
|
export const angularCliVersion = '~19.2.0';
|
||||||
|
export const angularRspackVersion = '^20.9.0';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user