1566620027

Getting Started with Nx in Angular

Want to learn more about creating great Angular web apps? It all starts out with Kendo UI for Angular - a complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

We on the Kendo UI for Angular team are committed to bringing you the latest tips and tricks in the world of Angular development. We hope you enjoy the post!

Nrwl Extensions (Nx) is a project started by Google developers. It is an open-source project that provides a set of extensions (schematics and builders) to extend the functionality of the Angular CLI. It provides commands for creating workspaces that contain multiple projects. Nrwl Extensions not only provides commands for managing complex and robust Angular projects but also for creating full-stack projects using Express and Nest.js.

In this article, we’ll look at how you can create and run a full-stack application using Nest.js and Angular. Both projects will be managed by Nx.

Before we get started, this article requires a basic understanding of Angular and Nest.js.

Initializing Application

Nrwl doesn’t replace the Angular CLI — rather it extends the functionality of the CLI with commands to create multiple apps within a workspace. To get started working with Nrwl, you’ll have to install the Angular CLI first. Run the following command to install the CLI:

	npm install -g @angular/cli

Bash

To use Nrwl, you have the options of installing it globally by running the following command:

	npm install -g @nrwl/schematics

Bash

Or you could leverage the power of npx to create a workspace using the create-nx-workspace:

	npx create-nx-workspace my-workspace

Bash

If you wish to integrate Nx into an existing Angular application, run the following command in a terminal within your project folder:

	ng add @nrwl/schematics

Bash

To begin creating our project, we’ll create a workspace using the create-nx-workspace command. Run the following command to create a workspace called fullstack-angular.

	create-nx-workspace fullstack-angular

Bash

This command will generate a workspace with no bootstrapped applications within. A workspace provides setup for listing using tslint, editor support for linting using tsconfig.json and prettier for code formatting.

It also provides a jest config file for quick testing. Jest is a testing framework by Facebook.

Next, we’ll see how we can create and serve a frontend application that runs on Angular using the CLI and Nx.

Creating the Frontend Application

Nx is a smart tool that supports a mono-repo development style. It provides a way to allow the projects within the workspace to interact with each other. With Nx you can manage different project types within the workspace, ranging from libraries to applications.

Nx provides a visualization tool that lets you see how the projects within your workspace are connected. You can access this tool by running the following command:

	npm dep-graph

The screenshot above shows how the projects in the workspace are connected. Next we’ll create the frontend application using the CLI.

Run the following command on a terminal within the project folder:

	ng generate application my-store

After running this command, you’ll see different prompts. Let’s walk through each one:

	? In which directory should the application be generated?

The first command asks where you’d like your application to be generated. It’s best to leave this blank so your application will be generated within the apps folder in the workspace.

	? Would you like to add Angular routing? (y/N)

