Ionic-app-scripts: Template paths are not resolved correctly

[Manduro]

Short description of the problem:

The watch task fails to start with a lot of errors. It seems to be using a wrong path (src/src). It worked on 0.0.30, but fails on 0.0.31 and up.

It also seems unable to find main.dev.ts, while the path that is logged is correct.

[10:06:18]  ionic-app-scripts 0.0.33 
[10:06:18]  watch started ... MEM: 90.5MB 
[10:06:18]  build dev started ... MEM: 90.5MB 
[10:06:18]  clean started ... MEM: 90.5MB 
[ DEBUG! ]  clean /path/to/app/folder/www/build MEM: 90.5MB 
[10:06:18]  clean finished in 6 ms MEM: 90.5MB 
[10:06:18]  copy started ... MEM: 90.5MB 
[ DEBUG! ]  worker created, task: lint, pid: 3570 MEM: 90.7MB 
[10:06:18]  transpile started ... MEM: 90.7MB 
[ DEBUG! ]  ts.createProgram, cachedProgram: false MEM: 101.9MB 
[ DEBUG! ]  tslint config: /path/to/app/folder/tslint.json MEM: 53.5MB 
[10:06:19]  lint started ... MEM: 53.7MB 
//
// This repeats for all of my pages and components that are using a template file:
//
[10:06:28]  template error, "/path/to/app/folder/src/src/components/calendar/calendar.html":  MEM: 253.4MB

            Error: ENOENT: no such file or directory, open '/path/to/app/folder/src/src/components/calendar/calendar.html' 
[10:06:28]  template error, "/path/to/app/folder/src/src/pages/calendar/calendar.html":  MEM: 253.4MB
            Error: ENOENT: no such file or directory, open '/path/to/app/folder/src/src/pages/calendar/calendar.html' 

[10:06:28]  template error, "/path/to/app/folder/src/src/app/app.template.html": Error:  MEM: 256.3MB

            ENOENT: no such file or directory, open '/path/to/app/folder/src/src/app/app.template.html' 

[ DEBUG! ]  Error matching component: Component({ templateUrl: 'app.template.html' }) MEM: 256.3MB 
//
// End repeat
//
[10:06:28]  transpile finished in 9.78 s MEM: 256.4MB 
[10:06:28]  bundle started ... MEM: 256.4MB 
[ DEBUG! ]  entry: /path/to/app/folder/src/app/main.dev.ts, dest: /path/to/app/folder/www/build/main.js, 
            cache: undefined, format: iife MEM: 256.4MB 
unable to find /path/to/app/folder/src/app/main.dev.ts

[10:06:28]  copy finished in 9.91 s MEM: 256.8MB 
[10:06:32]  lint finished in 13.04 s MEM: 215.8MB 
[ DEBUG! ]  worker resolve, task: lint, pid: 3570 MEM: 215.8MB 
[ DEBUG! ]  worker exited, task: lint, pid: 3570 MEM: 319.9MB 
(node:3569) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Could not resolve './app.module' from /path/to/app/folder/src/app/main.dev.ts

Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100

Which @ionic/app-scripts version are you using?
0.0.33

[konrin]

I have the same problem (src/src)

[rehiy]

me too

[Manduro]

I've found a quickfix, see #162. You can easily apply it locally in your node_modules for now until the Ionic team brings us an updated version :).

[danielcrk-cn]

For me, it actually fails with with a correct path:
unable to find /Users/myusername/dev/myappname/src/app/main.dev.ts

Any ideas? It worked just fine before the update.

Edit: I've applied the fix above, but it's having no effect, the path it's complaining about is still the same.

[Manduro]

@danielcrk-cn You see no other errors? I saw the error you mentioned as well, but after fixing the errors before it, this last error also disappeared.

[danielcrk-cn]

@Manduro I do, my project is old and converted so it has many typescript errors (that are not breaking errors. though), so the only thing I did was to circumvent theif (hasDiagnostics)check and resolve anyway.

The last lines look like this:

[11:35:59]  transpile finished in 9.54 s
[11:35:59]  bundle started ...
unable to find /Users/danielcrkvencic/dev/hygglo-mobile-app/src/app/main.dev.ts

[Manduro]

@danielcrk-cn Weird! Could be a separate issue then.

[danielcrk-cn]

@Manduro Ok, i've just tried this:

Create a new ionic started project and in /pages/home/home.ts, create a simple ts-error, like adding this.foo = 'bar' in the contructor (but without defining this.foo). It is a harmless error that doesn't break the typescript compiler.

Now, in transpile.ts, make the change to ignore the errors, e.g. like this:

        if (hasDiagnostics) {
            // transpile failed :(
            // cachedProgram = cachedTsFiles = null;
            // reject(new logger_1.BuildError());
            cachedProgram = program;
            cachedTsFiles = tsFiles;
            context.tsFiles = tsFiles;
            resolve();
        }
        else {
            // transpile success :)
            // cache the typescript program for later use
            cachedProgram = program;
            cachedTsFiles = tsFiles;
            context.tsFiles = tsFiles;
            resolve();
        }

To me, this looks like it should resolve and proceed despite the errors, but it doesn't. Bundle process starts but never finishes.

Could you pleeease help me getting this to work? Thanks!

Edit: Before todays update, it was building fine so worst case it, I have to go back to the previous version.

[Manduro]

@danielcrk-cn My advice would be to fix those TS errors instead of ignoring them. If you can't fix them you can ask for help on the Ionic forums.

[danielcrk-cn]

@Manduro I know, but sometimes, reality and best practice do not match. It's a huge project that has tons of errors like the one above, and I just need to get the application running, and hopefully have the time later on to fix the ts-errors.

What would be the easiest way to just ignore the errors for now? Can you see a problem width the way i've tried to do it?

[Manduro]

@danielcrk-cn I don't know how to fix your problem, I'm sorry. I do know that this is not the place for your questions, as it's unrelated to this issue. You should take this to the forums to ask for help, or create a feature request in a new issue.

[danbucholtz]

@Manduro and co,

Can you open node_modules/@ionic/app-scripts/dist/transpile.js and comment out line 49?

 // tsConfig.options.outDir = context.srcDir;
tsConfig.options.sourceMap = bundle_1.buildJsSourceMaps(context);
tsConfig.options.declaration = false;

Note the commented out line. I don't think this line is needed. Can you do that and test and let me know?

Thanks,
Dan

[konrin]

@danbucholtz it worked

[danbucholtz]

@konrin,

Thanks! Can a few others test to validate quick and let me know? I want to push this out today.

Thanks,
Dan

[rkostrzewski]

I can confirm it's working after the fix. :+1:

[ShawnXu]

@danbucholtz

Getting this https://forum.ionicframework.com/t/ionic-serve-broken-after-upgrading-to-rc-1/66976/21?u=itlr after apply the hack.

My tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

[danbucholtz]

@ShawnXu,

Sorry, we can't support custom tsconfig. In the future maybe we'll be able to accommodate it but there are a million permutations and it would be very difficult to design a scalable build process around that. Here is what our provided and supported tsconfig looks like.

Thanks,
Dan

[salimchemes]

@danbucholtz I commented the line (tsConfig.options.outDir = context.srcDir;) on transpile.js and 'src/src' issue is gone, but now i have 404 errors to main.js twice and one on main.css. No compilation errors.

Is there any way to execute ionic run browser in dev mode instead prod? I am running cordova run browser. Thanks

[danbucholtz]

@salimchemes,

Are you on windows by chance? I haven't been able to recreate this so this fix is largely guessing.

We are about to publish a new version so once it's out we'll have the masses test it out and see how it goes.

Thanks,
Dan

[aemr3]

how do you make a release before testing all features! ionic serve is broken because of this issue right now.

[danbucholtz]

@aemr3, we test like crazy. Unless users can provide clear reproductions of issues, they're very hard to track and down and fix.

The fix I am referencing above have had 4 other developers on Github tell us this change fixes the issue for them.

Thanks,
Dan

[salimchemes]

@danbucholtz Yes, windows. In prod mode works fine, the issue is just happening on dev

[jlcarvalho]

@danbucholtz I have 404 errors to main.js twice and one on main.css with or without comment the line 49 in both modes, dev and prod.

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

"dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-angular": "^2.0.0-rc.1",
    "ionic-native": "^2.2.3",
    "ionicons": "^3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21",
    "lodash": "^4.16.4",
    "moment": "^2.15.1",
    "pouchdb-browser": "^6.0.6",
    "pouchdb-find": "^0.10.3",
    "pouchdb-load": "^1.4.6"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.33",
    "@types/lodash": "4.14.37",
    "typescript": "^2.0.3"
  }

[cmhand]

Commenting out line 49 in transpile.js did not solve the problem for me. Same "src/src" problem.

• Scratch that, after pulling fresh, it works.

[danbucholtz]

We released a new CLI and a new app-scripts

npm install -g ionic@latest
npm install @ionic/app-scripts

I'm going to close this issue. Please let me know if this fixes it. I'll re-open if needed.

Thanks,
Dan

[Manduro]

@danbucholtz I believe an underlying issue has not yet been resolved. All ts files in the project folder are being transpiled instead of just the ones inside the src folder. I think this is also why you couldn't reproduce this: you didn't have any ts files outside your src folder. When I log the filenames of the ts files that are being transpiled I see the following:

/path/to/app/config/env/alpha/config.ts
/path/to/app/config/env/beta/config.ts
/path/to/app/config/env/dev/config.ts
/path/to/app/config/env/prod/config.ts
/path/to/app/src/app/app.component.ts
/path/to/app/src/app/app.module.ts
/path/to/app/src/app/main.dev.ts
...

These config files are copied to the src folder on watch/build, based on the environment I'm running, so they should not be transpiled by app-scripts.

[salimchemes]

I updated the ionic-app-scripts latest version and i have the 'src' duplicated issue again. Commented it out I get main.js 404 twice and main.scss once.

[danbucholtz]

@salimchemes,

What is the src issue? The path with src/src in it? Are you on Windows, Mac or Linux? Can you create a sample repo showing the issue?

Thanks,
Dan

[danbucholtz]

@Manduro,

I think that's a good idea. I will look into that this morning.

How are you compiling the other .ts files? My approach was going to be use the include option in the tsconfig to only look in src/**/*.ts, but that might break existing set-ups where other typescript is compiled. What do you think is the best approach?

Thanks,
Dan

[Manduro]

@danbucholtz My other .ts files are never compiled while they are outside of the src folder. Based on the current ENV, one of them is copied to src/config.ts before watching/building.

In my opinion everything that should be compiled should be in the src folder, as that's what it's meant for. I don't see any reason why anyone would want to compile files outside it. So your solution using include seems fine to me.

[salimchemes]

@danbucholtz finally it is working. Update failed, once i fix the update to 0.0.36 the issue was fixed. Thanks

[danbucholtz]

@Manduro,

Thanks, we'll probably take that approach, then.

Thanks,
Dan

[danbucholtz]

We updated the tsconfig.json to look like this. Please update yours as well:

https://github.com/driftyco/ionic2-app-base/blob/master/tsconfig.json#L15

[morrisonbrett]

Done. Now I get this:

[09:37:20]  bundle started ...
[09:37:22]  bundle failed: Could not resolve './app.module.ngfactory' from D:\dev\mckissock\mckissock-mobile\.tmp\app\main.prod.ts
[09:37:22]  ionic-app-script task: "build"
[09:37:22]  Error: Could not resolve './app.module.ngfactory' from D:\dev\mckissock\mckissock-mobile\.tmp\app\main.prod.ts

npm ERR! Windows_NT 10.0.14946

[danbucholtz]

@morrisonbrett,

Can you paste the rest of your console output? It seems like the ngc build is not succeeding. Can you look in check for app.module.ngfactory.js in the .tmp directory?

Thanks,
Dan

[morrisonbrett]

I don't see any .js files in /.tmp now. It's just a copy of the .html|.ts files.

Here's the full output:

D:\dev\mckissock\mckissock-mobile>ionic build browser

Running 'build:before' npm script before build

> mckissockmobile@ build D:\dev\mckissock\mckissock-mobile
> ionic-app-scripts build

[09:37:15]  ionic-app-scripts 0.0.36
[09:37:15]  build prod started ...
[09:37:15]  clean started ...
[09:37:15]  clean finished in 3 ms
[09:37:15]  copy started ...
[09:37:15]  ngc started ...
[09:37:15]  copy finished in 101 ms
[09:37:15]  lint started ...
[09:37:19]  lint finished in 4.02 s
[09:37:20]  ngc finished in 5.19 s
[09:37:20]  bundle started ...
[09:37:22]  bundle failed: Could not resolve './app.module.ngfactory' from D:\dev\mckissock\mckissock-mobile\.tmp\app\main.prod.ts
[09:37:22]  ionic-app-script task: "build"
[09:37:22]  Error: Could not resolve './app.module.ngfactory' from D:\dev\mckissock\mckissock-mobile\.tmp\app\main.prod.ts

npm ERR! Windows_NT 10.0.14946
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\b\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" "--color"
npm ERR! node v4.6.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! mckissockmobile@ build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mckissockmobile@ build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mckissockmobile package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mckissockmobile
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mckissockmobile
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\dev\mckissock\mckissock-mobile\npm-debug.log
Caught exception:
 undefined

Mind letting us know? https://github.com/driftyco/ionic-cli/issues


D:\dev\mckissock\mckissock-mobile>

[morrisonbrett]

Also getting undefined now in app.module.ts. See attached screenshot of code.

[danbucholtz]

@morrisonbrett,

Any chance you can share your project with us to test this out?

