Powerful Starterkit combining all latest advanced Angular features. Strict typescript mode and preventing pushing untested code. Read more for all features.

• ⭐️ Angular 13
• 🎁 Monorepo with NX.dev
• 😍 IVY by default
• ⭐️ NGRX store (implemented according ngrx.io)
• 😴 Lazy Loading
• ⭐️ HttpInterceptor
• ⭐️ NGX-Translate (assets/i18n/{locale}.json)
• 🚀 SSR (Server Side Rendering)
• 🚀 Prerendering (for SEO and static HTML generation)
• 😍 PWA (Progressive Web App)
• 😍 Service Worker detects new build versions
• 🤓 Unit Test (Jest)
• 🕹️ E2E Test / Reports (Playwright / Cucumber)
• 🚀 Visual Testing (Storybook / Playwright)
• 📖 Storybook
• 🖌️ Tailwind
• 🎯 Git hooks (husky)
• 🤩 Ability to Mock data (mockServer) (Docker)
• 🎰 WebPush integration (mockServer and PWA)

• Install modules: npm ci
• MAC: npm run certificate:generate:mac && nx run <project>:serve [options]
• Windows: remove ssl from serve inside 'project.json' and nx run <project>:serve [options]

NRWL nx.dev monorepo, see all commands

• nx serve <project> [options]
• nx run <project>:serve [options]

Because we are running localhost on SSL (https), you will need to generate a certificate and key, and place them in a folder called build. Run npm run certificate:generate:mac to create the required certificates and place them in the required folder.

Git hooks are active, which means you only can commit when there are no linting errors, and all unit-tests succeeds. Other commmands can be implemented with husky.

When using nvm, the default node should be > 14. nvm alias stable default

NRWL nx.dev monorepo, see all commands

• nx build <project> [options] - normal production build
• nx run <project>:build [options] - production build with files already gzipped
• nx run <project>:build-prerender [options] - with prerendering all routes
• nx run <project>:build-ssr [options]- production build with Server Side Rendering

Ivy is set to true by default and works with SSR / Prerendering

This project comes with built-in SSR functionality. The effect of SSR will be valuable on larger projects or slower internet connections, run Google Audit with slow network to see the difference.

• For Serving - nx run <project>:serve-ssr [options]
• For Building - nx run <project>:build-ssr [options]

• For Serving - nx run <project>:serve-prerender [options]
• For Building - nx run <project>:build-prerender [options]

• nx run <project>:lint [options] - Linting application
• nx run <project>:test [options] - Unit test Watcher (only runs tests for changed files)
• nx run <project>:e2e [options] - End to End test with Playwright and reports with Cucumber

Run nx run <project>:test [options to execute the unit tests via Jest. Run npm run affected:test to execute a all unit tests for affected libs and apps.

Both scripts will provide a Code Coverage file, which can be found in './test-reports/<apps|libs>/<project>/coverage'

Run nx run <project>:e2e [options] to execute the E2E Playwright tests.

This test will provide an report which will be shown at the end of all tests. It can also be found in ./test-reports/<apps|libs>/<project-e2e>. When tests fails, there will be a screenshot attached to the scenario where the test has failed.

For each component you create, you can add a storybook build and serve to your project, and call these events for building and serving

Within each lib / component you can create a 'visual-regression' folder which contains a spec file, which you need to connect to your storybook component. From there, you can add various test and scenario's from storybook and create a snapshot.

As of version 1.1.0 it is possible to setup a mockServer with nx run mockserver:serve. Port will be https://localhost:4000 and the different status can be set at https://localhost:4000/mocking. All data can be setup in './mockServer'. Examples of API, JSON and images are added. As of version 2.1.0 the mockServer is running through Docker and runs with HTTPS/HTTP2

Do a POST call to https://localhost:4000/notification to create a mocked push notification. Best can be tested after nx run <project>:build [options] and then serve the correct folder as http-server. The application will then be available at https://localhost:8081