{"id":19810757,"url":"https://github.com/nzick/angular4-webpack-starter","last_synced_at":"2026-05-06T19:41:14.250Z","repository":{"id":143973278,"uuid":"85968893","full_name":"nzick/angular4-webpack-starter","owner":"nzick","description":"Angular 4️⃣ Webpack Starter Project with HMR, Lazy Loading, Karma, Protractor, Jasmine, Webpack2, TSLint, Autoprefix and Typedoc.","archived":false,"fork":false,"pushed_at":"2018-01-04T15:25:51.000Z","size":89,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T06:49:19.695Z","etag":null,"topics":["angular","hmr","karma","lazy-loading","protractor","typedoc","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nzick.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-23T15:55:38.000Z","updated_at":"2017-03-23T16:41:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"624bb68c-ecd9-42cc-b0f9-a60805625d01","html_url":"https://github.com/nzick/angular4-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/nzick%2Fangular4-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzick%2Fangular4-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzick%2Fangular4-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzick%2Fangular4-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nzick","download_url":"https://codeload.github.com/nzick/angular4-webpack-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241156445,"owners_count":19919338,"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","hmr","karma","lazy-loading","protractor","typedoc","webpack2"],"created_at":"2024-11-12T09:23:15.859Z","updated_at":"2026-05-06T19:41:14.219Z","avatar_url":"https://github.com/nzick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 4 Webpack Starter ![coverage-shield-badge-1](https://img.shields.io/badge/coverage-100%25-brightgreen.svg) [![Build Status](https://travis-ci.org/nzick/angular4-webpack-starter.svg?branch=master)](https://travis-ci.org/nzick/angular4-webpack-starter)\n\nThis `angular` starter kit contains everything you need to start building a robust app.\n\n### Install\n\n#### Prerequisites\n\n- node \u003e= 6, `node -v`\n- npm \u003e= 3, `npm -v`\n- yarn installed `npm install -g yarn`\n\n#### Clone and Start coding _it_\n\n```sh\n$ git clone https://github.com/nzick/angular4-webpack-starter.git angular4-webpack-starter\n$ cd angular4-webpack-starter\n$ rm -rf .git\n$ yarn install\n$ npm start\n```\nYour app will be available at localhost:8000 and will update every change you made.\n\n#### Build and Ship _it_\n\n```sh\n# Build for Development will be found in ./dist\n$ npm run build:dev\n# Build for Production will be found in ./dist\n$ npm run build:prod\n```\n\n#### Test _it_\n\n```sh\n# Run Unit Tests. Will also add shield-badge to your README.md with line coverage percentage\n$ npm run test\n# Run E2E Tests\n$ npm run e2e\n```\n\nYou can change the badge coverage type in `./config/karma.conf.js`.\nVisit [istanbul-reporter-shield-badge](https://www.npmjs.com/package/istanbul-reporter-shield-badge) for more information.\n\n#### Document _it_\n\n```sh\n# Runs Typedoc. Result will be found at ./docs\n$ gulp docs\n```\n\n#### Log _it_\n\n```sh\n# Will update ./CHANGELOG.md in root folder\n$ gulp changelog\n```\n\n#### _it_ loads it lazy\n\nIn `src/app/components` you'll find a example on how to use lazy loading in angular. \n\nJust add a new route to the `app.routing.module` like this:\n\n```ts\n/* app.routing.module.ts */\nconst routes: Routes = [\n { path: '', redirectTo: '/home', pathMatch: 'full',\n // ... other paths ...\n { path: 'component-path', loadChildren: './+component/component.module#ComponentModule' }\n];\n```\n\nThan add a new angular component like this:\n\n```ts\n/* demo.component.ts */\n@Component({\n  selector: 'demo',\n  templateUrl: 'demo.component.html'\n})\n\nexport class DemoComponent { }\n```\n\nDon't forget to add a module like this:\n\n```ts\n/* demo.module.ts */\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n// Import your component route\nimport { DemoComponent, routes } from './';\n\n@NgModule({\n  declarations: [ DemoComponent ],\n  imports: [\n    // add it to your module import\n    RouterModule.forChild(routes)\n  ]\n})\n\nexport class DemoModule { }\n```\n\n_That's it!_\n\n#### _it_ Supports every Browser\n\nThanks to `autoprefixer` we can really focus on the important stuff.\nWebpack will add all required css tags.\n\n| Browser | Version |\n| :--- | :--- |\n| Chrome | \u003e= 48 |\n| Firefox | \u003e= 44 |\n| Safari | \u003e= 6 |\n| Explorer | \u003e= 11 |\n| Edge | \u003e= 13 |\n| Opera | \u003e= 35 |\n| Android | \u003e= 4|\n| iOS | \u003e= 8 |\n\n### Contributing \n\nYou're very welcome to contribute. Just raise an issue and make a PR.\n\n### License \n\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzick%2Fangular4-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnzick%2Fangular4-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzick%2Fangular4-webpack-starter/lists"}