search

ionic-team / ionic-app-scripts

App Build Scripts for Ionic Projects
http://ionicframework.com/
MIT License
608 stars 302 forks source link

RC3 - error "build dev failed: Cannot read property 'indexOf' of undefined #468

Closed cyberbobjr closed 7 years ago

cyberbobjr commented 7 years ago

Hi, i have this error : "build dev failed: Cannot read property 'indexOf' of undefined "

when i use "ionic serve"

but if i run "ionic build browser", everything is ok.

I've removed all my node_modules and do a fresh "npm install". I've deleted the ".tmp" & "www" dir too, but the error still displaying.

Can it be possible to have some detailled information from the console, because the error message is really "light"

Please can you help me ? Thanks you, best regards

This is my ionic info :

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.12 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: 1.9.0 ios-sim version: 5.0.11 OS: OS X El Capitan Node Version: v6.7.0 Xcode version: Xcode 8.1 Build version 8B62

and my package.json :

{ "name": "H2EAU_Mesures", "author": "Benjamin MARCHAND - Key-conseil.fr", "homepage": "http://techique.h2eauassistance.com", "private": true, "scripts": { "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "config": { "ionic_bundler": "webpack" }, "dependencies": { "@angular/common": "2.1.1", "@angular/compiler": "2.1.1", "@angular/compiler-cli": "2.1.1", "@angular/core": "2.1.1", "@angular/forms": "2.1.1", "@angular/http": "2.1.1", "@angular/platform-browser": "2.1.1", "@angular/platform-browser-dynamic": "2.1.1", "@angular/platform-server": "2.1.1", "@ionic/cloud-angular": "^0.7.0", "@ionic/storage": "1.1.6", "@types/lodash": "4.14.38", "angular2-google-maps": "0.16.0", "angular2-jwt": "0.1.25", "angular2-uuid": "1.1.0", "intl": "^1.2.5", "ionic-angular": "2.0.0-rc.3", "ionic-native": "2.2.3", "ionicons": "3.0.0", "lodash": "4.17.0", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.26" }, "devDependencies": { "@ionic/app-scripts": "0.0.45", "typescript": "2.0.6" }, "cordovaPlugins": [ "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "ionic-plugin-keyboard", "uk.co.workingedge.phonegap.plugin.launchnavigator" ], "cordovaPlatforms": [ "ios", { "platform": "ios", "version": "", "locator": "ios" } ], "description": "H2EAU Mesures" }

cyberbobjr commented 7 years ago

Ok, i've find it : my typings/index.d.ts have some old typings, i remove the lines and everything is ok. This is how i found the bug : i compiled manually my .ts and i see the error output from the compiler.

Barryrowe commented 7 years ago

I reported this on the [0.0.42] issue but this one seems more relevant.

I do not have any typings, I'm using the @types includes in package.json.

I am seeing this same issue. I do not have any modifications to the build setup. The biggest issue for me here, is that I don't know where to start digging. With the "hidden from the devloper" approach to the build config, things like this take way longer to debug.

output from ionic info:

Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

Package JSON:

{
  "name": "armadilo",
  "description": "armadilo: An Ionic project",
  "version": "1.0.3",  
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve --watch",
    "package": "ionic build ios",
    "package-test": "ENV=TEST && ionic build ios",
    "package-prod": "ENV=PROD && ionic build ios",
    "safe-install": "set http_proxy=http://OURPROXY:OURPORT && npm install",
    "start": "ionic serve --browser chrome --platform ios",
    "startlab": "ionic serve --browser chrome --lab",
    "test": "./node_modules/.bin/karma start"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@lge/ng2-cc": "^1.1.0",
    "angular2-busy": "1.0.2",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "openlayers": "3.18.2",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/openlayers":"3.18.40",
    "@types/lodash":"4.14.41",
    "@types/moment":"2.13.0",
    "@ionic/app-scripts": "0.0.45",    
    "typescript": "2.0.6"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios"
  ]  
}

ionic serve output:

> ionic-app-scripts serve --watch

[12:26:48]  ionic-app-scripts 0.0.45
[12:26:49]  watch started ...
[12:26:49]  build dev started ...
[12:26:49]  clean started ...
[12:26:49]  clean finished in 9 ms
[12:26:49]  copy started ...
[12:26:49]  transpile started ...
[12:27:04]  build dev failed: Cannot read property 'indexOf' of undefined
Config file "D:\git-repos\armadilo-upgrade\--" not found. Using defaults instead.
[12:27:04]  copy finished in 14.86 s
[12:27:04]  watch ready in 15.00 s
[12:27:04]  dev server running: http://localhost:8100/
ekrapfl commented 7 years ago

I am also seeing the same error

Here is my output from a serve --debug:

D:\CgMobile>ionic serve

Running 'serve:before' npm script before serve

> cgmobile2@0.1.0 watch D:\CgMobile
> ionic-app-scripts watch --debug

[07:23:48]  ionic-app-scripts 0.0.46
[07:23:48]  watch started ... MEM: 86.0MB
[07:23:48]  build dev started ... MEM: 86.0MB
[07:23:48]  clean started ... MEM: 86.0MB
[ DEBUG! ]  clean D:\CgMobile\www\build  MEM: 86.1MB
[07:23:48]  clean finished in 1 ms MEM: 86.1MB
[07:23:48]  copy started ... MEM: 86.1MB
[07:23:48]  transpile started ... MEM: 86.3MB
[07:23:56]  build dev failed: Cannot read property 'indexOf' of undefined  MEM: 298.5MB
[ DEBUG! ]  TypeError: Cannot read property 'indexOf' of undefined at loadDiagnostic
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:47:27) at
            D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:12:16 at Array.map (native) at
            Object.runTypeScriptDiagnostics
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:11:26) at
            D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:98:47 at transpileWorker
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:68:12) at Object.transpile
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:26:12) at buildDev
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:86:24) at buildWorker
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:37:12) at Object.build
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:21:12)  MEM: 298.5MB
[07:23:57]  copy: Error copying "D:\CgMobile\node_modules\ionicons\dist\fonts" to "D:\CgMobile\www\assets\fonts"
[07:23:57]  copy finished in 9.21 s MEM: 329.5MB
[ DEBUG! ]  watcher ready:
                D:\CgMobileD:\CgMobile\src\assets\,D:\CgMobile\src\index.html,D:\CgMobile\src\manifest.json,D:\CgMobile\src\service-worker.js,node_modules\ionic-angular\polyfills\polyfills.js,nod
