Can't serve new TypeScript project: Module not found

Ionic Framework ionic-v3
1

Hey guys,

Getting an error when trying to start a new TypeScript project. Tried playing around with the Webpack.config file - which mixes things up but doesn’t resolve to a successful launch. A new JavaScript project works fine if I remove var webpack = require('webpack');

Heres the error I get when serving a new TypeScript project:

`multi main
Module not found: Error: Cannot resolve ‘file’ or ‘directory’ /Users/[user]/Repos/ionic-app/ionicApp/app/app in /Users/[user]/Repos/ionic-app/ionicApp
resolve file
/Users/[user]/Repos/ionic-app/ionicApp/app/app doesn’t exist
/Users/[user]/Repos/ionic-app/ionicApp/app/app.js doesn’t exist
/Users/[user]/Repos/ionic-app/ionicApp/app/app.ts doesn’t exist
resolve directory
/Users/[user]/Repos/ionic-app/ionicApp/app/app doesn’t exist (directory default file)
/Users/[user]/Repos/ionic-app/ionicApp/app/app/package.json doesn’t exist (directory description file)
[/Users/[user]/Repos/ionic-app/ionicApp/app/app]
[/Users/[user]/Repos/ionic-app/ionicApp/app/app.js]
[/Users/[user]/Repos/ionic-app/ionicApp/app/app.ts]
@ multi main (CLI v2.0.0-beta.15)

Your system information:

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.45
Ionic CLI Version: 2.0.0-beta.15
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X Mavericks
Node Version: v4.2.3
Xcode version: Xcode 6.1.1 Build version 6A2008a`

2

Here my webpack file (with Typescript). You can try this if you want. It works for me. Like you can see, I don’t use the line that you removed. I don’t really know how that file works, so I can’t explain it

webpack.config.js

var path = require('path');
var paths = require('./ionic.config').paths;

module.exports = {
  entry: [
    'es6-shim/es6-shim.min',
    'reflect-metadata',
    'web-animations.min',
    path.normalize('zone.js/dist/zone-microtask'),//'zone.js',
    path.join(__dirname, paths.wwwDir, paths.appDir, paths.appSrcModule)
  ],
output: {
    path: path.join(__dirname, paths.wwwDir, paths.buildDir, paths.buildJSDir),
    filename: paths.appBuildBundle,
    publicPath: path.join(paths.buildDir, paths.buildJSDir),
    pathinfo: false // show module paths in the bundle, handy for debugging
},
module: {
   loaders: [
    {
      test: /\.ts$/,
      loader: 'awesome-typescript',
      query: {
        'doTypeCheck': false
      },
      include: [path.join(__dirname, paths.wwwDir)],
      exclude: /node_modules/
    },
    {
      test: /\.js$/,
      include: /node_modules\/angular2/,
      loader: 'strip-sourcemap'
    }
  ]
},
resolve: {
  alias: {
    'web-animations.min': 'ionic-framework/js/web-animations.min',
  },
  extensions: ["", ".js", ".ts"]
}
};
3

Tried swapping bits of my webpack.config for yours but to no avail. The required Paths module doesnt contain the following key values:
paths.wwwDir, paths.appDir, paths.appSrcModule

Heres my complete webpack config. Currently the latest available.

var path = require('path');


module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    'web-animations.min',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          'doTypeCheck': false
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /web-animations/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    alias: {
      'web-animations.min': path.normalize('ionic-framework/js/web-animations.min')
    },
    extensions: ["", ".js", ".ts"]
  }
};
4

I compared the folder structure of the JavaScript and TypeScript projects. Seemed the TypeScript App folder was in the www folder. I took it out to match the Javascript version and it started up but showed a blank screen in browser. There are now a few 404 errors on these files:

http://localhost:8101/build/css/app.ios.css http://localhost:8101/app/app.html http://localhost:8101/favicon.ico http://localhost:8101/build/css/app.ios.css

There was also this error in the terminal:
✗ app/app.ios.scss Error: File to import not found or unreadable: ../../node_modules/ionic-framework/ionic.ios Parent style sheet: stdin on line 19 of stdin @import "../../node_modules/ionic-framework/ionic.ios";

5

Fixed it!

So after moving the App folder out from the build folder and into the root. I just had to fix all the 404s.
That meant changing the templateUrls on the three pages it starts with from “app/…” to “build/…” and then also remove one level of “…/” in the scss files that call for the node_modules folder.

6

this looks like an older version of the configuration… that explains why it is working for you…

7

I think the easier solution is to adjust the configuration so it looks for the files in the proper place, it is not finding in the files in the www directory so it is not compiling the ts files or properly moving the sass files to the build directory.

I have updated my configuration files so that the build is working fine without moving directories or changes paths for html files.

see changes in ionic.config.js, webpack.config.js & tsconfig.json

8

The ionic team moved out the app folder because that way the src is out the folder that get’s compiled to the apk or binary for the diferent devises, thus lowering the size of the compiled app as only the minified or at least the transpiled versions get to be in the www folder.

The best move is to update ionic and create a new project, then compare the config files and move the ones that needs to be moved, like the app folder outside the www one.