RC0 - production build for starter projects fails - serve works as expected

Ionic Framework ionic-v3
1

Any starter project has this issue.

Ionic version:

$ ionic info

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.4.7
Xcode version: Xcode 8.0 Build version 8A218a 

$ tsc --version
Version 2.0.3

$ rollup --version
rollup version 0.36.1

Start new project

$ ionic start -v tabs

$ ls -1 node_modules/@types/
faker
lodash

package.json

{
  "name": "tabs",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "ionic-angular": "^2.0.0-rc.0",
    "ionicons": "^3.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-native": "^2.0.3",
    "@angular/common": "^2.0.1",
    "@angular/compiler": "^2.0.1",
    "@angular/core": "^2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "^2.0.1",
    "@angular/platform-browser": "^2.0.1",
    "@angular/platform-browser-dynamic": "^2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "angular-in-memory-web-api": "~0.1.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "angular2-google-maps": "^0.15.0",
    "faker": "^3.1.0",
    "lodash": "^4.16.2",
    "ng2-translate": "^2.5.0",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.23",
    "@types/faker": "3.1.31",
    "@types/lodash": "4.14.36",
    "typescript": "^2.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "tabs: An Ionic project"
}

Error

$ npm run build

> tabs@ build /Users/xxxxxxx/Development/workspace/tabs
> ionic-app-scripts build

[10:27:43]  ionic-app-scripts 0.0.23
[10:27:43]  build prod started ...
[10:27:44]  clean started ...
[10:27:44]  clean finished in 13 ms
[10:27:44]  copy started ...
[10:27:44]  ngc started ...
[10:27:44]  lint started ...
[10:27:44]  
[10:27:44]  copy finished in 75 ms
[10:27:44]  
[10:27:44]  bundle prod started ...
[10:27:44]  Error: Could not resolve entry (.tmp/app/main.prod.js)
    at /Users/xxxxxxx/Development/workspace/tabs/node_modules/@ionic/app-scripts/node_modules/rollup/dist/rollup.js:8602:28
[10:27:44]  sass started ...
[10:27:44]  sass failed:  Cannot generate Sass files without first bundling JavaScript files in order to know all used modules. Please build JS files first.
[10:27:44]  build prod failed:  Build failed

$ ls -1 .tmp/app/
app.component.ts
app.module.ts
main.dev.ts
main.prod.ts

$ tsc -p tsconfig.json
src/app/main.prod.ts(4,36): error TS2307: Cannot find module './app.module.ngfactory'.

Shipped config

$ cat node_modules/@ionic/app-scripts/config/rollup.prod.config.js

const rollupConfig = require('./rollup.config');

// https://github.com/rollup/rollup/wiki/JavaScript-API

rollupConfig.entry = '.tmp/app/main.prod.js';
module.exports = rollupConfig;
1 Like
2

OK - I’ve found where is the issue - node version.

What is not good is that none of LTS versions 4.4.7/4.6.0 doesn’t work.

It works with v5.10.1 and v6.7.0.

1 Like
3

There are so many gaps in the migration steps that it’s surprising to me that they pushed this out when they did… this release needed a few more days of testing and documentation refinement (imo)… I’ve wasted around 5+ hours on things like this, and other legit bugs. The Ionic Team is amazing, no doubt, but this release (while massive and a big step forward), was not ready.

4 Likes
4

If you want to find our more about why your typescript is not building, add "diagnostics": true to the compilerOptions section of tsconfig.json. Typescript 2.0 is much more resiliant with type and function signature errors than before and even projects that built before will now fail.

Unfortunately without this the only indicator you will see in the log if the said “Error: Could not resolve entry (.tmp/app/main.prod.js)”

2 Likes
5

Are you using npm 2.x or 3.x? Node.js 4.x comes with npm@2.x and I have been reading that Ionic RC.0 needs npm@3.x

If you are not, npm i npm -g should do it.

6

Updating of NPM solves problem:

$ node --version
v4.4.7

$ npm --version
3.10.8

$ npm run build

> ionic-app-base@ build /home/vukasin/tabs
> ionic-app-scripts build

[16:30:29]  ionic-app-scripts 0.0.23
[16:30:29]  build prod started ...
[16:30:29]  clean started ...
[16:30:29]  clean finished in 18 ms
[16:30:29]  copy started ...
[16:30:29]  ngc started ...
[16:30:29]  lint started ...
[16:30:29]  copy finished in 216 ms
[16:30:30]  lint finished in 1.30 s
[16:30:46]  ngc finished in 16.99 s
[16:30:46]  bundle prod started ...
[16:30:54]  bundle prod finished in 8.35 s
[16:30:54]  sass started ...
[16:30:59]  sass finished in 4.84 s
[16:30:59]  minify started ...
[16:30:59]  cleancss started ...
[16:30:59]  uglifyjs started ...
[16:31:11]  cleancss finished in 12.05 s
[16:31:11]  uglifyjs finished in 12.05 s
[16:31:11]  minify finished in 12.06 s
[16:31:11]  build prod finished in 42.29 s