e_modules\ionicons\dist\fonts\,node_modules\ionic-angular\fonts\
            MEM: 303.9MB
[ DEBUG! ]  watcher ready: D:\CgMobileD:\CgMobile\src\**\*.(ts|html|scss)  MEM: 303.9MB
[07:23:57]  watch ready in 9.36 s MEM: 303.9MB

And then the Ionic Info:

    D:\CgMobile>ionic info

    Your system information:

    ordova CLI: 6.4.0
    Ionic Framework Version: 2.0.0-rc.3
    Ionic CLI Version: 2.1.13
    Ionic App Lib Version: 2.1.7
    Ionic App Scripts Version: 0.0.46
    ios-deploy version: Not installed
    ios-sim version: Not installed
    OS: Windows 10
    Node Version: v6.9.1
    Xcode version: Not installed
Barryrowe commented 7 years ago

@ekrapfl I didn't know about the debug flag. This is the same error I'm seeing, with the typescript-logger trying to call indexOf on an undefined object.

Barryrowe commented 7 years ago

Ok, So I followed the errors and in each place an undefined object was getting refrenced, I protected against it. In the end, I found that a bunch of typescript type errors were being encountered that were failing to get reported.

I updated the following lines in node_modules/@ionic/app-scripts/dist/logger/logger-typescript.js

47   if (errorLine.html && errorLine.html.indexOf('class="hljs') === -1) {
68   if (previousLine.html && previousLine.html.indexOf('class="hljs') === -1) {
85   if (nextLine.html && nextLine.html.indexOf('class="hljs') === -1) {

I updated the following lines in node_modules/@ionic/app-scripts/dist/logger/logger-diagnostics.js

257    if (lines[i][code] == undefined || lines[i][code].length < 1) {

I updated the following lines in node_modules/@ionic/app-scripts/dist/highlight/highlight.js

131    if (errorCharStart < 0 || errorLength < 1 || htmlInput == undefined)

Now all of this just leads me to getting Typescript output again. What I'm running into now is that I'm getting Typescript errors about duplicate core-js definitions. If I remove the @types/core-js dependency, then I get typescript errors importing items from another module because that module expects core-js types....

ekrapfl commented 7 years ago

I just learned about the debug flag today 😄

I have also sprinkled a bit of logging code around the area that is failing, and it looks like this (sorry for the large amount of text here):

D:\CgMobile>ionic serve

Running 'serve:before' npm script before serve

> cgmobile2@0.1.0 watch D:\CgMobile
> ionic-app-scripts watch --debug

[12:45:54]  ionic-app-scripts 0.0.46
[12:45:54]  watch started ... MEM: 86.1MB
[12:45:54]  build dev started ... MEM: 86.1MB
[12:45:54]  clean started ... MEM: 86.1MB
[ DEBUG! ]  clean D:\CgMobile\www\build  MEM: 86.1MB
[12:45:54]  clean finished in 6 ms MEM: 86.2MB
[12:45:54]  copy started ... MEM: 86.2MB
[12:45:54]  transpile started ... MEM: 86.3MB
**********************************
absFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

relFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

sourceText: interface Cordova {
        getAppVersion: {
                getAppName: () => Promise<string>;
                getPackageName: () => Promise<string>;
                getVersionCode: () => Promise<string>;
                getVersionNumber: () => Promise<string>;
        };
}

,},,    };      getVersionNumber: () => Promise<string>;

srcLines.length: 10

,}      };      getVersionNumber: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

