https://github.com/rangle/angular2-starter
Angular 2 Starter Repo
https://github.com/rangle/angular2-starter
Last synced: about 1 year ago
JSON representation
Angular 2 Starter Repo
- Host: GitHub
- URL: https://github.com/rangle/angular2-starter
- Owner: rangle
- License: mit
- Created: 2016-03-31T17:35:35.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-02-23T08:03:52.000Z (about 5 years ago)
- Last Synced: 2025-03-24T14:13:29.792Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 726 KB
- Stars: 60
- Watchers: 20
- Forks: 36
- Open Issues: 100
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/rangle/angular2-starter)
# Angular 2/TypeScript/Webpack Starter
This is the initial version of our starter project using Angular 2.x, TypeScript and Webpack to tie it all together.
## Getting Started
Use our [starter script](http://npm.im/rangle-starter), with
`angular2-starter` as the `techStack` argument.
## npm scripts
> To see all available scripts:
```bash
$ npm run
```
### Dev
```bash
$ npm run dev
```
This runs a development mode server with live reload etc.
Open `http://localhost:8080` in your browser.
### Production
```bash
$ npm install
$ npm start
```
or
```bash
$ npm run build
$ npm start
```
This runs a production-ready express server that serves up a bundled and
minified version of the client.
Note: AoT is enabled by default. To disable AoT, use `npm run build:jit`.
Open `http://localhost:8080` in your browser.
### Tests
#### Single Run (with linting and coverage)
```bash
$ npm test
# or
$ npm t
```
#### Watch Files
```bash
$ npm run test:watch
```
#### Coverage
```bash
$ npm run cover
```
## Webpack
Configurations:
- For dev & jit: `webpack.config.js`
- For production & AoT: `webpack-aot.config.js`
The webpack directory consists of:
- `loaders.js`: definitions for all the loaders used in this project
- `plugins.js`: definitions for all the plugins used in this project. These are grouped based on `process.env`.
- `postcss.js`: configuration for the postcss plugin.
### Bundle Profiling
If you want to analyze the contents and size of the production bundles you can run one of the following commands:
- `npm run profile-build` for AoT builds
- `npm run profile-build:jit` for JiT builds
These commands produce a `stats.json` manifest in the project root and also opens a web page using `webpack-bundle-analyzer` so that you can parse it visually.
#### Connecting to remote APIs
Both the devmode and production servers provide a way to proxy requests to
remote HTTP APIs. This can be useful for working around CORS issues when
developing your software.
Edit [this file](server/proxy-config.js) to mount such APIs at a given path.
## Improvements
This is an initial version of this setup and will be expanded in the future. Refer to the [issues section](https://github.com/rangle/rangle-starter/issues) to see what needs to be done, or create a [new one](https://github.com/rangle/rangle-starter/issues/new).
Issues for this particular starter project are tagged with the 'ng2' label.
## If something doesn't work
We centralize issue management for all rangle starters in the [rangle-starter](https://github.com/rangle/rangle-starter) repository, to help us keep things consistent.
Refer to the [issues section](https://github.com/rangle/rangle-starter/issues) to see if this has already been logged. Otherwise create a [new issue](https://github.com/rangle/rangle-starter/issues/new).
Be sure to tag your new issue with the 'ng2' label so we can see which starter you're filing it for.
## Example Application
An example app using this starter can be found [here](https://github.com/rangle/angular2-starter-example).
## License
Copyright (c) 2016 rangle.io
[MIT License][MIT]
[MIT]: ./LICENSE "Mit License"