All Projects → qdouble → Angular Webpack Starter

qdouble / Angular Webpack Starter

Licence: mit
A complete Angular 6 and Webpack 4 starter seed with minimal and full featured branches. Full featured branch includes: Material Design 2 (Bootstrap 4 branch available as well), @ngrx, HMR, DLLs and optional use of Universal for server-side rendering - Supports AOT (offline) compilation, sync and lazy loading. Karma/Protractor for e2e/unit tests.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angular Webpack Starter

Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (-26.56%)
Mutual labels:  hmr, aot, starter, universal, ngrx
example-app
Example app showcasing fulls1z3's Angular libraries
Stars: ✭ 27 (-97.04%)
Mutual labels:  hmr, starter, angular4, aot
Aspnetcore Angular Universal
ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
Stars: ✭ 1,455 (+59.71%)
Mutual labels:  hmr, universal, angular4, ngrx
angular-webpack-skeleton
This project is deprecated. Please refer to https://github.com/Ks89/angular-cli-skeleton
Stars: ✭ 16 (-98.24%)
Mutual labels:  protractor, starter, angular4, aot
angular-cli-skeleton
angular-cli skeleton to quickly start a new project with advanced features and best practices. All features are described in README.md.
Stars: ✭ 32 (-96.49%)
Mutual labels:  ngrx, karma, protractor, starter
angular4-seed-starter
An angular4 starter with webpack2+aot+lazyload+hmr+scss(个人搭的angular4 starter,使用webpack2,包含aot、lazyload、scss、热替换功能等等)
Stars: ✭ 23 (-97.48%)
Mutual labels:  starter, angular4, aot
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (-63.67%)
Mutual labels:  aot, universal, angular4
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-92.43%)
Mutual labels:  aot, karma, angular4
Ngx Cache
Cache utility for Angular
Stars: ✭ 144 (-84.19%)
Mutual labels:  aot, universal, angular4
Angular Awesome List
Список ресурсов по Angular на русском
Stars: ✭ 224 (-75.41%)
Mutual labels:  aot, universal, material
ngx-redux-ui-management-recipes
Recipes for managing the UI layout of an application using Redux in Angular
Stars: ✭ 39 (-95.72%)
Mutual labels:  ngrx, angular4
aurelia-typescript-webpack-starter
A minimal Aurelia starter kit written in TypeScript and built using webpack.
Stars: ✭ 28 (-96.93%)
Mutual labels:  hmr, starter
Angularx Qrcode
Angular4/5/6/7/8/9/10/11 QRCode generator component library for QR Codes (Quick Response) with AOT support based on node-qrcode
Stars: ✭ 281 (-69.15%)
Mutual labels:  aot, angular4
Create React App Material Typescript Redux
A ready to use boilerplate for starting big react projects
Stars: ✭ 257 (-71.79%)
Mutual labels:  starter, material
react-flux-gulp-starter
A universal boilerplate for building React/Flux apps using Gulp and ES6.
Stars: ✭ 46 (-94.95%)
Mutual labels:  universal, starter
Typescript Webpack Starter
⚡ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠
Stars: ✭ 358 (-60.7%)
Mutual labels:  starter, karma
angular-rollup-starter
Angular2 & Rollup.js including AoT and Universal Prerendering
Stars: ✭ 33 (-96.38%)
Mutual labels:  universal, aot
Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (-66.08%)
Mutual labels:  karma, protractor
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (-46.21%)
Mutual labels:  hmr, angular4
Todo Angular Firebase
Todo app with Angular CLI • AngularFire2 • Firebase • OAuth • SW-Precache
Stars: ✭ 517 (-43.25%)
Mutual labels:  aot, angular4

Complete starter seed project for Angular

Material Branch with Universal (Server-side rendering) support

Featuring Material Design 2, Webpack (and Webpack DLL plugin for faster dev builds), HMR (Hot Module Replacement), @ngrx for state management and optional server-side rendering with Universal.

You can use npm, but it's recommended to use yarn as it installs a lot faster and has other benefits https://yarnpkg.com/ . Make sure you are using yarn version 0.16.0 or newer (check with 'yarn --version')
git clone https://github.com/qdouble/angular-webpack-starter.git
cd angular-webpack-starter
yarn
yarn start

Material Branch without Universal (Server-side rendering) support

Bootstrap Branch

Bootstrap and Universal Branch

Minimal Branch

Features

  • Angular
    • Async loading
    • Treeshaking
    • AOT (Ahead of Time/ Offline) Compilation
    • AOT safe SASS compilation
  • Webpack 4
    • Webpack Dlls (Speeds up devServer builds)
    • @ngTools AOT plugin
  • HMR (Hot Module Replacement)
  • TypeScript 2
  • Material Design 2
  • Universal (Server-side Rendering)
  • @ngrx
    • store (RxJS powered state management for Angular apps, inspired by Redux)
    • effects (Side effect model for @ngrx/store)
    • router-store (Bindings to connect angular/router to ngrx/store)
    • store-devtools (Developer Tools for @ngrx/store)
    • ngrx-store-logger (Advanced console logging for @ngrx/store applications, ported from redux-logger.)
    • ngrx-store-freeze in dev mode (@ngrx/store meta reducer that prevents state from being mutated.)
  • Karma/Jasmine testing
  • Protractor for E2E testing

Project Goals

  • The main goal is to provide an environment where you can have great dev tools and create a production application without worrying about adding a bunch of stuff yourself.
  • The goal of your design should be so that you can easily copy and paste your app folder and your constants file into to a new update of this project and have it still work. Use constants and have proper separation to make upgrades easy. If you have any suggestions on areas where this starter can be designed to make updates more easy, file an issue.

Basic scripts

Use yarn start for dev server. Default dev port is 3000.

Use yarn run start:hmr to run dev server in HMR mode.

Use yarn run build for production build.

Use yarn run server:prod for production server and production watch. Default production port is 8088.

Use yarn run universal to run production build in Universal. To run and build universal in AOT mode, use yarn run universal:aot. Default universal port is 8000.

Default ports and option to use proxy backend for dev server can be changed in constants.js file.

To create AOT version, run yarn run build:aot. This will compile and build script. Then you can use yarn run prodserver to see to serve files.

Store Logger

There is also an option to use store-logger which outputs ngrx action history to the console. To set your development mode store logging preference, go to the constant.js file and edit the STORE_DEV_TOOLS constant. Available options are logger | none

HMR (Hot Module Replacement)

HMR mode allows you to update a particular module without reloading the entire application. The current state of your app is also stored in @ngrx/store allowing you to make updates to your code without losing your currently stored state.

AOT Don'ts

The following are some things that will make AOT compile fail.

  • Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
  • Don’t use default exports.
  • Don’t use form.controls.controlName, use form.get(‘controlName’)
  • Don’t use control.errors?.someError, use control.hasError(‘someError’)
  • Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
  • Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

Testing

For unit tests, use yarn run test for continuous testing in watch mode and use yarn run test:once for single test. To view code coverage after running test, open coverage/html/index.html in your browser.

For e2e tests, use yarn run e2e. To run unit test and e2e test at the same time, use yarn run ci.

Wiki Links

Recommended Steps for merging this starter into existing project

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].