htmlLines.length: 8

posData.line: 2

errorLine.html:                 getAppName: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

errorLine.text:                 getAppName: () => Promise<string>;

**********************************
**********************************
absFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

relFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

sourceText: interface Cordova {
        getAppVersion: {
                getAppName: () => Promise<string>;
                getPackageName: () => Promise<string>;
                getVersionCode: () => Promise<string>;
                getVersionNumber: () => Promise<string>;
        };
}

,},,    };      getVersionNumber: () => Promise<string>;

srcLines.length: 10

,}      };      getVersionNumber: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

htmlLines.length: 8

posData.line: 3

errorLine.html:                 getPackageName: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

errorLine.text:                 getPackageName: () => Promise<string>;

**********************************
**********************************
absFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

relFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

sourceText: interface Cordova {
        getAppVersion: {
                getAppName: () => Promise<string>;
                getPackageName: () => Promise<string>;
                getVersionCode: () => Promise<string>;
                getVersionNumber: () => Promise<string>;
        };
}

,},,    };      getVersionNumber: () => Promise<string>;

srcLines.length: 10

,}      };      getVersionNumber: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

htmlLines.length: 8

posData.line: 4

errorLine.html:                 getVersionCode: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

errorLine.text:                 getVersionCode: () => Promise<string>;

**********************************
**********************************
absFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

relFileName: D:/CgMobile/custom-typings/cordova-plugin-app-version.d.ts

sourceText: interface Cordova {
        getAppVersion: {
                getAppName: () => Promise<string>;
                getPackageName: () => Promise<string>;
                getVersionCode: () => Promise<string>;
                getVersionNumber: () => Promise<string>;
        };
}

,},,    };      getVersionNumber: () => Promise<string>;

srcLines.length: 10

,}      };      getVersionNumber: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

htmlLines.length: 8

posData.line: 5

errorLine.html:                 getVersionNumber: () =&gt; Promise&lt;<span class="hljs-built_in">string</span>&gt;;

errorLine.text:                 getVersionNumber: () => Promise<string>;

**********************************
**********************************
absFileName: D:/CgMobile/node_modules/@angular/common/src/pipes/async_pipe.d.ts

relFileName: D:/CgMobile/node_modules/@angular/common/src/pipes/async_pipe.d.ts

sourceText: import { ChangeDetectorRef, OnDestroy } from '@angular/core';
import { EventEmitter, Observable } from '../facade/async';
/**
* @ngModule CommonModule
* @whatItDoes Unwraps a value from an asynchronous primitive.
* @howToUse `observable_or_promise_expression | async`
* @description
* The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has
* emitted. When a new value is emitted, the `async` pipe marks the component to be checked for
* changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
* potential memory leaks.
*
*
* ## Examples
*
* This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
* promise.
*
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'}
*
* It's also possible to use `async` with Observables. The example below binds the `time` Observable
* to the view. The Observable continuesly updates the view with the current time.
*
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
*
* @stable
*/
export declare class AsyncPipe implements OnDestroy {
    private _ref;
    private _latestValue;
    private _latestReturnedValue;
    private _subscription;
    private _obj;
    private _strategy;
    constructor(_ref: ChangeDetectorRef);

    ngOnDestroy(): void;
    transform(obj: Observable<any> | Promise<any> | EventEmitter<any>): any;
    private _subscribe(obj);
    private _selectStrategy(obj);
    private _dispose();
    private _updateLatestValue(async, value);
}

srcLines: import { ChangeDetectorRef, OnDestroy } from '@angular/core';,import { EventEmitter, Observable } from '../facade/async';,/**, * @ngModule CommonModule, * @whatItDoes Unwraps a valu
e from an asynchronous primitive., * @howToUse `observable_or_promise_expression | async`, * @description, * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest
value it has, * emitted. When a new value is emitted, the `async` pipe marks the component to be checked for, * changes. When the component gets destroyed, the `async` pipe unsubscribes auto
matically to avoid, * potential memory leaks., *, *, * ## Examples, *, * This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the, * promise., *, * {@example com
mon/pipes/ts/async_pipe.ts region='AsyncPipePromise'}, *, * It's also possible to use `async` with Observables. The example below binds the `time` Observable, * to the view. The Observable co
ntinuesly updates the view with the current time., *, * {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}, *, * @stable, */,export declare class AsyncPipe implements OnDes
troy {,    private _ref;,    private _latestValue;,    private _latestReturnedValue;,    private _subscription;,    private _obj;,    private _strategy;,    constructor(_ref: ChangeDetectorRe
f);,    ngOnDestroy(): void;,    transform(obj: Observable<any> | Promise<any> | EventEmitter<any>): any;,    private _subscribe(obj);,    private _selectStrategy(obj);,    private _dispose()
;,    private _updateLatestValue(async, value);,},,,

[12:46:03]  build dev failed: Cannot read property 'indexOf' of undefined srcLines.length: 45

htmlLines: <span class="hljs-keyword">import</span> { ChangeDetectorRef, OnDestroy } from <span class="hljs-string">'@angular/core'</span>;,<span class="hljs-keyword">import</span> { EventEmi
tter, Observable } from <span class="hljs-string">'../facade/async'</span>;,<span class="hljs-comment">/**, * @ngModule CommonModule, * @whatItDoes Unwraps a value from an asynchronous primit
ive., * @howToUse `observable_or_promise_expression | async`, * @description, * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has, * emitted. Whe
n a new value is emitted, the `async` pipe marks the component to be checked for, * changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid, * potenti
al memory leaks., *, *, * ## Examples, *, * This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the, * promise., *, * {@example common/pipes/ts/async_pipe.ts re
gion='AsyncPipePromise'}, *, * It's also possible to use `async` with Observables. The example below binds the `time` Observable, * to the view. The Observable continuesly updates the view wi
th the current time., *, * {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}, *, * @stable, */</span>,<span class="hljs-keyword">export</span> <span class="hljs-keyword">d
eclare</span> <span class="hljs-keyword">class</span> AsyncPipe <span class="hljs-keyword">implements</span> OnDestroy {,    <span class="hljs-keyword">private</span> _ref;,    <span class="h
ljs-keyword">private</span> _latestValue;,    <span class="hljs-keyword">private</span> _latestReturnedValue;,    <span class="hljs-keyword">private</span> _subscription;,    <span class="hlj
s-keyword">private</span> _obj;,    <span class="hljs-keyword">private</span> _strategy;,    <span class="hljs-keyword">constructor</span>(_ref: ChangeDetectorRef);,    ngOnDestroy(): void;,
transform(obj: Observable&lt;any&gt; | Promise&lt;any&gt; | EventEmitter&lt;any&gt;): any;,    private _subscribe(obj);,    private _selectStrategy(obj);,    private _dispose();,    privat
e _updateLatestValue(async, value);,},

htmlLines.length: 43

posData.line: 43

errorLine.html: undefined

errorLine.text:

**********************************
MEM: 298.3MB
[ DEBUG! ]  TypeError: Cannot read property 'indexOf' of undefined at loadDiagnostic
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:59:27) at
            D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:12:16 at Array.map (native) at
            Object.runTypeScriptDiagnostics
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\logger\logger-typescript.js:11:26) at
            D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:98:47 at transpileWorker
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:68:12) at Object.transpile
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\transpile.js:26:12) at buildDev
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:86:24) at buildWorker
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:37:12) at Object.build
            (D:\CgMobile\node_modules\@ionic\app-scripts\dist\build.js:21:12)  MEM: 298.3MB
[12:46:03]  copy: Error copying "D:\CgMobile\node_modules\ionicons\dist\fonts" to "D:\CgMobile\www\assets\fonts"
[12:46:03]  copy finished in 9.12 s MEM: 329.5MB
[ DEBUG! ]  watcher ready:
            D:\CgMobileD:\CgMobile\src\assets\,D:\CgMobile\src\index.html,D:\CgMobile\src\manifest.json,D:\CgMobile\src\service-worker.js,node_modules\ionic-angular\polyfills\polyfills.js,nod
