Introduction

In this article, we will dive deep into a new Angular generator called ngX-Rocket. ngX-Rocket is an Angular 5+ enterprise project-generator based on the Angular-CLI with best practices from the community. It allows developers to easily make applications with a lot of functionality, right out of the box. Among it’s core features is PWA- (Progressive Web App) and Cordova-support, a scalable starter template, coding guides and much, much more.

Version 4.2 is the latest version at the time of writing. You can look over the changes in this Medium-article. I will also suggest following ngX-Rocket’ github-repo. to keep an overview of further changes and improvements.

Benefits vs. Bare A ngular CLI App

The most of you are probably already familiar with the Angular CLI. Like ngX-Rocket, Angular CLI is a command-line interface for creating quick-start Angular projects and automate your development workflow. So why would you choose ngX-Rocket instead?

The github-page of the project highlights some reasons why choosing this generator over the Angular CLI might be a good idea:

A complete starter template: example app-structure tailored for scalability, with examples and boilerplate code for every common thing needed in enterprise projects, such as unit tests, routing, authentication, HTTPS service extensions, i18n support with dynamic language change and automatic user language detection. Improved tooling: SCSS & HTML linting, stricter TSLint rules, markdown-based local wiki server for documentation, automated localizable strings extraction, corporate proxy support, Cordova integration. Extensive base documentation: coding guides for TypeScript/SCSS/HTML, Angular onboarding guide, corporate proxy and other tools configuration and usage. Ready-to-use UI components: focus on your app, not on the stack! Choose between a Bootstrap 4, Ionic or Angular Material based UI with nicely looking, responsive starter templates. Mobile app support: choose between a web app, a mobile app (using Cordova) or both using the same code base. API proxy example setup: develop and debug faster using any remote server. Generator output customization: with the provided add-on support, start multiple projects even faster by plugging in additions that fit your needs, such as your enterprise theme, SSO authentication, services integrations.

Creating a new project

Prerequisites

Before you can use the ngX -Rocket CLI, you need to have Node.js 6.9.0 and npm 3.0.0 or higher installed on your system. You can download the latest version of Node.js for your operating system on Node’ official site.

If you already have Node.js and npm installed, verify their versions by running:

$ node -v # => displays node version

$ npm -v # => displays npm version

Once you have Node.js installed, you can use the npm command to install TypeScript:

$ npm install -g typescript

You don’t technically need TypeScript, but it’s highly recommended by the Angular team, so I recommend you install it to make working with Angular as comfortable as possible.

Now that you have Node.js and TypeScript installed, you can install the ngX-Rocket CLI by running:

$ npm i -g generator-ngx-rocket

This will install the ngX-Rocket generator globally on your system. You can verify the installation by using the following command:

$ ngx version # => displays ngx-rocket version

Create the app

The first thing we need to do is creating a folder for our new project, since the generator doesn’t do this by default:

$ mkdir ngx-starter

Navigate inside the newly created folder:

$ cd ngx-starter

And initialize a new ngx project:

$ ngx new

When initializing a new project, you will be prompted with the following options:

$ ngx new $ What's the name of your app? (ngx app) $ What kind of app do you want to create?

> (*) Web app

> ( ) Mobile app(using Cordova) $ Do you want a progressive web app? (with manifest and service worker) (Y/n) $ Which UI framework do you want?

> Bootstrap (more website-oriented)

Angular Material (more website-oriented)

Ionic (more mobile-oriented) $ Do you want authentication? (Y/n) $ Do you want lazy loading? (y/N) $ Do you want analytics support (with Angularatstics2)? (y/N)

This will create a new ngX-Rocket application inside you’re chosen directory. The CLI will download all required NPM packages and set everything up.

You can now run the app:

Note! You need to run the app using npm start instead of ng serve since it doesn’t use the backend proxy configuration by default.

$ npm start

Let’s head over to localhost:4200 to make sure that everything is working as expected so far.

Application Structure

dist/ => app production build

docs/ => project docs and coding guides

e2e/ => end-to-end tests

src/ => project source code

|- app/ => app components

| |- core/ => core module (singleton services and

| | single-use components)

| |- shared/ => shared module (common components,

| | directives and pipes)

| |- app.component.* => app root component (shell)

| |- app.module.ts => app root module definition

| |- app-routing.module.ts => app routes

| +- ... => additional modules and components

|- assets/ => app assets (images, fonts, sounds...)

|- environments/ => values for various build environments

|- theme/ => app global scss variables and theme

|- translations/ => translation files

|- index.html => html entry point

|- main.scss => global style entry point

|- main.ts => app entry point

|- polyfills.ts => polyfills needed by Angular

+- test.ts => unit tests entry point

reports/ => test and coverage reports

proxy.conf.js => backend proxy configuration

Documentation Server

The docs contains a comprehensive overview of best practises in Angular. You can display the documentation in a separate server by running the npm run docs command. You’re browser will open at http://localhost:4040 and display the project documentation.

HttpClient extension

You can cache any HTTP request by calling the cache() before making your request:

this.httpClient

.cache()

.get('https://myapi.com');

Proxy-server

To ease development, they’ve sat up a backend proxy which redirects API calls to whatever URL and port you want. This allows you to:

Develop frontend features without the need to run an API backend locally Use a local development server without CORS issues Debug frontend code with data from a remote testing platform directly

Customization

One of the things I love about this Angular starter project is how easy it is to add functionality. Here’s an overview of some customizations I like to do.

docs/

e2e/

src/

|- app/

| |- core/

| | |- data => mock services

| | |- json => json files exported for mocks

| | |- services => singleton services

| |

| |- shared/

| | |- directives => directives used across the app

| | |- models => models used across the app

| | |- pipes => pipes used across the app

| | |- components => components used across the app

| |

| |- modules => collection of all the modules

| | |- components => components which are shared across

| | | the module

| | |- pages => pages the module consist of

| |

| |- app.component.*

| |- app.module.ts

| |- app-routing.module.ts

| +- ...

|- assets/

|- environments/

|- theme/

|- translations/

|- index.html

|- main.scss

|- main.ts

|- polyfills.ts

+- test.ts

reports/

proxy.conf.js

Conclusion