As you might have noticed from last week’s post, I’ve shifted my focus from pure Angular to learning Angular Ionic. And while last week’s post focused more on just getting Ionic setup on a Windows environment, this post will focus more on integrating Ionic and Angular CLI to work together.
If you are familiar with Ionic, you should already know that it provides its own CLI that allows you to scaffold out a new application using a basic template. This CLI is also used to help register the project with the Ionic Dashboard and scaffold out a limited number of file types if you use Ionic 3. However, there are several problems I have with using the Ionic CLI. First, and probably most important to me, is there is no test scaffolding! Second, it neither follows the standard naming convention for files nor does it comply with the Angular Style Guide when it comes to directory structure.
My first attempt at correcting the problem was to try to add Ionic to an existing Angular CLI project. I almost had that working, but I got stuck trying to get the SCSS implementation working. I finally gave up once I realized that Ionic seems to load files on demand, including SCSS files and templates. I might come back to this once I’ve gained more experience with Ionic and have a better idea of how it works under the hood.
So, my second thought was to just add the Angular CLI to an existing Ionic CLI project. It turns out this was much easier to get working. This allows me to use the standard
ng commands to scaffold out my components, services, interfaces, etc… and because I’m using the Angular CLI scaffolding, the tests also get scaffold out for me.
For the purposes of this post, I’m going to assume you’ve already created a project using the Ionic CLI. What follows are the steps you need to take to add in the Angular CLI.
Add Angular CLI
All of the additions to the package.json file are in devDependencies. The version numbers I’ve included are for the version at the time of this writing. You’ll want to modify for newer versions as they are released.
First, of course, add the angular cli
This will give you the ability to use the
ng commands to scaffold out files. To allow the tests to run, you’ll also want to add the following:
The main file that makes the Angular CLI recognize the project as an Angular CLI project is the
.angular-cli.json file. The easiest thing to do is to take an existing file from another project and copy it into your Ionic project. This file belongs in the root of your project.
Once you’ve done that, there is one small change you need to make. The
main.ts file that is the entry point of the application lives under the
app directory in an Ionic project rather than directly under
src like it does with an Angular CLI project. It would be tempting to change the location of the file, but the Ionic build process is looking for it under the
app directory. An easier fix is to change the location in our
.angular-cli.json file so that our tests can find it. It is the only place that needs to know of the new location.
Change .angular-cli.json so main points to the right location:
To run your tests, you’ll need a
karma.conf.js file in your root directory. Again, the easiest thing to do is to copy this file over from a project you created with the Angular CLI.
You should already have a
tsconfig.json file in your project root directory. If you open it, you’ll see it has an exclude section that is excluding
node_modules. You’ll need to tell it to exclude
*.spec.ts files so it doesn’t pick up the test files during a normal compile cycle.
polyfills.tsfile, so you’ll need to add one that was originally created using the Angular CLI. This belongs in your
test.ts file into your
src directory from a project that you created with the
Angular CLI. If you don’t put this file in, you won’t be able to run any tests.
The tests use
tsconfig.spec.json located in the
src directory. The problem is, a standard
tsconfig.spec.json file inherits from the
tsconfig.json file we just modified above which doesn’t look at all like the
tsconfig.json file in an Angular CLI project. I found the easiest thing to do was to create a new copy of
tsconfig.spec.json that is a merge of the two files in an Angular CLI project. This worked at the time of this writing, if you run into trouble, you may need to merge the two files you started with on your own. My result looks like this:
srcdirectory and is just a copy of the file that is in your Angular CLI project.
You’ll notice that your
pages directory is at the same level as your
src directory which doesn’t comply with the Angular CLI. I moved mine so that it is under the
src directory just to keep things consistent. You’ll need to fix up imports once you move it of course.
Because the pages that got generated don’t conform to the style guide and don’t have any tests, I just regenerated mine and copied the relevant code into the newly generated files.
At this point, you should have a project that looks a lot more like an Angular CLI project. You’ll still use the Ionic command to do your regular build and development cycle and the ng commands for testing and generating new files. Running tests works the same as you should already be used to from using Angular. The one thing you will notice is that you’ll see a warning in your test:
Critical dependency: the request of a dependency is an expression
This is a known “error” that neither the Angular CLI group or the Ionic group seem interested in addressing.
At this point, I haven’t tried any E2E tests using this setup so I don’t know if there are any additional tweaks that need to be made.
You can find the code for this at this branch of a project I’m working on.
Other post in Angular 2
- Angular 2 – First Impressions [Compared to Angular 1] - February 25th, 2016
- Angular 2 Thoughts - October 4th, 2016
- Getting Started with Angular 2 - October 25th, 2016
- Unit Testing an Angular 2 CLI Project - November 22nd, 2016
- Adding Client Side Routing to Angular 2 - November 29th, 2016
- Angular 2 Lazy Loading - December 6th, 2016
- Reasons to use RxJS Today - December 13th, 2016
- Dissecting Angular 2 Modules - December 20th, 2016
- Awesome Angular2 Architecture Options and Opinions - December 27th, 2016
- What if Everything Was Immutable? - January 10th, 2017
- Amazing Angular2 DOM Tips, Tricks, and Warnings - January 17th, 2017
- Secrets to Styling Angular2 - January 31st, 2017
- Jedi Angular 2 Tips and Tricks - March 28th, 2017
- Unit Testing Angular(2+) with JSDOM - April 4th, 2017
- More Control with Angular Flex Layout - April 11th, 2017
- Angular(2+) Model Driven Forms Are Superior - April 18th, 2017
- Dynamically Add Components in Angular - April 25th, 2017
- Using Real World NgRX - May 9th, 2017
- Functional Reactive Angular Revealed - May 30th, 2017
- NgRX/Store Coding Sanity Epiphany - June 6th, 2017
- Real World RxJS Marble Testing Revealed - June 13th, 2017
- How to Organize an Angular Application - June 20th, 2017
- Upload an Image as a File in Angular - July 4th, 2017
- How to Implement Angular 2+ Routing - July 18th, 2017
- TypeScript Basics for Angular Developers - August 1st, 2017
- Angular Observable Secrets Revealed - August 8th, 2017
- How to Upgrade NgRX to 4.x - August 15th, 2017
- Model View Presenter, Angular, and Testing - August 29th, 2017
- This One Tweak Improved my Angular Code - September 12th, 2017
- Upgrade to Angular from... - September 26th, 2017
- Using NgRX to Cleanly Aggregate Data - October 3rd, 2017
- NgRX 4 Actions - Class vs Object Literal - October 10th, 2017
- Implementing NgRX 4 - October 24th, 2017
- What I Learned Using Angular Material - October 31st, 2017
- Angular Ionic and Angular CLI - November 14th, 2017
- How to Really Screw Up an Angular Project - December 12th, 2017
- Angular Cross Field Validation - December 19th, 2017
- Attaching an Angular Child Component's Form to a Parent - January 2nd, 2018
- Why more Angular Modules are Better than One - January 16th, 2018