Skip to content
Get packs

Guide · Open source

How to use angular-webpack-starter: setup, structure and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

angular-webpack-starter is an MIT-licensed JavaScript template that gives you a pre-configured Angular app built with TypeScript and Webpack, so you do not have to wire those tools together yourself. This guide shows how to clone it, install and run it, and what each part of the project is for. It is most useful for studying a hand-configured Angular and Webpack setup, and the README itself says the Angular CLI is the preferred way to start a new Angular app.

Angular Webpack StarterPatrickJS/angular-webpack-starter · ★ 10.2k · MIT

Quick start

  1. 1Check Node and npm. Confirm you have Node.js 8.0 or higher and npm 5 or higher, or Yarn installed.
  2. 2Clone the repository. Run git clone --depth 1 on the angular-starter repository to get a shallow copy.
  3. 3Enter the project folder. Change into the angular-starter directory with cd angular-starter.
  4. 4Install dependencies. Run npm install to download the project's packages.
  5. 5Start the dev server. Run npm start, then open http://localhost:3000 in your browser.
  6. 6Edit the app component. Change src/app/app.component.ts and watch the page update.

Check the requirements before you start

The README asks for Node.js version 8.0 or higher (it mentions Node v8.x.x+ or v9.x.x) and npm 5 or higher, or Yarn. Install Node and npm first, then confirm your versions before cloning.

Because the project targets Node 8 era tooling, a newer Node release may not work without changes. The README suggests nvm for managing Node versions.

  • Node.js 8.0 or higher (README: v8.x.x+ or v9.x.x)
  • npm 5 or higher, or Yarn
  • nvm is recommended in the README for switching Node versions
node --version npm --version

Clone and install the project

Clone the repository with a shallow clone, which keeps only one commit of Git history. Then change into the project folder and install the dependencies with npm.

The README notes that if you are in China you can use cnpm instead of npm.

  • --depth 1 removes all but one .git commit history, so the download is smaller
  • Run npm install from inside the angular-starter folder
git clone --depth 1 https://github.com/gdi2290/angular-starter.git cd angular-starter npm install

Run the dev server

Start the development server with npm start. The README says to open http://0.0.0.0:3000 or http://localhost:3000 in your browser.

For Hot Module Replacement, which updates the running app as you edit files, the README lists a separate script, npm run server:dev:hmr.

  • npm start: starts the server
  • npm run server:dev:hmr: starts the server with Hot Module Replacement
  • Open http://localhost:3000 in your browser
npm start npm run server:dev:hmr

Edit the starter app

The README suggests editing the root component to make your first change. Open src/app/app.component.ts, change the component, and the dev server reloads the page so you can see the result.

Other files in src/app, such as app.component.spec.ts and app.e2e.ts, hold the example unit and end-to-end tests for that component.

  • Main component: src/app/app.component.ts
  • Unit test example: src/app/app.component.spec.ts
  • End-to-end test example: src/app/app.e2e.ts

Understand the project structure

The project follows a component approach. Each component is a self-contained unit, with its style, template, specs, e2e tests and component class kept as separate files. Configuration lives in the config folder.

The config folder holds the Webpack files: webpack.common.js for shared tasks, webpack.dev.js for development, webpack.prod.js for production and webpack.test.js for testing. Karma and Protractor each have their own config file.

  • config/: Webpack configs (webpack.common.js, webpack.dev.js, webpack.prod.js, webpack.test.js)
  • config/karma.conf.js: Karma config for unit tests
  • config/protractor.conf.js: Protractor config for end-to-end tests
  • config/config.common.json, config.dev.json, config.prod.json: environment settings
  • src/index.html and src/main.browser.ts: the page and browser entry file
  • tsconfig.json and tsconfig.webpack.json: TypeScript configs for use outside and inside Webpack

Know what the starter includes

The README lists Angular 6, ahead-of-time (AoT) compilation, the router, forms, HTTP, TypeScript, Karma, Jasmine, Protractor, Istanbul coverage, TsLint, Codelyzer and Webpack 4. It also lists tree shaking for production bundles and Hot Module Replacement.

Note that the README's version and tooling details are from an older era. Check the project's package.json before relying on any specific version.

  • Unit tests with Karma and Jasmine
  • End-to-end tests with Protractor
  • Coverage with Istanbul
  • Production builds with AoT and tree shaking
  • Hot Module Replacement with Webpack

What people use it for

  • Studying how Webpack, TypeScript and Angular are configured together by reading the config folder
  • Reviewing example unit tests with Karma and Jasmine and end-to-end tests with Protractor
  • Maintaining an existing Angular 6-style project that uses similar tooling
  • Experimenting with Hot Module Replacement in a small Angular app

Frequently asked questions

Is angular-webpack-starter free to use?

Yes. The project is licensed under the MIT license, as listed in the repository summary. Check the LICENSE file in the repo for the full terms.

What do I need to install before using angular-webpack-starter?

The README asks for Node.js 8.0 or higher (v8.x.x+ or v9.x.x) and npm 5 or higher, or Yarn. Install these first, then clone the repo and run npm install.

How do I start the angular-webpack-starter dev server?

Run npm start inside the project folder, then open http://localhost:3000 or http://0.0.0.0:3000 in your browser. For Hot Module Replacement, run npm run server:dev:hmr instead.

Should I use angular-webpack-starter to start a new Angular app?

The README says to use the Angular CLI if you want an Angular app. This project targets Angular 6 and Node 8 era tooling, so it is better suited to studying or maintaining an existing setup.

What are good alternatives to angular-webpack-starter?

The README points to angular-seed as an easier option for getting started, and to NG6-starter if you need Angular 1.x. The Angular CLI is the recommended route for new Angular apps.

Why won't angular-webpack-starter run on my current Node version?

The README lists Node 8 and npm 5 as requirements, so newer Node releases may not be compatible with the project's tooling. Use nvm to install a Node version that matches the README, or choose a newer starter.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use angular-webpack-starter if you want to study a hand-configured Angular, TypeScript and Webpack setup, or maintain an existing Angular 6-style project. Pick the Angular CLI for any new Angular app, or angular-seed if you want a simpler start, since this project relies on Node 8 era tooling.

Install options & downloads