I recommend using Angular CLI.

This seed only contains the basic structure and files for browser web apps.

Prerequisites

Node.js and npm installed.

Optional: nginx, Docker

Start

Clone or download as a zip file.

$ git clone https://www.github.com/adrian-bueno/angular-seed.git <new-project-name>

Install dependencies:

$ npm install

Development

$ npm start

Your default browser will open. App will be reloaded everytime you modify and safe a file in /src directory.

** When running lite-server, if an error like "Error: watch ENOSPC" appears, run the following command:

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

(Source1, Source2)

Production

$ bash build-prod.sh

Use a server like nginx to serve files inside /dist directory.

More info about deploying Angular apps

How to use nginx

Install

Ubuntu:

$ sudo apt-get install nginx

Open configuration file:

$ sudo gedit /etc/nginx/sites-available/default

Comment or delete default configuration and copy and paste this:

server {
    server_name _;

    listen 80 default_server;
    listen [::]:80 default_server;
    # listen 443 ssl;
    # listen [::]:443 ssl;

    # ssl_certificate /etc/nginx/ssl/nginx.crt;
    # ssl_certificate_key /etc/nginx/ssl/nginx.key;

    # access_log off;
    # error_log off;

    root <global-path-to-project>/dist;

    location / {
        try_files $uri /index.html;
    }
}

(Change <global-path-to-project>)

SSL certificates are only necessary if you want to connect to the server over HTTPS. SSL certificates can be generated with the next command:

$ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/nginx/ssl/nginx.key -out /etc/nginx/ssl/nginx.crt

Note that this certificates are not signed and will be marked as unsafe by browsers.

Finally

$ sudo service nginx restart

Docker

Build image:

$ bash build-prod.sh
$ docker build -t <image-name> .

Execute:

$ docker run -it -p 3000:80 -p 3001:443 <image-name>

Check Dockerfile to see how to change SSL certificates.

Current image size: 16.6 MB

Project structure

.
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.routing.ts
│   │   ├── home
│   │   │   ├── home.component.css
│   │   │   ├── home.component.html
│   │   │   ├── home.component.ts
│   │   │   └── index.ts
│   │   └── shared
│   │       ├── index.ts
│   │       └── services
│   │           ├── global.service.ts
│   │           └── index.ts
│   ├── css
│   │   └── styles.css
│   ├── img
│   │   ├── angular-seed.png
│   │   └── icons
│   │       ├── icon32.png
│   │       ├── icon48.png
│   │       ├── icon64.png
│   │       ├── icon128.png
│   │       ├── icon192.png
│   │       ├── icon256.png
│   │       └── icon512.png
│   ├── favicon.ico
│   ├── index-aot.html
│   ├── index.html
│   ├── main-aot.ts
│   ├── main.ts
│   ├── manifest.json
│   └── systemjs.config.js
├── .dockerignore
├── .gitignore
├── build-prod.sh
├── clean-src.sh
├── Dockerfile
├── LICENSE.md
├── lite-server.config.json
├── nginx.conf
├── package-lock.json
├── package.json
├── README.md
├── rollup.config.js
├── tsconfig-aot.json
└── tsconfig.json

Icon

Original icon made by Freepik from www.flaticon.com

Edited by me.

License

MIT