Frontend Build & TypeScript Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The Sunrise Communication frontend utilizes Angular v22 to provide a high-performance, SEO-optimized catalog platform. The build system integrates server-side rendering (SSR), static site generation for specific routes, and a strictly typed TypeScript environment to ensure application stability and discoverability.
Sources: implementation_plan.md:12-25, sunrise-angular/package.json:22-30
Workspace & Angular CLI Configuration
The project uses the @angular/build:application builder, which handles both browser and server-side bundles in a single execution. The configuration defines specific entry points for the browser (src/main.ts) and the server (src/main.server.ts), enabling hydration-ready builds.
Build Architectures and Targets
The build process manages assets from both a root-level public directory and the src/assets folder. Global styles are injected in a specific order, including Bootstrap, local theme styles (style.css, responsive.css), and the main SCSS entry point.
| Target | Configuration Detail | Source Reference |
|---|---|---|
| Builder | @angular/build:application | angular.json:20 |
| Styles | Bootstrap, Theme CSS, Global SCSS | angular.json:33-38 |
| SSR Entry | src/server.ts | angular.json:44 |
| Optimization | Initial budget: 2MB; Style budget: 20kB | angular.json:52-61 |
Sources: sunrise-angular/angular.json:14-65
Development and Production Environments
Development configurations disable optimization and extraction of licenses to prioritize build speed and source map availability. Production builds enable full output hashing for cache-busting and enforce strict performance budgets.
This diagram shows the branching logic for frontend builds based on the target environment.
Sources: sunrise-angular/angular.json:50-70
TypeScript and Dependency Management
The project runs on TypeScript ~6.0.2 and utilizes Angular v22 standalone components by default. Dependency management is handled via npm, targeting a specific version of npm@11.9.0.
Core Dependencies
The application relies on @angular/ssr for server-side capabilities and express for the server engine. It also includes utility libraries for animations (aos) and touch sliders (swiper).
| Package | Version | Purpose |
|---|---|---|
@angular/core | ^22.0.0 | Framework core |
@angular/ssr | ^22.0.7 | Server-side rendering support |
express | ^5.1.0 | Production server engine |
typescript | ~6.0.2 | Programming language |
Sources: sunrise-angular/package.json:2-45
Deployment and Static Page Generation
The build pipeline includes a postbuild hook that executes build-routes.js. This script generates physical index.html files for static routes to support environments like Vercel and traditional CDN deployments.
Route Generation Logic
The build-routes.js script identifies a list of static routes and creates corresponding directories in the dist/ folder. It copies the index.html (or index.csr.html) into these directories to ensure that deep-linking works without complex server-side redirection.
const routes = [
'about',
'products',
'services',
'tools/cctv-storage-calculator',
'guides',
'contact'
];
routes.forEach(route => {
const routeDir = path.join(browserDir, route);
if (!fs.existsSync(routeDir)) {
fs.mkdirSync(routeDir, { recursive: true });
}
fs.writeFileSync(path.join(routeDir, 'index.html'), htmlContent);
});
Sources: sunrise-angular/build-routes.js:20-47
Vercel Deployment Configuration
The vercel.json file defines the build command and identifies the output directory. It specifically configures clean URLs and headers for security and caching.
- Security Headers: Implements
X-Frame-Options: SAMEORIGIN,X-Content-Type-Options: nosniff, andReferrer-Policy. - Static Caching: Assets under
/assets/are marked asimmutablewith a one-year cache duration. - Rewrites: All non-asset requests are routed to
/index.htmlto support client-side routing.
Sources: vercel.json:1-48
Application Configuration
The application is bootstrapped with appConfig, which defines the necessary providers for SSR and client hydration.
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch())
]
};
Sources: sunrise-angular/src/app/app.config.ts:6-12, implementation_plan.md:460-475
Build and Test Scripts
Standardized scripts facilitate development and quality assurance:
ng build: Compiles the project intodist/.npm run serve:ssr:sunrise-angular: Starts the server-side rendered application using the compiledserver.mjs.ng test: Executes unit tests using the Vitest runner.
Sources: sunrise-angular/package.json:6-16, sunrise-angular/README.md:10-45
The Frontend Build and TypeScript configuration establishes a modern, optimized foundation for Sunrise Communication. By combining Angular v22 features with custom static route generation and strict deployment rules, the system achieves high performance and robust SEO compatibility.