e_modules\ionicons\dist\fonts\,node_modules\ionic-angular\fonts\
            MEM: 303.4MB
[ DEBUG! ]  watcher ready: D:\CgMobileD:\CgMobile\src\**\*.(ts|html|scss)  MEM: 303.4MB
[12:46:03]  watch ready in 9.28 s MEM: 303.4MB
ekrapfl commented 7 years ago

@Barryrowe, I plugged in your code, and now I am seeing tons of errors with simple things like Cannot find name 'Promise'. and Cannot find name 'expect'. in my spec files.

Barryrowe commented 7 years ago

@ekrapfl sounds like you're closer to the end than me. If you go into your tsconfig.json file and update your "exclude" block like:

"exclude": [
"node_modules",
"**/*spec.ts"
]

That might get you through this step at least...

ekrapfl commented 7 years ago

I tried that, and it didn't really change much for me. I am still getting the promise errors in my source code (not just spec files).

wspresto commented 7 years ago

@ekrapfl I had the same issue. I removed the core-js typings from @typings/ folder to get past it. Dunno if that helps. Currently I am struggling to get ionic app scripts to work while pulling in libraries via a cdn. No luck so far.

Barryrowe commented 7 years ago

@ekrapfl @wspresto you could try installing the @types/core-js package. I know that the typings folder should be removed now that everything has moved to typescript 2, and the @types/core-js package should provide the Promise types that you all need.

However, for me it removes some errors, and creates "duplicate PropertyKey" errors because of an npm installed module.

wspresto commented 7 years ago

I think i will create a separate issue in this forum for external dependencies, because I was able to fix my issue after several days of head banging. This thread helped me to get typescript working. As an aside, this has been a nasty introduction to Angular 2 for me. Ionic App Scripts seems to be a bad direction for ionic apps.

Barryrowe commented 7 years ago

@wspresto I agree so far. I have never been a fan of hiding things from developers, and ionic-app-scripts hides so much "magic" that any use-case outside of the basic tests in the starter apps seem to fail mysteriously.

Dealing with a webpack config directly and having full control over your build scripts would feel much better.

bitjson commented 7 years ago

