Angular 6 Project Setup

Angular 6 Project Setup

AngularJS is focused on the model view controller while Angular 4 is centered on the configuration of the components. Angular 6 runs on the same basis as Angular4 but is faster relative to Angular4.

Angular6 uses version TypeScript 2.9 while Angular 4 uses version TypeScript 2.2. This brings a considerable difference in the results.

The Angular team came up with Angular CLI to build Angular 6 that eases the installation. Installing Angular 6 involves going through a few commands.

To install Angular CLI, go to this web site https:/cli.angular.io.

To get going with the update, we first need to make sure we have the new build of nodejs and npm installed. Together with nodejs, the npm package is installed.

Go to the nodejs site https://nodejs.org/en/.

For users it is suggested the latest version of Nodejs v8.11.3. Users who already have nodejs greater than 8.11 can skip the step above. When nodejs was installed, the node version in the command line may be checked using the node -v command as seen below.

node -v
v8.11.3

The request for the order shows v8.11.3. After installing nodejs, npm would also be built along with it.

To validate the npm version, type npm -v command in the terminal. It shows npm version as seen below.

npm -v
v5.6.0

Npm version is 5.6.0. Now that we've enabled nodejs and npm let's run the angular cli commands to install Angular 6. The following commands appear on the webpage –

npm install -g @angular/cli //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serve

Let's continue with the command line first to see how it functions.

To start with, we must build an empty directory in which the Angular CLI command must be executed.

npm install -g @angular/cli //command to install angular 6

We built a ProjectA4 empty folder, and we installed the Angular CLI app. We have used -g to get Angular CLI installed globally. Today, in any directory or folder, you can build your Angular 4 project so you don't have to install Angular CLI project wise because it is built globally on your system, so you can do it from any directory.

Now let's check whether Angular CLI is installed or not. To control the download, execute the following command in the terminal –

We get the update @angular / cli which currently is 6.1.3. The operating node update is 8.11.3, and the specifics of the OS as well. The information above inform us that we have successfully enabled angular cli, and we are now ready to launch our project.

Now we have Angular 6 built. Let's build our first project now at Angular 6. We'll use the following command − to build a project in Angular 6

ng new projectname

We will name the project ng new Angular6App.

The Angular6App project is developed with success. It installs all the packages needed to operate our project in Angular 6. Let's turn to the generated file, which is in the Angular6App directory. Adjust command line folder-cd Angular 6-app.

They would use Visual Studio Code IDE to function for Angular 6; you can use any IDE, such as Atom, WebStorm and so on.

Click Download for Windows for installing the IDE and run the setup to start using IDE.

We rendered updates to the directories-app.component.html and app.component.ts. Within our following chapters, we will talk more about this.

Let us finalize the configuration of the project. As you see we used port 4200 which is the default port used by angular-cli when compiling. You should adjust the port if you want to use this order –

ng serve --host 0.0.0.0 -port 4205

The Angular 6 app folder has the following folder structure −

• E2e − End Test folder. E2e is mainly used for performance checking which aims to insure that the application works perfectly.
• Node modules − Node modules are the npm bundle which is configured. You will open the folder, and see the available packages.
• SRC − This folder is where we use Angular 4 to work on the project.

The Angular 6 app folder has the following file structure –

• .angular-cli.json −Essentially has the name of the project, cli version, etc.
• .editorconfig −It is the editor config file.
• .gitignore − To enforce the ignore rules with every other person copying the archive, a.gitignore file will be added to the archive.
• Karma.conf.js − It is used by the protractor for unit testing. All the required details for the project is included in the file karma.conf.js.
• Package.json − The.json package file defines which libraries are included in node modules while running npm.

At present, if you open the file in the editor, you will get the following modules added in it.

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

If more libraries need to be added, you can add them here and run the npm install command.

• Protractor.conf.js − This is the test setup required for the application.
• Tsconfig.json − It essentially contains the required compiler options during compilation.
• Tslint.json − This is a configuration file with guidelines to remember while compiling.

The src folder is the main folder that has a separate file structure internally.

app

It contains the following files. These files are installed by default with angular-cli.

• App.module.ts − When you open the file, you will see that the code refers to the various libraries that are being imported. Angular-cli used these default import libraries-angular / core, platform browser. The titles themselves clarify library usages.

We are loaded into variables such as definitions, sources, suppliers and bootstrap and stored in them.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Declarations − References to the components are stored in declarations. The Appcomponent is the default component created each time a new project is started. We'll learn in another portion about creating new components.

Imports − Modules like shown above will be imported. BrowserModule currently forms part of the imports that are imported from the @angular / platform-browser.

providers − This will have reference to the services created. The service will be discussed in a subsequent chapter.

Bootstrap − The default framework developed, i.e. AppComponent, is referenced here.

• App.component.css − The css configuration can be written over here. Right now, as seen below, we've applied the background color to div.

It is the default template code currently accessible for the development of a project.

• App.component.spec.ts − These are files that are dynamically created that contain root function unit check.
• App.component.ts − Describes the component type here. You can do html structure processing in the .ts file. Processing may involve tasks such as database connection, interaction with other components, routing, services, etc.

The structure of the file is as follows −

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

Assets

You can save your images, js files in this folder.

Environment

This folder has Development or Dev Environment information. The folder has two files within it.

• environment.prod.ts
• environment.ts

All the files provide descriptions about how the final file will be processed in the setting about development or the dev environment.

The additional Angular 4 system folder file structure contains the following −

favicon.ico

This is a file that is usually found in the root directory of a website.

index.html

This is the file which is displayed in the browser.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

The body would have <app-root></app-root>. This is the variable used in the file app.component.ts which shows the information from the file app.component.html.

main.ts

Main.ts is the file from which we begin development of our project. It starts with the import of the simple module that we require. Right now, when you see angular / core, angular / platform-browser-dynamic, app.module, and environment are imported by default during installation of angular-cli and setup of project.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

The platformBrowserDynamic().bootstrapModule(AppModule) has the parent module relation AppModule. Hence, as it runs in the browser, the file that is called is index.html. Index.html internally refers to main.ts which calls the parent module, i.e., AppModule when the following code executes –

platformBrowserDynamic().bootstrapModule(AppModule);

As AppModule is called, it calls app.module.ts and further calls the AppComponent dependent on the boostrap as follows –

bootstrap: [AppComponent]

In app.component.ts, there is a selector: app-root which is included in the index.html file. It will show the contents found in app.component.html.