angular9-example-app

Angular Example App

Example app with Angular 9 + Angular CLI + Angular Universal + i18n + Firebase

�� �� �� �� �� �� �� ��

Base project made with much ❤️ . Contains CRUD, patterns, generated library, and much more!



Report bug · Request feature

Table of contents

• Status
• What's included
• Quick start
• Bugs and feature requests
• Apply this to your project
• Contributing
• Creators
• Thanks
• Copyright and license

Status

What's included

• CRUD: create, update and remove heroes with Firebase
• Angular Universal (SSR)
• Use of StateTransferModule to share state between browser and server
• Security Headers using helmet.
• Internationalization with the official i18n. Separated builds for english and spanish.
• Lazy loading modules
• Service Workers enabled!
• More logical directory structure (fromhere)
• Basic example library
• Following the best practices!
• Search bar, to look for heroes
• Custom loading page
• Example of Angular Resolver for Hero Detail
• Lazy loading images with ng-lazyload-image
• Modal and toasts (snakbar)!
• Scroll restoration and anchor examples
• Responsive layout (flex layout module)
• SASS (most common used functions and mixins) and BEM styles
• Animations with ng-animate
• Angular Pipes
• Interceptors and Events (Progress bar active, if a request is pending)
• Scroll to first invalid input in forms.(ngx-scroll-to-first-invalid)
• Modernizr (browser features detection)
• Browser filter (Bowser) because of IE ^^
• Sentry! (logs every error in the app)
• Google Tag Manager
• ES6 Promises and Observables
• Unit tests with Jasmine and Karma including code coverage. Use ofng-bullet,karma-mocha-reporter andng-mocks
• End-to-end tests with Protractor, (moving to Cypress)

Angular Universal and i18n

This project is using firebase and Angular Universal with the official internationalization. You cannavigate through every language and reload (and share) every page in the application without losingcontext. This is very useful for SEO purposes and you almost have a ready for production app. If youwant to translate the messages you can use this awesome tool,Tiny Translator or followthis tutorial.

I've created a medium post where you can find a tutorial to apply this concepts to your own project.Check it here,and let me know what do you think.

Firebase

This repo is using Firebase. We use Cloud Firestore and Cloud Storage to handle CRUD operations overthe heroes and to store their images.

Travis CI

We use Travis CI to run this tasks in order:

• Linter
• Unit tests
• End to end tests
• Build for production of browser and server
• Validate that server generated using curl
• Sonar scanner

Quick start

WARNING

Verify that you are running node 12.4.0 by running node -v in a terminal/console window. Olderversions produce errors, but newer versions are fine.

npm i
npm start

Bugs and feature requests

Have a bug or a feature request? Please first read theissue guidelinesand search for existing and closed issues. If your problem or idea is not addressed yet,please open a new issue.

Contributing

Please read through ourcontributing guidelines.Included are directions for opening issues, coding standards, and notes on development.

Moreover, all HTML and CSS should conform to the Code Guide,maintained by Ismael Ramos.

Editor preferences are available in theeditor config foreasy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Creators

Ismael Ramos

• https://github.com/ismaestro

Thanks

Thanks to all contributors and their support.

If you have an idea or you want to do something, tell me or just do it! I'm always happy to hearyour feedback!

Copyright and license

Code and documentation copyright 2020 the authors. Code released under theMIT License.

Enjoy ��