(Having the same issue as https://github.com/driftyco/ionic-app-scripts/issues/468#issuecomment-263648403)

I've been generally very impressed with ionic-app-scripts already – I definitely appreciate the simplicity. Something that might help with the above issue is to "switch to debugging mode" if an error is encountered.

Even if a user didn't run with the --debug flag, any errors thrown by the build process should at least be fully-logged to the console.

KiaraGrouwstra commented 7 years ago

Thanks @Barryrowe, I made a PR to merge your fixes back upstream.

P.S.: it appears 90% of my 'hidden' errors pertained <COMP>.ngfactory.ts files, the result of ng2's AoT compilation.

Barryrowe commented 7 years ago

@tycho01 cool. This makes sense. I noticed I didn't have any issues after a full clean, and I know I had been trying to run ionic:build prior to running into this.

As for anyone running into an issue with core-js like I was, I ended up using a fix from a forum post, that I unfortunately don't have at the moment. but I did the following:

  1. Commented out the "libs" property in tsconfig.json
  2. npm install @types/core-js --save-dev
  3. Add "types":[ "core-js"] to my tsconfig.json

I had to do this because a library we install is including core-js types, so they aren't recognized without the @types, and then with the "libs" configuration in the default ionic tsconfig.json there's a duplication of some common types for dropping down to es5 compilation.

ShenglinGuo commented 7 years ago

Hi, Just like to share my experience, I got this 'indexOf' of undefined error on our new project, our project builds ok on Windows (10, 2012) but as soon as we tried to ionic serve or ionic build the project on Mac, I get the error. After hours of frustration, I came across this hint where the person suggest compile typescript manually and see if there are any errors.

https://forum.ionicframework.com/t/rc3-error-build-dev-failed-cannot-read-property-indexof-of-undefined/71168/2

and then I went in the compiled all TS files in project using WebStorm built in compiler. I was getting loadS of error from typing files in node_modules

then found and applied suggestion from this stack flow article http://stackoverflow.com/questions/39775550/typescript-2-0-throws-errors-from-excluded-files

i.e. add "types": [] to compilerOptions { "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "dom", "es2015" ], "module": "es2015", "moduleResolution": "node", "sourceMap": true, "target": "es5", "types": [] }, "include": [ "src/*/.ts" ], "exclude": [ "node_modules" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

no more compiler error from the project and therefore no more 'indexOf' of undefined, the project is building ok now.

Ionic Info Your system information:

Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.4.0

Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.14 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.46 ios-deploy version: 1.9.0 ios-sim version: 5.0.12 OS: macOS Sierra Node Version: v6.9.1 Xcode version: Xcode 8.1 Build version 8B62

ascorbic commented 7 years ago

I think the key point here is that everyone is getting this error for different reasons, because the indexOf error is only encountered when there is another TypeScript error. That's why there are so many contradicting tips on how to fix it. The fix is in PR #502 which should then reveal whichever underlying error you have.

danbucholtz commented 7 years ago

I merged the PR (and made a few slight modifications for the code consistency/quality). Please let me know if this fixes the issue or if there is a concrete way to reproduce. I am having a hard time recreating this issue.

Please make sure sourceMap is set to true in the tsconfig as seen here. https://github.com/driftyco/ionic2-app-base/blob/master/tsconfig.json#L13

Thanks, Dan

danielehrhardt commented 7 years ago

Hi you can recreating the error if you run npm install firebase angular2 --save add import firebase from 'firebase';

and run ionic serve

but it is more like a problem with angularfire2 https://github.com/angular/angularfire2/issues/707

https://forum.ionicframework.com/t/build-dev-failed-cannot-read-property-indexof-of-undefined/71506 and your base app is deprecated (only as information) image

Thanks, Daniel

danbucholtz commented 7 years ago

@danielehrhardt, yep, we will publish the new app base when we publish RC4. We've seen some delays there. It should be coming soon.

Thanks, Dan

subbunama commented 7 years ago

@danbucholtz , As we haunt with build dev failed: Cannot read property 'indexOf' of undefined error, Can you please tell us, what could be the best possible way to move forward with development, with out waiting for RC4 and Any planned date to release RC4. Can you look into below files and suggest something to move forward with development work

Packages.json:

{ "name": "ionic-hello-world", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "2.1.1", "@angular/compiler": "2.1.1", "@angular/compiler-cli": "2.1.1", "@angular/core": "2.1.1", "@angular/forms": "2.1.1", "@angular/http": "2.1.1", "@angular/platform-browser": "2.1.1", "@angular/platform-browser-dynamic": "2.1.1", "@angular/platform-server": "2.1.1", "@angular/router": "^3.1.0", "@ionic/storage": "1.1.6", "ionic-angular": "2.0.0-rc.3", "ionic-native": "2.2.3", "ionicons": "3.0.0", "ng2-file-upload": "^1.1.4-2", "ng2-pdf-viewer": "^0.1.2", "rxjs": "5.0.0-beta.12", "zone.js": "0.6.26" }, "devDependencies": { "@ionic/app-scripts": "0.0.45", "typescript": "2.0.6" }, "description": "test: An Ionic project", "cordovaPlugins": [ "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "ionic-plugin-keyboard" ], "cordovaPlatforms": [] }

tsconfig.json:

{ "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "dom", "es2015" ], "module": "es2015", "moduleResolution": "node", "sourceMap": true, "target": "es5" }, "include": [ "src/*/.ts" ], "exclude": [ "node_modules" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

ilaipi commented 7 years ago

I met this problem. And I found that it seems like called by @angular/router

because when I add line 

import { Routes, RouterModule } from '@angular/router';

in my routing file and then I got the error.

the full content of my routing file is:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthPage } from '../pages/session/login';

export class AppRoutingModule { }

If I remove the 2nd line, it will be ok.But...

And I also tried replace 2nd line with import '@angular/router', the same error.

danbucholtz commented 7 years ago

@subbunama, Sorry, I have no idea what the issue is without code and I don't have time to read through your code to figure it out. The null pointers should be fixed in 0.0.48 coming out tomorrow. As for the cause, I'm not entirely sure.

Thanks, Dan

codestorycooked commented 7 years ago

Hello All, I had same issue I FIXED this with following: deleted node_modules Update package.config from (rc4) https://github.com/driftyco/ionic/blob/master/CHANGELOG.md DO RETAIN your existing paackages Followed instruction https://github.com/driftyco/ionic-app-scripts/blob/master/CHANGELOG.md as there are breaking changes. (READ AND UPDATE CAREFULLY) npm install

I hope it helps

Thanks Kunal

danbucholtz commented 7 years ago

I believe this is fixed.

We published 1.0.0 of app-scripts tonight! 🎉

Thanks, Dan