This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using a Webpack 4 for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

Best practices in file and application organization for Angular.

Ready to go build system using Webpack for working with TypeScript.

Angular examples that are ready to go when experimenting with Angular.

A great Angular seed repo for anyone who wants to start their project.

Ahead of Time (AoT) compile for rapid page loads of your production builds.

File Structure

We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:

Getting Started

Dependencies

If you have nvm installed, which is highly recommended (brew install nvm) you can do a nvm install --lts && nvm use in $ to run with the latest Node LTS. You can also have this zsh done for you automatically

Once you have those, you should install these globals with npm install --global:

Running the app

After you have installed all dependencies you can now run the app. Run npm run server to start a local server using webpack-dev-server which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://0.0.0.0:3000 (or if you prefer IPv6, if you're using express server, then it's http://[::1]:3000/).

server

# development
npm run server
# production
npm run build:prod
npm run server:prod

Other commands

build files

# development
npm run build:dev
# production (jit)
npm run build:prod
# AoT
npm run build:aot

In src/app/app.module.ts add underneath the other import statements: import '../styles/styles.scss';

Contributing

You can include more examples as components but they must introduce a new concept such as Home component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request

TypeScript

To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.

Use latest TypeScript compiler

TypeScript 2.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.

often happens when you're behind proxy and proxy wasn't configured in the npm as it tries to download binary package from the github and if it fails to do so, it will try to compile node-sass from the source codes

Support, Questions, or Feedback

Deployment

Docker

To run project you only need host machine with operating system with installed git (to clone this repo)
and docker and thats all - any other software is not needed
(other software like node.js etc. will be automatically downloaded and installed inside docker container during build step based on dockerfile).

Install docker

MacOS:

brew cask install docker

And run docker by Mac bottom menu> launchpad > docker (on first run docker will ask you about password)

And in your /etc/hosts file (linux) add line: 127.0.0.1 angular-starter.your-domain.com or in yor hosting add
folowing DNS record (wildchar * is handy because when you add new sub-domain in future, you don't need to touch/add any DNS record)

Sonar Host URL configuration:
Update sonar-project.properties file for the property sonar.host.url to point to your SonarQube server. By default this assumes that the SonarQube server is running locally using the default port

sonar.host.url=<Sonar Host URL and Port>

Run the unit tests with sonar reporter enabled

npm run test:sonar

The test results collected in the results folder in the sonar compatible format