Build/setup summary in our project

[muuvmuuv]

Hey, great work so far! Thanks for taking the path. I was extremely curious how your early work runs in our ionic-angular application and wanted to give it a spin and share it with you.

I just installed your package via pnpm, created a rspack.config.cjs (we have type=module). Copied our Angular.json build config over, commented out properties you are not supporting atm and ran it.

First run failed (ofc) but just with a few errors because of missing features. Changes I had to make to our copied config:

• prefix style path from packages with ./node_modules/ since some do not have "exports" set correctly in package.json
• remove all @import @use in SCSS files that are cross-linked with stylePreprocessorOptions.includePaths
• simplify assets with globs (you support only string, atm)
• define root absolute
• currently does not exit on rspack build, so need to CTRL-C

Build runs great, code-splitting works flawlessly (love that part of rsbuild), even for CSS.

• time pnpm rspack build: 11 directories, 237 files – 5.43s (little delay since I need to CTRL-C)
• time pnpm ng build: 14 directories, 381 files – 7.89s (cold)
• time pnpm ng build: 14 directories, 381 files – 7.89s (warm)

Our configs:

tsconfig.json

{
	"compileOnSave": false,
	"compilerOptions": {
		"rootDir": ".",
		"baseUrl": ".",
		"outDir": "./www/out-tsc",
		"strict": true,
		"noImplicitAny": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"noImplicitOverride": true,
		"noFallthroughCasesInSwitch": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"forceConsistentCasingInFileNames": true,
		"strictPropertyInitialization": true,
		"strictNullChecks": true,
		"isolatedModules": true,
		"sourceMap": false,
		"inlineSourceMap": false,
		"declaration": false,
		"experimentalDecorators": true,
		"verbatimModuleSyntax": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"moduleDetection": "force",
		"importHelpers": true,
		"target": "ES2022",
		"module": "Preserve",
		"lib": ["ES2022", "DOM"],
		"paths": {
			// ~20
		}
	},
	"angularCompilerOptions": {
		"disableTypeScriptVersionCheck": true,
		"enableResourceInlining": false,
		"enableI18nLegacyMessageIdFormat": false,
		"fullTemplateTypeCheck": true,
		"strictInjectionParameters": true,
		"strictInputAccessModifiers": true,
		"strictTemplates": true,
		"extendedDiagnostics": {
			"defaultCategory": "error"
		}
	},
	"include": ["src"],
	"exclude": ["**/node_modules", "**/.*/", "www/", "ios/", "android/", "scripts/"]
}

rspack.config.cjs

// @ts-check

const ngpack = require('@ng-rspack/build')

module.exports = ngpack.createConfig({
	name: 'xxxxxx',
	main: './src/main.ts',
	root: '/Users/marvin/Developer/xxxx/',
	index: './src/index.html',
	outputPath: './www',
	tsConfig: './tsconfig.app.json',
	// inlineStyleLanguage: 'scss',
	// crossOrigin: 'anonymous',
	styles: [
		'./node_modules/@ionic/angular/css/core.css',
		'./node_modules/@ionic/angular/css/normalize.css',
		'./node_modules/@ionic/angular/css/flex-utils.css',
		'./src/theme/app.scss',
	],
	assets: [
		'./src/assets',
		'./src/languages',
		'./node_modules/@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm',
		'./node_modules/shiki/dist/onig.wasm',
	],
	// stylePreprocessorOptions: {
	// 	includePaths: ['./src/theme', './src/theme/animations', './src/theme/mixins'],
	// },
	// indexHtmlTransformer: './scripts/index-transform.mjs',
	// plugins: ['./scripts/plugin-define.mjs'],
})

Things we are missing are just env/dotenv support or extensibility to enable Define-plugin and an index transformer (which you already put on the roadmap I saw).

I hope this helps :)

[muuvmuuv]

Forgot to say that we use the new @angular/build:application builder with esbuild ^^ so the numbers will be much higher with old webpack config.

[Coly010]

Curious about the not exiting on build.

However, this is encouraging still.

I'll add some of what you have written here as issues that you ran into as issues that need to be addressed.
Thank you very much for trying it!

[muuvmuuv]

Do you know how I can enable debugging for that case? I tried multple terminals (thought its Warp) but still the same. Here is the output, after that it hangs.

●  ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit                                                                                                                         WARNING in ⚠ asset size limit: The following asset(s) exceed the recommended size limit (244.141 KiB). This can impact web performance.
  │ Assets:
  │   dotlottie-player.wasm (1.089 MiB)
  │   4344.abfaabbf2f185cfb.js (3.081 MiB)
  │   categories/social.jpeg (335.415 KiB)
  │   6953.adaf4af4056c29f2.js (445.862 KiB)
  │   onig.wasm (455.674 KiB)


WARNING in ⚠ entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244.141 KiB). This can impact web performance.
  │ Entrypoints:
  │   main (3.177 MiB)
  │       runtime.54554b98a088e3fe.js
  │       4344.abfaabbf2f185cfb.js
  │       main.f3fb03afd07a1542.js


Rspack compiled with 2 warnings in 5.51 s

maybe because of the warnings?

[Coly010]

I'm going to convert this is to a discussion now that I've listed out the issues in the pinned Known Issues issue.