The next prompt is about routing. If you wish to create routes in your application, reply with y or you can skip this prompt.

	? Which stylesheet format would you like to use? (Use arrowkeys)
	❯ CSS
	  SCSS   [ http://sass-lang.com   ]
	  SASS   [ http://sass-lang.com   ]
	  LESS   [ http://lesscss.org     ]
	  Stylus [ http://stylus-lang.com ]

The next prompt is asking about your stylesheet of choice. If you prefer working with pre-processors, you can choose whichever you’re most comfortable with.

	? Which Unit Test Runner would you like to use for the application? (Use arrow keys)
	  Karma [ https://karma-runner.github.io ]
	❯ Jest   [ https://jestjs.io ]

Here you have to choose the unit test runner you want to use with your application. Jest has been configured for the workspace already, so I’d recommend it. But you can still choose Karma if you’re more comfortable with it. It’s great to have options and Nx does well providing these options.

	? Which E2E Test Runner would you like to use for the application? (Use arrow keys)
	❯ Cypress       [ https://www.cypress.io ]
	  Protractor [ https://www.protractortest.org ]

Then you have the e2e prompt. You can use either of them, whichever suits your application.

Finally, there’s the tags prompt, which you can leave blank. This prompt is asking for tags you wish to add that will be used for linting in your application:

? Which tags would you like to add to the application? (used for linting)

Again, you can leave this blank.

After the prompts, the command generates an Angular application within the apps folder, it also generates an e2e folder for running end-to-end testing for the application. You can start the application by running the command below:

ng serve my-store

This should start your application on http://localhost:4200.

Nx provides a command to integrate state management into our application using @ngrx/store. Running the command below will generate actions, effects, and actionTypes for populating your store and a reducer for acting on the dispatched actions. To read more on using @ngrx/store, you can visit their official website and read through their robust documentation.

Run the following command to add state management to the my-store application:

ng generate ngrx todos --module=apps/my-store/src/app/app.module.ts

The command above tells the CLI to generate an ngrx store named todos in the my-store app module. If you check your apps/my-store/app folder, you should see a newly generated folder named +state. It contains files for actions, effects, selectors, and reducer. It also contains spec files to test them.

Creating the Backend Application

The backend application will be making use of Nest.js. According to the documentation:

Nx offers two frameworks for creating backend applications: Express and Next.js. We’ll be going with Nest.js because of how similar it is to Angular and how it integrates seamlessly with Angular applications. It breeds familiarity because Nest.js uses similar techniques for development. They use modules, providers, and pipes just like Angular, and controllers in place of components.

With Nx, you can create a backend application that communicates seamlessly with the frontend application using the following command:

ng generate node-app store-api --frontend-project=my-store

The command above creates a Node application called store-api and creates a proxy to the my-store Angular application. This makes it easy for the Angular application to communicate with the server.

By running this command, you’ll be faced with some prompts asking about your framework of choice, the unit testing framework, etc. The framework for this project is Nest.js, so ensure you select that option.

After the command has been run successfully, start the server by running the command below:

	ng serve store-api

Then you can visit http://localhost:3333/api. Your view should be similar to the screenshot below:

Making Requests

Let’s see how we can make requests to the backend application. Nx made this easier by creating a proxy to the backend. Within the my-store app, there’s a file proxy.conf.json, and within the file there’s the setup for proxying requests:

	{
	  "/api": {
	    "target": "http://localhost:3333",
	    "secure": false
	  }
	}

Which means, if we want to communicate with the backend, we’ll make requests to /api endpoint and it’ll proxy to [http://localhost:3333](http://localhost:3333 "http://localhost:3333").

Next, let’s update the Angular application to fetch items from the backend(store-api). Open the apps/my-store/src/app/app.component.ts file and update it to make a request to the server using the HttpClient:

	// apps/my-store/src/app/app.component.ts
	
	import { Component, OnInit } from '@angular/core';
	import { HttpClient } from '@angular/common/http'
	import { Observable } from 'rxjs';
	
	interface Product{
	  name: String;
	  price: Number;
	  stock: Number
	}
	
	@Component({
	  selector: 'fullstack-angular-root',
	  templateUrl: './app.component.html',
	  styleUrls: ['./app.component.css']
	})
	
	export class AppComponent {
	  products: Observable<Product[]>;
	
	  constructor(private http: HttpClient){
	    this.products = this.http.get<Product[]>('/api/products');
	  }
	}

Then we’ll update the view template to render the list of products. Open the apps/my-store/src/app/app.component.html file and copy the snippet below into the file:

	<section>
	  <ul>
	    <li *ngFor="let product of products | async">
	      Name: <span>{{product.name}}</span> <br/>
	      Price: <span>{{product.price}}</span><br/>
	      Stock: <span>{{product.stock}}</span>
	      <hr>
	    </li>
	  </ul>
	</section>

Next, we’ll import the HttpClientModule into the project’s app.module.ts file. Open the file and include the HttpClientModule in the imports array.

	// apps/my-store/src/app/app.module.ts
	
	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	
	// ... others imports
	
	import { HttpClientModule } from '@angular/common/http';
	
	
	@NgModule({
	  declarations: [AppComponent],
	  imports: [
	    // ...other imports,
	    HttpClientModule,
	  ],
	  providers: [],
	  bootstrap: [AppComponent]
	})
	export class AppModule {}

Creating the Products Endpoint

In the Angular application, we’re making a request to the api/products endpoint. This route hasn’t been created in the node application. Let’s update the app controller to create a products route that returns a list of products.

Open the apps/store-api/src/app/app.controller.ts file and update it to be similar to the code below:

	// apps/store-api/src/app/app.controller.ts
	
	import { Controller, Get } from '@nestjs/common';
	
	import { AppService } from './app.service';
	
	@Controller()
	export class AppController {
	  constructor(private readonly appService: AppService) {}
	
	  @Get('products')
	  getData() {
	    return this.appService.getData();
	  }
	}

Then update the service file (app.service.ts) to return the list of products:

	import { Injectable } from '@nestjs/common';
	
	interface Product{
	  name: String;
	  price: Number;
	  stock: Number
	}
	
	@Injectable()
	export class AppService {
	  private products: Product[] = [
	    {
	      name: 'First product',
	      price: 22.45,
	      stock: 10
	    },
	    {
	      name: 'Second product',
	      price: 12.45,
	      stock: 5
	    }
	  ]
	  
	  getData(): Product[] {
	    return this.products;
	  }
	}

Start the node backend by running the following command (ng serve store-api) and the frontend using ng serve my-store. Navigate to http://localhost:4200 and you should see something similar to the screenshot below:

We’ve successfully set up a full-stack application with the help of Nrwl extensions. Nx is also useful for creating libraries — you can set up these libraries to communicate with your backend and frontend applications. You can also set up a library that can be easily published to npm. To learn more about creating libraries using Nx, visit their official documentation here.

Conclusion

In this article, we’ve seen how we can use Nx to create a full-stack application. The application will feature a frontend application built with Angular and a backend application that uses Nest.js. Nx provides extensions to the Angular CLI that help us manage workspaces that can feature multiple applications and libraries. These workspaces feature setup that supports linting using tslint and prettier for code formatting. Visit the project’s official documentation to read more about the project.

What is GEEK

Buddha Community

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

Installing Node.js and npm
Installing Angular CLI
Creating workspace
Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

Node.js
npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

npm -v

Installing Angular CLI

Open Terminal/Command Prompt
To install Angular CLI, run the below command:

npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

Using CLI
Using Visual Studio Code

1. Using CLI

To create a workspace:

Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

Ng new YourAppName

After running this command, it will prompt you to select from various options about the CSS and other functionalities.

To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Roberta Ward

1595337024

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 3

In Part 3 of this tutorial, we create the passenger info and flight search feature libraries. We use the generate project tool to create the mobile booking application and its test project. Finally, we create a mobile version of the flight search component template.

This tutorial is part of the Angular Architectural Patterns series.

In Part 2 of this tutorial, we used the generate project tool to generate the booking data access and shared data access workspace libraries with NgRx Store and Effects. We extracted a shared environments library and hooked everything up to the booking feature shell library.

In this part of the tutorial, we’re going to create the passenger info and flight search feature libraries, each with a routed component. After that, we’ll create the mobile booking application project and its end-to-end test project. Finally, we’ll use builder file replacement to create a mobile version of the flight search component template.

THIS AD MAKES CONTENT FREE. HIDE

Passenger info feature library#

Let’s create our first feature library, the passenger info feature which is part of the booking domain.

npm run generate-project -- library feature feature-passenger-info --scope=booking --npm-scope=nrwl-airlines
# or
yarn generate-project library feature feature-passenger-info --scope=booking --npm-scope=nrwl-airlines
<>

Generate passenger info feature library.

After generating the project using the previous commands and parameters, we get this file and folder structure.

libs/booking/feature-passenger-info
├── src
│   ├── lib
│   │   ├── passenger-info
│   │   │   ├── passenger-info.component.css
│   │   │   ├── passenger-info.component.html
│   │   │   ├── passenger-info.component.spec.ts
│   │   │   └── passenger-info.component.ts
│   │   ├── booking-feature-passenger-info.module.spec.ts
│   │   └── booking-feature-passenger-info.module.ts
│   ├── index.ts
│   └── test.ts
├── README.md
├── karma.conf.js
├── tsconfig.lib.json
├── tsconfig.spec.json
└── tslint.json
<>

The file and folder structure of the booking passenger info feature library.

This looks a little different from a feature shell library and a data access library.

After the generate project tool has created the workspace library with an entry point Angular module, it runs the commands in the next listing.

The generate project tool also removed the --no-common-module flag from the ng generate module command we saw earlier, since this Angular module will be declaring components.

ng generate component passenger-info --project=booking-feature-passenger-info --module=booking-feature-passenger-info.module.ts --display-block
<>

Generate component command run when generating a feature library.

Let’s look at the Angular module our tool has generated.

// booking-feature-passenger-info.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import {
  PassengerInfoComponent,
} from './passenger-info/passenger-info.component';

@NgModule({
  declarations: [PassengerInfoComponent],
  imports: [
    CommonModule,
  ],
})
export class BookingFeaturePassengerInfoModule {}
<>

Initial entry point Angular module in the passenger info feature library.

The entry point Angular module shown in the previous listing is a good starting point. We need to set up the feature routing for our component though. This is done in the next listing.

// booking-feature-passenger-info.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {
  PassengerInfoComponent,
} from './passenger-info/passenger-info.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: PassengerInfoComponent,
  },
];

@NgModule({
  declarations: [PassengerInfoComponent],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
  ],
})
export class BookingFeaturePassengerInfoModule {}
<>

Passenger info feature Angular module with route configuration for its entry point component.

Nice! Now we’ve prepared our feature library to be hooked up to the feature shell library’s routing configuration.

The generated component is what you’d expect. What it’d display in a real booking application is not really important for the purpose of this article.

Let’s hook up this feature to the booking application’s routing by adding a route configuration to the booking feature shell Angular module as seen here.

#angular #angular-cli #angular-workspace #monorepo #nx #series-angular-architectural-patterns

Roberta Ward

1593061105

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 2

In Part 1 of this tutorial, we set up the booking desktop application project, a project for its end-to-end test suite, and the booking feature shell workspace library.

In this part, we’ll set up our custom generate project tool to automate the steps we did manually in Part 1. We’ll use it to create the shared and booking data acess libraries with NgRx Store, NgRx Effects, NgRx Schematics, and NgRx Store DevTools.

To configure the data access libraries while keeping the flow of dependencies correct, we’ll extract a shared environments library. Data access will be hooked up to the booking feature shell library.

#angular #angular-cli #angular-workspace #monorepo #nx #series-angular-architectural-patterns #ngrx

Roberta Ward

1595333359

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 5

In the final part of this tutorial, we create the seatmap data access, seat listing feature, shared buttons UI, and shared formatting utilities library. Finally, we compare our approach with the full Nx toolchain.

This tutorial is part of the Angular Architectural Patterns series.

In Part 4 of this tutorial, we used our generate project tool to create the check-in data access library, the check-in feature shell library, the check-in desktop application, and the mobile check-in application. We hooked everything up and reviewed how much was automated by our tool.

In this part of the tutorial, we’re going to create the seatmap data access library with NgRx feature state. We then created the seat listing feature library and hooked it up to all applications with routing. Finally, we created the shared buttons UI library and the shared formatting utilities library which we used in the seat listing component.

THIS AD MAKES CONTENT FREE. HIDE

Seatmap data access library#

The shared seatmap feature has its own data access library. This is where we would add data services and application state management specific to the seatmap domain.

npm run generate-project -- library data-access --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines --with-state
# or
yarn generate-project library data-access --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines --with-state
<>

Generate the seatmap data access library.

For now, we’ll put the feature store and effects in place by using the --with-stateparameter of the generate project tool. Note that we use the nested grouping folder shared/seatmap.

// seatmap-data-access.module.ts
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';

import { SeatmapEffects } from './+state/seatmap.effects';
import * as fromSeatmap from './+state/seatmap.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature(fromSeatmap.seatmapFeatureKey, fromSeatmap.reducer),
    EffectsModule.forFeature([SeatmapEffects]),
  ],
})
export class SeatmapDataAccessModule {}
<>

The seatmap data access module.

The seatmap data access Angular module gives us an overview of what’s configured in the seatmap data access library. This is a good starting point.

ng run seatmap-data-access:lint

ng run seatmap-data-access:test --watch=false
<>

Lint and test the seatmap data access library.

Everything looks ready to go!

Seat listing feature library#

It’s time to add the first feature of the seatmap domain which is used in both the check-in and booking applications.

npm run generate-project -- library feature feature-seat-listing --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines
# or
yarn generate-project library feature feature-seat-listing --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines
<>

Generate the seatmap seat listing feature library.

Our tool generates an Angular module and a component for us.

To add this feature to our applications, we add a route to each feature shell module.

// check-in-feature-shell.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CheckInDataAccessModule } from '@nrwl-airlines/check-in/data-access';
import { SharedDataAccessModule } from '@nrwl-airlines/shared/data-access';

import { ShellComponent } from './shell/shell.component';

const routes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'seatmap', // 👈
      },
      {
        path: 'seatmap', // 👈
        loadChildren: () =>
          import('@nrwl-airlines/seatmap/feature-seat-listing')
            .then(esModule => esModule.SeatmapFeatureSeatListingModule),
      },
    ],
  },
];

