Ionic Serve error with Tutorial Starter --v2 --ts

Ionic Framework ionic-v3
1

Hi,

I get the error below after doing the following commands today, when following Ionic Tutorial documentation:

$ ionic start MYAPP tutorial --v2 --ts
$ ionic serve

C:/Users/Mark/Documents/App Development/MYAPP/app/app.ts
Module parse failed: C:\Users\Mark\Documents\App Development\MYAPP\app\app.ts
Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {App, IonicApp, Platform, MenuController} from ‘ionic-angular’;
| import {HelloIonicPage} from ‘./pages/hello-ionic/hello-ionic’;
| import {ListPage} from ‘./pages/list/list’;
@ multi main (CLI v2.0.0-beta.19)

Your system information:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 8.1
Node Version: v5.6.0

2

for downloading the tutorial template use this:

ionic start MyIonic2Project tutorial --v2

3

Thanks, but that is a workaround (to use JS starter rather than Typescript), rather than addressing the issue with the Typescript starter(s) itself. The error appears to be with the Webpack TS loader ‘awesome-typescript’ (its version and/or the Webpack config settings for its use).

As a workaround I used a --v2 --ts with a blank (rather than the tutorial) starter and it served, albeit there is still an error

ERROR in [default] C:/Users/Mark/Documents/App Development/MyAPP/node_modules/
angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.

I guess that this is just a heads-up to ionic developers that their Typescript starters need work. I noticed that their GitHUbs for the starters don’t have any app.ts files so it appears there is little support for them at the moment.

@brandyshea ?

4

@Mobius77, I just tried ionic start MYAPP tutorial --v2 --ts (followed by cd MYAPP and ionic serve) and it worked fine for me, e.g. it started without a Module parse failed error, so it might be something related to your environment.

The second error ERROR in .../angular2/src/facade/promise.d.ts:1:9 is an angular issue caused by the fact that TypeScript 1.8 requires angular2 2.0.0-beta.7 or higher and the current Ionic 2 release (beta3) is using angular2 2.0.0-beta.6. However this is just a temporary problem until the next release of Ionic 2 because the main branch is already updated to angular2 beta8. If you need a workaround now, you can check out the comments in the original issue thread.

And the TypeScript starters are there, they are just in a separate branch, e.g. here is the tutorial starter for TypeScript.

5

Thanks, will update to further releases to see the second error go away for the blank starter that I am using. Thanks also for this link to the TS branch…didn’t see that :slightly_smiling:

Cheers

6

Hmm, after I was getting the blank TS starter to serve multiple times yesterday, I am getting the errors in the first post again today after booting my laptop for the first time . In fact, I recall I originally got the TS ‘tutorial’ starter to serve the first time, but then after restarting my laptop a couple of hours later that’s when I got the error. Weird.

It is the same issue as raised here:

I have tried uninstalling and reinstalling webpack, typings and awesome-typescript-loader, as well as configuring TS loader settings in webpack, to no avail. I am not sure if webpack is correctly loading the loader, or what the problem is. TS files are evidently somehow not being recognised anymore.

I am hoping these issues dissipate when Ionic move to Browserify/Gulp as the build tools rather than webpack as per their recent announcement, however it would be good to have it fixed in the interim if anyone’s got any other suggestions (apart from using js files)?

7

That’s pretty strange, here are some questions/tips:

  1. Do you remember if you updated any packages between the time when it was working and when you got the error?

  2. Do you have webpack installed globally or locally? - The problem might be eventually caused by incompatible package versions or installations, for example I use mostly local packages and have only the following packages installed globally:

bower@1.7.7
cordova@6.0.0
ionic@2.0.0-beta.19
typings@0.6.9
  1. Do you run the node.js command prompt as Administrator? - I’m running it with normal privileges and it works but I recall that I read an advice somewhere to run it as Administrator if it doesn’t work.

Here are also excerpts from my configuration files:

// webpack.config.js
// ...
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/browser.d.ts']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
// ...

// package.json
// ...
  "devDependencies": {
    "awesome-typescript-loader": "0.15.10",
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-sass": "2.2.0",
    "gulp-watch": "4.3.5",
    "strip-sourcemap-loader": "0.0.1",
    "typescript": "1.8.7",
    "webpack": "1.12.14"
  },
// ...

I hope this would help you to find what’s causing the problem.

8

Thanks for the suggestions. No issues/differences with my setup compared to yours (i.e. webpack not installed globally, I’m an administrator).

I just did a retry of everything from scratch:

$ionic start TEST blank --v2 --ts
$cd TEST
$ionic serve

and it worked. Then I immediately logged off. After reboot, did another $ionic serve in the project root. Got the error in the first post.

Totally perplexed. It’s as if some key file to recognised TS files is being wiped during a reboot. I’m using Windows 8.

9

The strange thing is that if you try to google this error you’ll end up with results mostly for the babel-loader. I tried to narrow down the search and I found this result for the awesome-typescript-loader: Symlinks seem to cause ‘Line 1: Unexpected token’. I guess that you’re not using shared modules but it might be also caused by something else related to paths (if I recall correctly, I read that sometimes there might be a problem even if node.js is installed on different drive than the one on which your project resides).

It’s totally strange that the only thing in between is the reboot. Maybe you could try to quit (q) after a successful ionic serve and then do another ionic serve immediately. It might be caused not by files that are missing but by some files that are generated after the first serve and somehow block the subsequent executions (e.g. permissions, cache, etc.).

If nothing else helps than you might check the logs (or a way to generate such) or resort to the heavy artillery.

10

Thanks for the link to the Symlinks discussion (I searched and read many similar issue pages and didn’t see this one) - in there was a suggestion to remove the include in the loader in webpack.config.js which I did:

{
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/browser.d.ts']
        },
        // include: '/app/',
        exclude: /node_modules/
      },

This enabled the serve to work after reboot - it caused a new and lengthy error to appear regarding FSWatcher but at least the serve always works now. It appears there is an issue with either ‘/app/’ not being an absolute path in the include, or in the resolve,

resolve: {
    root: ['app'],

I tinkered for a little while trying to use stuff like include:path.resolve('/app') but that didn’t fix the new FSWatcher error I was getting. In any case the fact that it serves without the include is good enough for me at the moment - I am not going to try to tinker further and get the other error I am now seeing corrected, especially if webpack is not going to be the default loader in a future release of Ionic as recently announced. However, if someone proficient in webpack (this is my first use of it) can immediately see how I should specify the absolute paths for the include/resolve statements etc for the ionic starter then please advise :slight_smile:

Thanks again for your time and guidance on this issue!

11

I’m glad that you managed to find a workaround, hopefully this kind of problems goes away soon, when Ionic moves to Browserify/Gulp.