An example Angular application built with the Angular CLI that includes server side rendering, service worker, native iOS and Android apps using the NativeScript CLI and native MacOS and Windows apps using Electron, Docker, unit and e2e testing, linting, automatic code formatting and CI integration.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
The site can be rendered on a server before serving pages to the client. Server side rendering is achieved using Express and Angular Universal with Express running a node server and @nguniversal/express-engine providing a template engine for Express to render the angular pages.
Run npm run build:ssr && npm run serve:ssr to build client and server bundles and run an express app which will render the angular templates before being sent to the client. Navigate to http://localhost:4000/ to view the SSR version of the app.
The Native desktop app is built using Electron. To view the desktop app simply run npm run start:desktop this will build the browser web bundle and run the Electron app using the build artifacts.
To create an executable for windows run npm run build:desktop:win or for mac run npm run build:desktop:mac. These artifacts will be located in the /build directory.
This project uses Nativescript to create Android and iOS app version of the application using the same code and logic from component|directive|pipes|services etc... but with different template files and logic. A Nativescript Cli project is location in the /nativescript folder and follows the same structure as the nativescript cli so it's possible to run any of the nativescript cli commands.
The files for the angular application are symlink using the symlink.js file from src/app to nativescript/app/app. Any files with .tns in the filename is renamed in the symlink to remove the .tns and it's non-.tns file is not symlinked. So for example src/app/app.component.tns.html is symlined to nativescript/app/app/app.component.html but src/app/app.component.html (the web version of the file) is NOT. This allows files for the web such as html and scss files to be replaced but the nativescript version in the nativescript folder.
To run the nativescript app simply run npm run start:ios or npm run start:android. This command will run the symlink command before launch the application using the nativescript cli.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
This repo uses Commitizen CLI and Conventional Changelog to create commits and generate changelogs. Instead of running git commit run git cz and follow the prompts. Changelogs will then be generated when creating new releases by running npm run release.
Run npm run release to create a new release. This will use Standard Version to create a new release. Standard Version will generate / update the changelog based on commits generated using Commitizen CLI, update the version number following semantic versioning rules and then commit and tag the commit for the release. Simply run git push --follow-tags origin master.
To build a Docker image locally run first build the client and server bundles as well as the express app by running npm run build:ssr. Then to build the image run:
docker build -t angular-native-seed:latest .
To run the docker image simply do:
docker run -d -p 4000:4000 angular-native-seed:latest
Navigate to http://localhost:4000/ to view the server side rendered version of the app running in a Docker image
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.