@NgModule({
  declarations: [ShellComponent],
  exports: [RouterModule],
  imports: [
    RouterModule.forRoot(routes),
    SharedDataAccessModule,
    CheckInDataAccessModule,
    CommonModule,
  ],
})
export class CheckInFeatureShellModule {}

#angular #angular-cli #angular-workspace #monorepo #nx #series-angular-architectural-patterns #ngrx

Clara Gutmann

1598712540

Angular HttpClient Module | Angular Http GET, POST Example

Angular 9 HttpClient is an inbuilt module that helps us to send network requests to any server. Angular HttpClientModule is used to send GET, POST, PUT, PATCH, and DELETE requests. Angular can consume REST API using the Angular HttpClient module. The latest version of the Angular framework is Angular 9.

If you are new to Angular 9, then check out my Angular 9 Tutorial in this blog. Most front-end applications communicate with the backend services over an HTTP protocol. Modern browsers support the two different APIs for making HTTP requests.

XMLHttpRequest interface and the
fetch() API.

We will use XMLHttpRequest for Angular application.

#angular #angular httpclient #angular http #post #get

Getting Started with Nx in Angular

Initializing Application

Creating the Frontend Application

Creating the Backend Application

Making Requests

Creating the Products Endpoint

Conclusion

Further reading:

What is GEEK

Buddha Community

Install Angular - Angular Environment Setup Process

Install Angular in Easy Steps

Node.js

Npm Package Manager

Installing Angular CLI

Workspace Creation

1. Using CLI

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 3

Passenger info feature library#

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 2

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 5

Seatmap data access library#

Seat listing feature library#

Angular HttpClient Module | Angular Http GET, POST Example