This tutorial walks you through creating a MEAN stack application using Angular and Webpack. While the Angular CLI makes it easy to spin up new projects, understanding the structure and components of Angular itself is crucial. Here, you'll learn the fundamentals by setting up an Angular app manually, which deepens your understanding of the framework.
Key Takeaways
- Learn to manually set up an Angular app with Webpack and MEAN stack.
- Understand the role of each Angular module and third-party dependency.
- Grasp the configuration of TypeScript and Webpack for Angular applications.
- Discover how to run a local server with Express.
Installing Your Dependencies
First, you'll need Node.js along with the MEAN stack. Create a new folder for your project and add this package.json file:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "Angular QuickStart with Webpack",
"author": "",
"license": "",
"dependencies": {
"@angular/common": "^15.0.0",
"@angular/compiler": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"core-js": "^3.0.0",
"rxjs": "^7.0.0",
"zone.js": "^0.11.0",
"webpack": "^5.0.0",
"typescript": "^5.0.0",
"ts-loader": "^10.0.0",
"express": "^4.0.0"
}
}In the root directory, run:
npm installThis installs your project's dependencies into a node_modules folder. Here's how each dependency fits into the Angular framework:
@angular Modules
These are the basics of Angular. They handle everything from dependency injection to cross-platform view rendering.
core-js
core-js provides polyfills for modern JavaScript features, ensuring cross-browser compatibility.
rxjs
RxJS is essential for managing asynchronous operations in Angular using observables, enabling more manageable async code.
zone.js
Allows Angular to automatically detect changes, leading to efficient UI updates.
webpack
Webpack is used for module bundling and transpiling TypeScript to JavaScript. In this project, it's used to compile your Angular code.
typescript
Brings optional static typing to JavaScript, which helps catch errors early during development.
ts-loader
Integrates TypeScript into Webpack, allowing you to compile TypeScript files as part of your build process.
express
Express is a Node.js framework for web apps, simplifying server setup and routing.
Configuring TypeScript
Set up your TypeScript by adding this tsconfig.json file at your project's root:
{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2021", "dom" ],
"strict": true
}
}Configuring Webpack
Configure Webpack with the following webpack.config.js:
module.exports = {
entry: "./src/main.ts",
output: {
path: __dirname + '/dist',
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
};Create an index.html file in the root with the following template:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading...</my-app>
<script src="/dist/bundle.js"></script>
</body>
</html>Configuring Express
Set up Express by creating an index.js file with:
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
app.use(express.static(__dirname));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(PORT, () => {
console.log(`App running on http://localhost:${PORT}`);
});This sets up a simple local server on port 3000, serving your project files.
Getting Started With Angular
Create a src folder and inside it add a main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);Then, create an app.module.ts in src/app:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }And an app.component.ts with:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Alice'; }Running the App
Build the Project
To compile your code, run:
npx webpackStart the Server
Launch the Express server by executing:
node indexVisit localhost:3000 to see "Hello Alice" rendered in your browser.
Conclusion
While setting up Angular manually allows for a deeper understanding of its ecosystem, using tools like Angular CLI can greatly accelerate your development workflow. Remember to explore these options once you're comfortable with the basics to enhance your productivity further.
FAQ
Why use Webpack with Angular?
Webpack bundles JavaScript applications and their dependencies for the browser, which optimizes loading and improves performance.
What is the role of TypeScript in Angular?
TypeScript enhances JavaScript by adding types, enabling developers to catch errors at compile time, leading to more robust and maintainable code.
Can I use a newer version of Angular?
Yes, always aim to use the latest stable version of Angular for new features and improvements. This tutorial can be adapted with newer versions too.
