Sencha ExtAngular - Getting Started

Release Notes

7.0.0

NOTE: the easiest way to make thes changes is to refer to the package.json and webpack.config.js files the ext-angular-boilerplate project

in fact, just copy those 2 files to your project and add back in anything custom you may have added

changed package name of plugin from: "@sencha/ext-angular-webpack-plugin": "~6.7.0", to: "@sencha/ext-webpack-plugin": "~7.0.0", (this effects package.json and webpack.config.js)
made all ext-webpack-plugin true/false fields now 'yes'/'no' fields more consistent, now all are 'yes'/'no' fields

Overview

This guide will show you how to install and configure ExtAngular in your development environment.

Requirements

ExtAngular requires the following to be installed before proceeding:

Node 8.11+
NPM 6+
Java 8

Creating Your First ExtAngular Application

Step 1a: Authenticate to Sencha's NPM Registry - early adopter

ExtAngular and all related packages are hosted on Sencha's private NPM registry.

To gain access to the early adopter registry, contact Sencha Sales.

Once you have received your credentials from sales for the early adopter registry, you can authenticate by running the following command:

npm login --registry=https://sencha.myget.org/F/early-adopter/npm/ --scope=@sencha

This command configures npm to download packages in the @sencha scope from Sencha's registry.

Step 1b: Authenticate to Sencha's NPM Registry - Production (not available yet)

When this product is in production...

ExtAngular and all related packages are hosted on Sencha's private NPM registry.

To gain access to this registry, sign up for a trial of ExtAngular.

Once you have received your credentials, you can authenticate by running the following command:

npm login --registry=http://npm.sencha.com --scope=@sencha

This command configures npm to download packages in the @sencha scope from Sencha's registry.

Step 2: Install ext-angular-gen

First, if you have not already done so, install npm (also, we assume you have pre-installed node.js).

npm install -g @sencha/ext-angular-gen

Step 3: Create a starter ExtAngular application with ext-angular-gen

Generate an initial application with ext-angular-gen

ext-angular-gen app CoolExtAngularApp

This will create a folder for your new application and install all npm packages

Step 4: Run the newly created starter ExtAngular application

When the install is finished:

type "cd cool-ext-angular-app" then "npm start" to run the development build and open your new application in a web browser (for the current early adopter release, you need to run 'npm start' twice for the app to display)

npm install
npm start (let it get to this: ℹ ｢wdm｣: Compiled successfully.)
control-c (stop the command)
npm start

The resulting app uses webpack-dev-server and hot-loading. Any changes you make will be immediately reflected in the browser.

Example Applications

The ext-angular repo on GitHub contains several example apps that you can use to learn more about ExtAngular. Each has a readme that contains instructions for downloading and running:

ext-angular-kitchensink - Shows how to use every ExtAngular component. See it running here.

Appendix

Installing Node and NPM

You can check the version of node you have installed by running:

node --version

To install node on Mac OS and Linux, we recommend using nvm. If you already have nvm installed, you can install the latest stable version of Node and NPM using:

nvm install stable

On Windows you can use the official installer. There is also a version of nvm for Windows

Installing Java

In order to install ExtReact's webpack plugin on Linux, Java 8 must first be installed.

You can check which version of Java you have installed by running:

java -version

On Debian-based platforms, you can install OpenJDK using:

sudo apt-get install openjdk-8-jdk

... or you can install Oracle's JDK using:

sudo add-apt-repository ppa:webupd8team/java -y
sudo apt-get update
sudo apt-get install oracle-java8-installer

mkoplqq2006/ext-angular