Rob Ferguson

Working with TypeScript, webpack and Ionic 3

Rob Ferguson -

In previous posts I walked you through the steps I followed when creating a reactive form using FormBuilder and then adding support for validation and error handling.

In this post, I'll show you how to use aliases when working with TypeScript, webpack and Ionic 3.

What problem are we solving?

If you use the Ionic CLI to kickstart your projects it will create an initial directory structure and placeholders, for example:

├── /big-top
    └── /node_modules            - Packages managed by npm
    └── /src                     - Angular scripts
        └── /app
            ├── app.component.ts
            ├── app.html
            ├── app.module.ts
            ├── app.scss
            ├── main.ts
        └── /assets                
        └── /pages
            └── /home
                ├── home.html
                ├── home.scss
                ├── home.ts
        └── /theme
        ├── index.html
        ├── manifest.json
        ├── service-worker.js
    └── /www                     - Ionic's 'dist' folder
    ├── package.json
    ├── tsconfig.ts

If you take a look at the Application (MyApp) component (in app.component.ts) you'll notice that the project's files are referenced relatively:

import { HomePage } from '../pages/home/home';

While Ionic's files (and Angular's files) are referenced using aliases:

import { Component } from '@angular/core';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

As your project evolves you'll want to move things around and updating an alias is a lot easier then refactoring all your import paths.

TypeScript

The TypeScript configuration file (tsconfig.json) describes the files and options required to compile a project. We need to update it as follows:

"compilerOptions": {

  ...

  "target": "es5",
  "typeRoots": [
    "../node_modules/@types"
  ],
  "baseUrl": "./src",
  "paths": {
    "@app/*": [ "app/*" ],
    "@assets/*": [ "assets/*" ],
    "@env": [ "environments/environment" ],
    "@pages/*": [ "pages/*" ],
    "@services/*": [ "services/*" ],
    "@tests/*": [ "./*" ],        
    "@theme/*": [ "theme/*" ]
  }
},

...

webpack

The webpack configuration file (webpack.config.js) describes the files and options required to package and bundle an application. We need to update it as follows:

...

useDefaultConfig[env].resolve.alias = {
  "@app": path.resolve('./src/app/'),
  "@assets": path.resolve('./src/assets/'),
  "@env": path.resolve(environmentPath()),
  "@pages": path.resolve('./src/pages/'),
  "@services": path.resolve('./src/services/'),
  "@tests": path.resolve('./src/'),      
  "@theme": path.resolve('./src/theme/')
};

...

package.json

We need to update (package.json) as follows:

"config": {
  "ionic_source_map_type": "source-map",
  "ionic_webpack": "./config/webpack.config.js"
}

Putting it all together

Now instead of this:

import { HomePage } from '../pages/home/home';

We can do this:

import { HomePage } from '@pages/home/home';

My ‘ionic info’:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

local packages:

    @ionic/app-scripts : 3.1.2
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.1
    npm  : 5.5.1 
    OS   : macOS Sierra

Misc:

    backend : pro
Source Code:
Resources: