Field 'browser' doesn't contain a valid alias configuration

Ionic Framework ionic-v3
1

Tried to use --prod with run android command but getting this error:

Module not found: Error: Can't resolve './app.module.ngfactory' in '/Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/src/app'
resolve './app.module.ngfactory' in '/Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/src/app'
  using description file: /Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/package.json (relative path: ./src/app)
    using description file: /Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/package.json (relative path: ./src/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/Aditya/Desktop/Drive/work/ionic-apps/Tech9Mage/src/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration```
2

I am facing the same issue, tried to solve using Stackoverflow and Github but still not resolved.

Running app-scripts build: --prod --platform android --target cordova
[15:51:12] build prod started …
[15:51:12] clean started …
[15:51:12] clean finished in 4 ms
[15:51:12] copy started …
[15:51:12] deeplinks started …
[15:51:12] deeplinks finished in 155 ms
[15:51:12] ngc started …
[15:51:27] ngc finished in 14.88 s
[15:51:27] preprocess started …
[15:51:27] preprocess finished in 3 ms
[15:51:27] webpack started …
[15:51:28] copy finished in 15.88 s
Error: ./src/app/main.ts
Module not found: Error: Can’t resolve ‘./app.module.ngfactory’ in 'd:\iapp\GitApp\src\app’
resolve ‘./app.module.ngfactory’ in 'd:\iapp\GitApp\src\app’
using description file: d:\iapp\GitApp\package.json (relative path: ./src/app)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: d:\iapp\GitApp\package.json (relative path: ./src/app)
using description file: d:\iapp\GitApp\package.json (relative path: ./src/app/app.module.ngfactory)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
d:\iapp\GitApp\src\app\app.module.ngfactory doesn’t exist
.ts
Field ‘browser’ doesn’t contain a valid alias configuration
d:\iapp\GitApp\src\app\app.module.ngfactory.ts doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
d:\iapp\GitApp\src\app\app.module.ngfactory.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
d:\iapp\GitApp\src\app\app.module.ngfactory.json doesn’t exist
as directory
d:\iapp\GitApp\src\app\app.module.ngfactory doesn’t exist
[d:\iapp\GitApp\src\app\app.module.ngfactory]
[d:\iapp\GitApp\src\app\app.module.ngfactory.ts]
[d:\iapp\GitApp\src\app\app.module.ngfactory.js]
[d:\iapp\GitApp\src\app\app.module.ngfactory.json]
[d:\iapp\GitApp\src\app\app.module.ngfactory]
@ ./src/app/main.ts 2:0-60
at BuildError.Error (native)
at new BuildError (d:\iapp\GitApp\node_modules@ionic\app-scripts\dist\util\errors.js:16:28)
at callback (d:\iapp\GitApp\node_modules@ionic\app-scripts\dist\webpack.js:121:28)
at emitRecords.err (d:\iapp\GitApp\node_modules\webpack\lib\Compiler.js:269:13)
at Compiler.emitRecords (d:\iapp\GitApp\node_modules\webpack\lib\Compiler.js:375:38)
at emitAssets.err (d:\iapp\GitApp\node_modules\webpack\lib\Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (d:\iapp\GitApp\node_modules\webpack\lib\Compiler.js:368:12)
at next (d:\iapp\GitApp\node_modules\tapable\lib\Tapable.js:218:11)
at Compiler.compiler.plugin (d:\iapp\GitApp\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (d:\iapp\GitApp\node_modules\tapable\lib\Tapable.js:222:13)

3

I have created a new project and not getting any error… ionic cordova platform add android@6.2.2

4

Same problem here

cli packages: (/Users/dev/.virtualenvs/myapp/lib/node_modules)

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

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.3
    ios-deploy        : 1.9.2
    ios-sim           : 6.1.2
    Node              : v6.11.5
    npm               : 3.10.10
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

Environment Variables:

    ANDROID_HOME : /Users/dev/Library/Android/sdk

Misc:

    backend : pro

package.json

  "name": "MyApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.1.3",
    "android-versions": "^1.2.1",
    "cordova-android": "^6.3.0",
    "cordova-ios": "^4.5.1",
    "cordova-plugin-crosswalk-webview": "^2.3.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.1.14",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "mapbox-gl": "^0.40.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "engine": {
    "node": "6.11.5",
    "ionic": "3.17.0",
    "cordova": "7.1.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.0",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-crosswalk-webview": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}
5

follow here to find cause.

1 Like
6

Followed this and now i am not getting error:

I did only two things ->

Set Typescript to ~2.4.2
Set Angular to 5.0.0

Here are the general instructions that were sent around to testers and some early adopters that we asked to test out the next release:

Set Typescript to ~2.4.2
Set Angular to 5.0.0
Set @ionic/app-scripts to nightly
Set ionic-angular to nightly
Set @ionic/storage to 2.1.3
Set rxjs to 5.5.2
Run npm install
Double check that all of that was done on your project that is failing.
7

show your package json

8 
{
    "name": "App Name",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.0.0",
        "@angular/compiler": "5.0.0",
        "@angular/compiler-cli": "5.0.0",
        "@angular/core": "5.0.0",
        "@angular/forms": "5.0.0",
        "@angular/http": "5.0.0",
        "@angular/platform-browser": "5.0.0",
        "@angular/platform-browser-dynamic": "5.0.0",
        "@ionic-native/core": "4.4.0",
        "@ionic-native/keyboard": "^4.4.2",
        "@ionic-native/photo-viewer": "^4.4.2",
        "@ionic-native/splash-screen": "4.4.0",
        "@ionic-native/status-bar": "4.4.0",
        "@ionic/app-scripts": "^3.1.1",
        "@ionic/storage": "2.1.3",
        "com-sarriaroman-photoviewer": "^1.1.11",
        "cordova-android": "^6.2.3",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.16",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "woocommerce-api": "^1.4.2",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.1.1",
        "typescript": "~2.4.2"
    },
    "description": "App Name App Project",
    "cordova": {
        "plugins": {
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "com-sarriaroman-photoviewer": {}
        },
        "platforms": [
            "android"
        ]
    }
}
9

Hi!
Were you able to find a solution to this problem?

10

Hello @vks_gautam1 @iapprakesh @aditya_1027
Were you able to find a solution to this problem?

11

Also having the same problem.
We had moved most of our Type Script to a shared folder and then import the path. Dev’s build just fine, but using --prod causes errors.

No description file found
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/home/user/dev/Ionic-App/apps/modules/login/terms/terms.modal.ngfactory doesn’t exist
.ts

The only suggestions I can see is maybe update angular? Not sure how to do that with Ionic, will that screw up ionic?