Thanks,
Dan

[morrisonbrett]

It's in a private repo, and requires a connection to a non-public API. For building purposes you wouldn't need the connection to the API I guess. I'm open to a screen share if you want to right now. I'll ping you on Slack.

[Manduro]

@danbucholtz Nice, works for me! Maybe the exclude for node_modules can be removed now?

[XPanniX]

Hey there,
After running:
npm install -g ionic@latest
npm install @ionic/app-scripts
I can use ionic serve again.
But if I want to run on my android device now using ionic run android I get the following error:

Running 'run:before' npm script before run

> ionic-hello-world@ build /home/jan/IonicProjects/MeetsApp
> ionic-app-scripts build

[15:17:42]  ionic-app-scripts 0.0.36 
[15:17:42]  build prod started ... 
[15:17:42]  clean started ... 
[15:17:42]  clean finished in 7 ms 
[15:17:42]  copy started ... 
[15:17:42]  ngc started ... 
[15:17:42]  copy finished in 20 ms 
[15:17:42]  lint started ... 
[15:17:43]  lint finished in 885 ms 
[15:17:43]  can't resolve module @angular/core/src/di/opaque_token from /home/jan/IonicProjects/MeetsApp/.tmp/index.ts 
[15:17:43]  TypeError: undefined is not a function 
[15:17:43]  ngc failed 
[15:17:43]  ionic-app-script task: "build" 
[15:17:43]  Error: Error 

npm ERR! Linux 4.4.0-43-generic
npm ERR! argv "node" "/home/jan/.nvm/versions/node/v0.12.14/bin/npm" "run" "build" "--color"
npm ERR! node v0.12.14
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic-hello-world@ build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jan/IonicProjects/MeetsApp/npm-debug.log
Caught exception:
 undefined 

I created the project using ionic start MeetsApp --v2

The npm-debug.log contains the following:

0 info it worked if it ends with ok
1 verbose cli [ 'node',
1 verbose cli   '/home/jan/.nvm/versions/node/v0.12.14/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build',
1 verbose cli   '--color' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle ionic-hello-world@~prebuild: ionic-hello-world@
6 silly lifecycle ionic-hello-world@~prebuild: no script for prebuild, continuing
7 info lifecycle ionic-hello-world@~build: ionic-hello-world@
8 verbose lifecycle ionic-hello-world@~build: unsafe-perm in lifecycle true
9 verbose lifecycle ionic-hello-world@~build: PATH: /home/jan/.nvm/versions/node/v0.12.14/lib/node_modules/npm/bin/node-gyp-bin:/home/jan/IonicProjects/MeetsApp/node_modules/.bin:/home/jan/.nvm/versions/node/v0.12.14/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin:/home/jan/Android-SDK/tools
10 verbose lifecycle ionic-hello-world@~build: CWD: /home/jan/IonicProjects/MeetsApp
11 silly lifecycle ionic-hello-world@~build: Args: [ '-c', 'ionic-app-scripts build' ]
12 silly lifecycle ionic-hello-world@~build: Returned: code: 1  signal: null
13 info lifecycle ionic-hello-world@~build: Failed to exec build script
14 verbose stack Error: ionic-hello-world@ build: `ionic-app-scripts build`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/home/jan/.nvm/versions/node/v0.12.14/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at EventEmitter.emit (events.js:110:17)
14 verbose stack     at ChildProcess.<anonymous> (/home/jan/.nvm/versions/node/v0.12.14/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at ChildProcess.emit (events.js:110:17)
14 verbose stack     at maybeClose (child_process.js:1019:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1091:5)
15 verbose pkgid ionic-hello-world@
16 verbose cwd /home/jan/IonicProjects/MeetsApp
17 error Linux 4.4.0-43-generic
18 error argv "node" "/home/jan/.nvm/versions/node/v0.12.14/bin/npm" "run" "build" "--color"
19 error node v0.12.14
20 error npm  v3.10.6
21 error code ELIFECYCLE
22 error ionic-hello-world@ build: `ionic-app-scripts build`
22 error Exit status 1
23 error Failed at the ionic-hello-world@ build script 'ionic-app-scripts build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the ionic-hello-world package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     ionic-app-scripts build
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs ionic-hello-world
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls ionic-hello-world
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

EDIT: Seems to be caused by the hello-world/tabs project. When I use an older Ionic2 project everything works fine.

[marcoturi]

@XPanniX update your node version. I suggest you to use nvm to maanage nodejs.

[XPanniX]

@marcoturi Seems like I had node installed in several locations and different versions. Removing all but the latest nvm one did the trick. Thank you very much!