{"id":13540018,"url":"https://github.com/qdouble/angular-webpack-starter","last_synced_at":"2025-04-12T14:56:34.094Z","repository":{"id":10928367,"uuid":"67509389","full_name":"qdouble/angular-webpack-starter","owner":"qdouble","description":"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.","archived":false,"fork":false,"pushed_at":"2022-12-07T17:20:05.000Z","size":2541,"stargazers_count":878,"open_issues_count":40,"forks_count":181,"subscribers_count":59,"default_branch":"master","last_synced_at":"2025-04-03T14:11:02.563Z","etag":null,"topics":["angular","angular4","aot","hmr","karma","material","ngrx","ngtools","protractor","starter","treeshaking","typescript","universal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qdouble.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-06T13:11:39.000Z","updated_at":"2025-03-05T20:40:36.000Z","dependencies_parsed_at":"2023-01-11T20:15:18.319Z","dependency_job_id":null,"html_url":"https://github.com/qdouble/angular-webpack-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qdouble%2Fangular-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qdouble%2Fangular-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qdouble%2Fangular-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qdouble%2Fangular-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qdouble","download_url":"https://codeload.github.com/qdouble/angular-webpack-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586248,"owners_count":21128996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular4","aot","hmr","karma","material","ngrx","ngtools","protractor","starter","treeshaking","typescript","universal"],"created_at":"2024-08-01T09:01:37.597Z","updated_at":"2025-04-12T14:56:34.072Z","avatar_url":"https://github.com/qdouble.png","language":"TypeScript","readme":"# Complete starter seed project for Angular\n\n## Material Branch with Universal (Server-side rendering) support\n\n\u003e 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.\n\n###### 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')\n\n```bash\ngit clone https://github.com/qdouble/angular-webpack-starter.git\ncd angular-webpack-starter\nyarn\nyarn start\n```\n\n### [Material Branch without Universal (Server-side rendering) support](https://github.com/qdouble/angular-webpack-starter/tree/no-universal-support)\n\n### [Bootstrap Branch](https://github.com/qdouble/angular-webpack-starter/tree/bootstrap)\n\n### [Bootstrap and Universal Branch](https://github.com/qdouble/angular-webpack-starter/tree/bootstrap-and-universal)\n\n### [Minimal Branch](https://github.com/qdouble/angular-webpack-starter/tree/minimal)\n\n## Features\n\n* Angular\n  * Async loading\n  * Treeshaking\n  * AOT (Ahead of Time/ Offline) Compilation\n  * AOT safe SASS compilation\n* Webpack 4\n  * Webpack Dlls (Speeds up devServer builds)\n  * @ngTools AOT plugin\n* HMR (Hot Module Replacement)\n* TypeScript 2\n  * @types\n* Material Design 2\n* Universal (Server-side Rendering)\n* @ngrx\n  * store (RxJS powered state management for Angular apps, inspired by Redux)\n  * effects (Side effect model for @ngrx/store)\n  * router-store (Bindings to connect angular/router to ngrx/store)\n  * store-devtools (Developer Tools for @ngrx/store)\n  * ngrx-store-logger (Advanced console logging for @ngrx/store applications, ported from redux-logger.)\n  * ngrx-store-freeze in dev mode (@ngrx/store meta reducer that prevents state from being mutated.)\n* Karma/Jasmine testing\n* Protractor for E2E testing\n\n## Project Goals\n\n* 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.\n* 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.\n\n## Basic scripts\n\nUse `yarn start` for dev server. Default dev port is `3000`.\n\nUse `yarn run start:hmr` to run dev server in HMR mode.\n\nUse `yarn run build` for production build.\n\nUse `yarn run server:prod` for production server and production watch. Default production port is `8088`.\n\nUse `yarn run universal` to run production build in Universal. To run and build universal in AOT mode, use\n`yarn run universal:aot`. Default universal port is `8000`.\n\nDefault ports and option to use proxy backend for dev server can be changed in `constants.js` file.\n\nTo create AOT version, run `yarn run build:aot`. This will compile and build script.\nThen you can use `yarn run prodserver` to see to serve files.\n\n### Store Logger\n\nThere is also an option to use store-logger which outputs ngrx action history to the console.\nTo set your development mode store logging preference, go to the constant.js file and edit the `STORE_DEV_TOOLS` constant.\nAvailable options are `logger | none`\n\n### HMR (Hot Module Replacement)\n\nHMR mode allows you to update a particular module without reloading the entire application.\nThe current state of your app is also stored in @ngrx/store allowing you to make updates to your\ncode without losing your currently stored state.\n\n### AOT  Don'ts\n\nThe following are some things that will make AOT compile fail.\n\n- 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.\n- Don’t use default exports.\n- Don’t use form.controls.controlName, use form.get(‘controlName’)\n- Don’t use control.errors?.someError, use control.hasError(‘someError’)\n- Don’t use functions in your providers, routes or declarations, export a function and then reference that function name\n- Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public\n\n### Testing\n\nFor unit tests, use `yarn run test` for continuous testing in watch mode and use\n`yarn run test:once` for single test. To view code coverage after running test, open `coverage/html/index.html` in your browser.\n\nFor e2e tests, use `yarn run e2e`. To run unit test and e2e test at the same time, use `yarn run ci`.\n\n### Wiki Links\n\n[Recommended Steps for merging this starter into existing project](https://github.com/qdouble/angular-webpack-starter/wiki/Recommended-Steps-for-Merging-Starter-into-Existing-Project)\n\n### License\n\n[MIT](https://github.com/qdouble/angular-webpack-starter/blob/master/LICENSE)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdouble%2Fangular-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqdouble%2Fangular-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdouble%2Fangular-webpack-starter/lists"}