Instruction on how to create an ionic project with a unique project name and with a unique Java package name

mtWinds · July 19, 2014, 6:32am

As of ionic v1.0.0-beta.12, you can create a project with a unique project name as well as a unique package name.

Follow the steps below:

Step 1. First, update your ionic CLI.

  $ npm update -g ionic

Step 2. On the ionic command line, provide an app name (Project Name) and an id (Package Name) as command line parameters.

 Example:

$ ionic start HelloWorld  tabs   --appname "Hello World" --id  'com.mycompany.helloworld'

(NOTE: For the --appname, use " " (double quotes) to be able to use a space between words.)

========== The article below is obsolete as of ionic v1.0.0-beta.12 =======

The beta 1.0.0-beta.9 ionic creates a new project with a default project name ‘HelloCordova’ and a default Java package name ‘com.ionicframework.starter’.

Here is a step-by-step instruction on how to replace the default project name with your own project name and your own package name on Windows.

It also shows you how to import the newly created ionic project into Eclipse, so you can further work on the ionic project using Eclipse.

STEP 1. Start Git-Bash command window.

STEP 2. In Git-Bash command window:

(1) Go to the Eclipse-workspace root directory.
(ex) $cd /c/Eclipse-workspace-PhoneGap
$ pwd
$/c/Eclipse-workspace-PhoneGap

STEP 3. Create an ionic project on the Eclipse workspace root directory

Format: $ionic start projectName [template]
Examples
$ionic start NewBlankApp blank (for no template)
$ionic start TestTabs tabs (for tabs template)
$ionic start TestSideMenu sidemenu (for sidemenu template)

STEP 3.1 ------------ Possible errors I can get at this step ------------------------------
(1) Problem Description

When I create a new ionic project,
I can get the following error message.

Fetching plugin “https://github.com/driftyco/ionic-plugins-keyboard” via git clone
^^^^^^^^^^^^^^^^
Error: Command failed: fatal: could not create work tree dir ‘C:\Users\Home\AppData\Local\Temp\plugman\git\1405247576143’.: No such file or directory
at ChildProcess.exithandler (child_process.js:647:15)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:755:16)
at Socket. (child_process.js:968:11)
at Socket.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

ERROR: Unable to add plugins. Perhaps your version of Cordova is too old.
^^^^^^^^^^^^^^^^^^^
Try updating (npm install -g cordova), removing this project folder, and trying again.

(2) SOLUTION

The error message says there is no directory ‘C:\Users\Home\AppData\Local\Temp\plugman\git\1405247576143’.

All I need to do is to create ‘plugman’ and ‘git’ sub-folders under ‘C:\Users\Home\AppData\Local\Temp’ manually and make sure they are not read-only.

STEP 4. cd ./projectName

Example:
$cd ./MyProject

STEP 5. Make a project name and a Java package name unique.

Change the project name and package name in the ~/MyProject/config.xml file:

(1) Change the project name from the default “HelloCordova” to a unique project name such as “MyProject”

(2) In ~/MyProject/config.xml file,
Change the default Java package name to a unique Java package name as shown below:

 "<widget id="com.ionicframework.starter" " -> <widget id="com.unique.package-name"

(3) If I want to change the app version number, in ~/MyProject/config.xml file,

change version=“0.0.1” -> to version=“0.0.2” (in tag)

STEP 6. Now, in the project directory (such as"~/MyProject")
add a platform (Android or iOS) to the project.

in ~/projectName/ (such as ~/MyProject/) directory, execute the following command:

$ ionic platform android
(or $cordova platform add android)

NOTE: This command now will create an Android project using the unique names given in STEP 5 above.)

STEP 7. To work on the project using Eclipse, import the project into Eclipse
(CAUTION)
When you import an ionic project into Eclipse, make sure you do not check the ‘copy project into workspace’ checkbox on the Eclipse import projects window. Otherwise, you will not be able to build and deploy your ionic app using Eclipse ‘Run’ button.

And, Eclipse ‘import Projects’ window will list two project names to import. You should check both project names to be imported and import both of them as follows:

For example, if your unique project name is ‘TestProj’, when you import it to Eclipse, Eclipse ‘Import Projects’ window will list the following two projects names to be imported on the ‘New Project Name’ column:
(1) TestProj
(2) TestProj-CordovaLib

