Production Angular apps need optimized builds, environment-specific config, and a reliable hosting setup. This lesson covers the build process, environment
Learn the core concepts of Build and Deploy and apply them in practical exercises.
# Development build (fast, not optimized) ng serve # Production build (optimized, minified, AOT compiled) ng build # Output goes to dist/my-app/ # Ahead-of-Time (AOT) compilation catches template errors at build time # Smaller bundles, faster startup
// Development
export const environment = {
production: false,
apiUrl: 'http://localhost:3000'
};
// Production
export const environment = {
production: true,
apiUrl: 'https://api.myapp.com'
};
import { environment } from '../environments/environment';
const res = await fetch(environment.apiUrl + '/users');
// Angular CLI automatically swaps the file at build time
[build] command = "ng build" publish = "dist/my-app" [[redirects]] from = "/*" to = "/index.html" status = 200
npm install -g firebase-tools firebase login firebase init hosting # Set public directory to: dist/my-app # Configure as single-page app: Yes firebase deploy
[[redirects]] rule in Netlify (and the equivalent in Firebase) is required for Angular Router's PathLocationStrategy. Without it, refreshing on any route other than / returns a 404.Before moving on, confirm understanding of these key concepts: