Port 4200 is already in use

Port 4200 is already in use. Use '--port' to specify a different port.
npm ERR! code ELIFECYCLE
npm ERR! errno 1



Solution:

sudo lsof -t -i tcp:4200 | xargs kill -9

Angular-5 File Upload

app.component.html

<label for="file">Choose File</label>

<input type="file" id="file"(change)="Fileupload($event.target.files)">

app.component.ts

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

import { Input } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements AfterViewInit {

UploadFile: File = null;

constructor()

{

}

Fileupload(files: FileList) {

this.UploadFile = files.item(0);

}

}

output:

Run Angular CLI repos directly in your browser

https://blog.angular.io/run-angular-cli-repos-directly-in-your-browser-41332fd80901

Online VS Code IDE for Modern Web Applications

https://stackblitz.com

How To Upload Files to Amazon S3 with Angular 4+

Reactive Form in Angular 4+

angular e2e Testing Strategy with protractor

browser:

›angularAppRoot

›waitForAngularEnabled

›getProcessedConfig

›forkNewDriverInstance

›restart

›restartSync

›useAllAngular2AppRoots

›waitForAngular

›findElement

›findElements

›isElementPresent

›addMockModule

›clearMockModules

›removeMockModule

›getRegisteredMockModules

›get

›refresh

›navigate

›setLocation

›getLocationAbsUrl

›debugger

›enterRepl

›explore

›pause

›controlFlowIsEnabled

›ExtendedWebDriver

›Appium_Commands

›webdriver.WebDriver

›actions

›touchActions

›executeScript

›executeAsyncScript

›call

›wait

›sleep

›getPageSource

›close

›getCurrentUrl

›getTitle

›takeScreenshot

›switchTo

element:

element.all(locator)

›clone

›all

›filter

›get

›first

›last

›count

›isPresent

›locator

›then

›each

›map

›reduce

›evaluate

›allowAnimations

element(locator)

›clone

›locator

›getWebElement

›all

›element

›$$

›$

›isPresent

›isElementPresent

›evaluate

›allowAnimations

›equals

webdriver.WebElement

›getDriver

›getId

›findElement

›click

›sendKeys

›getTagName

›getCssValue

›getAttribute

›getText

›getSize

›getLocation

›isEnabled

›isSelected

›submit

›clear

›isDisplayed

›takeScreenshot

locators:

by

›addLocator

›binding

›exactBinding

›model

›buttonText

›partialButtonText

›repeater

›exactRepeater

›cssContainingText

›options

›deepCss

webdriver.By

›className

›css

›id

›linkText

›js

›name

›partialLinkText

›tagName

›xpath

note:all refered from official angular material.io site

How to install protractor for angular e2e Testing

Setup : install protractor globally

npm install -g protractor

check protractor installed

protractor -version

Update webdriver-manager to download required files

webdriver-manager update

start server:

webdriver-manager start

Test the sample e2e case :

ng e2e

angular 5 e2e testing