You have to check both project names to be imported and import both of them.

After importing is completed, you will see two project folders on Eclipse ‘Package Explorer’ as follows:
(1) TestProj
(2) TestProj-CordovaLib

You work on the ‘TestProj’.
Go to ‘TestProj/assets/www’ folder. That is your ionic app.
Do not touch the ‘TestProj-CordovaLib’ project. It just needs to be there, otherwise ‘TestProj’ won’t work.

STEP 8. After importing the project into Eclipse,

To show "~MyProject/assets/www/" directory within Eclipse,
 click the following Eclipse menu items
Project -> Properties -> Resource -> Resource Filters

and delete the exclusion filter.

CONCLUSION:
Now, you can work on your app within Eclipse with a unique ionic project name.
When you install the new app on your device (such as Android phones),
the new app will be installed with a unique app name, a Project Name you gave, not as ‘HelloCordova’.

icecappacino · August 21, 2014, 3:22pm

Hey,

Thanks for your help got it to import into eclipse but alot of problems trying to “build” using eclipse android plugin

see Using Ionic with Eclipse

building via eclipse terminal works with ionic run android though.

Any thoughts?

mtWinds · August 22, 2014, 12:13am

The reason you import an ionic project into Eclipse is to use Android SDK and ADT (Android Developer Tools) to build and deploy your app to a target device or an emulator, without using the command line command such as ‘ionic run android’.

You have to have a complete working Android ADT environment within Eclipse before you import an ionic project. This mean you should be able to deploy a ‘Hello World’ app to your target device using your Eclipse with ADT (by clicking ‘Run as Android App’ on Eclipse) independently from an ionic project.

Once you can do it, you import an ionic project as described above. Once it is imported, you consider it as a native android app. This means you build and deploy an app just same as a native android app.
And, click on ‘Run as Android App’ on Eclipse. Do not use the command line command.

icecappacino · August 22, 2014, 1:22am

Well I want to believe I have a good working copy. I’m using the latest Eclipse and plugins from google. Even updated the AVD and ADT. I’ll have a look at again but as of now…using the eclipse terminal to do my compiling and debugging so far has been ok for now.

Thanks alot

mtWinds · August 25, 2014, 8:34am

I’d like to check one thing with you.

When you imported an ionic project into Eclipse, did you check the ‘Copy project into workspace’ checkbox on the Eclipse import projects window? If you did, that is the problem.
When you import an ionic project into Eclipse, you should not ‘copy project into workspace’. Then, you will be able to build and deploy your ionic app using Eclipse ‘Run’ button.

icecappacino · August 25, 2014, 3:50pm

OOOOOOooooooooohhhhhh ok I did that…I tried it and it didn’t work still.

During the import the dialog shows you two paths when you select the folder in question

the paths reference two folders

/platforms/android and /platforms/android/CordovaLib

Do I check both folders as well?

my “Problems Log” for the workspaces indicates the following

Description Resource Path Location Type
The container ‘Android Dependencies’ references non existing library ‘E:\SERVER\Mobile\AATTApp\platforms\android\CordovaLib\bin\aattapp-cordovalib.jar’ AATTApp Build path Build Path Problem

and

Description Resource Path Location Type
The project cannot be built until build path errors are resolved AATTApp Unknown Java Problem

I have NO idea what these problems are really no file(s) indicates such

icecappacino · August 25, 2014, 4:23pm

After googling some of my issues I got this solution to work for me

mtWinds · August 26, 2014, 12:18am

Yes, you have to check both folders.

For example, if your unique project name is ‘TestProj’, when you import it to Eclipse, Eclipse ‘Import Projects’ window will list the following two projects names to be imported on the ‘New Project Name’ column:
(1) TestProj
(2) TestProj-CordovaLib

You have to check both project names to be imported and import both of them.

After importing is completed, you will see two project folders on Eclipse ‘Package Explorer’ as follows:
(1) TestProj
(2) TestProj-CordovaLib

Do not touch the ‘TestProj-CordovaLib’ project.
You work on the ‘TestProj’.
Go to ‘TestProj/assets/www’ folder. That is your ionic app.