How to Setup “code .” on Visual Code Studio on OSX/Mac

Install VS Code  on OSX/Mac







simply open the Command Palette (⇧⌘P) 

then  type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

use "Code ." open current path project in VS code

Hot Reload nativescript 5.0

Showing this error when running my NativeScript App

System.err: Error: com.tns.NativeScriptException: Failed to find module: "../shared/sdk/index", relative to: app/services/ System.err: com.tns.Module.resolvePathHelper(Module.java:146) System.err: com.tns.Module.resolvePath(Module.java:55) System.err: com.tns.Runtime.runModule(Native Method) System.err: com.tns.Runtime.runModule(Runtime.java:624) System.err: com.tns.Runtime.run(Runtime.java:616) System.err: com.tns.NativeScriptApplication.onCreate(https://lnkd.in/fD7QDew) System.err: android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1119) System.err: android.app.ActivityThread.handleBindApplication(ActivityThread.java:5838) System.err: android.app.ActivityThread.-wrap1(Unknown Source:0) System.err: android.app.ActivityThread$H.handleMessage(ActivityThread.java:1706) System.err: android.os.Handler.dispatchMessage(Handler.java:106) System.err: android.os.Looper.loop(Looper.java:176) System.err: android.app.ActivityThread.main(ActivityThread.java:6656) System.err: java.lang.reflect.Method.invoke(Native Method) System.err: com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547) System.err: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:873)

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

implementation of Angular 5

1.component
2.directive
3.service
4.routing


Project contain following Files:

• component.css − css file for the new component is created.
• component.html − html file is created.
• component.spec.ts − this can be used for unit testing.
• component.ts − here, we can define the module, properties, etc.

How to install Angular 5

How to install Angular 5  on windows Operating System :simple in 7 steps

step 1: Install Node JS on your operating system

             select your operating system  32 bit or 64 bit

                   after complete Node JS installation  check Node JS installation done ,simple  open                              command prompt  and write following command 

                       "npm -v" 

               step2: Install angular -Cli in your operating system

                           To install angular-cli  simple  open command prompt and write
                            following command

                           "npm install -g   angular-cli"

                   step3:create  new project  

                             to create new project in angular 2 simple open command prompt and write                                       following command

                          "ng new projectName"

                     after creation of new project go path of project simple write following command

                        "cd  projectName"

           step4: install visual studio code in your operating system

                step5 :open project  in visual studio code
                                  after complete installation open visual studio and  in that select file then open
                                 folder select  your project folder which created in command prompt 

                  step6: after this  your project will be open in visual studio code then simple  run project                                using follwing command in command prompt

                            "ng serve "

                       step7: open browser and enter "localhost:4200