Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

Template paths are not resolved correctly #160

Closed
Manduro opened this issue Oct 14, 2016 · 43 comments
Closed

Template paths are not resolved correctly #160

Manduro opened this issue Oct 14, 2016 · 43 comments
Assignees

Comments

@Manduro
Copy link
Contributor

Manduro commented Oct 14, 2016

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
Copy link

konrin commented Oct 14, 2016

I have the same problem (src/src)

@rehiy
Copy link

rehiy commented Oct 14, 2016

me too

@Manduro
Copy link
Contributor Author

Manduro commented Oct 14, 2016

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
Copy link

danielcrk-cn commented Oct 14, 2016

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
Copy link
Contributor Author

Manduro commented Oct 14, 2016

@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
Copy link

@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
Copy link
Contributor Author

Manduro commented Oct 14, 2016

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

@danielcrk-cn
Copy link

danielcrk-cn commented Oct 14, 2016

@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
Copy link
Contributor Author

Manduro commented Oct 14, 2016

@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
Copy link

@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
Copy link
Contributor Author

Manduro commented Oct 14, 2016

@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
Copy link
Contributor

@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
Copy link

konrin commented Oct 14, 2016

@danbucholtz it worked

@danbucholtz
Copy link
Contributor

@konrin,

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

Thanks,
Dan

@rkostrzewski
Copy link

I can confirm it's working after the fix. 👍

@ShawnXu
Copy link

ShawnXu commented Oct 14, 2016

@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
Copy link
Contributor

@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
Copy link

@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
Copy link
Contributor

@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
Copy link

aemr3 commented Oct 14, 2016

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

@danbucholtz
Copy link
Contributor

@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
Copy link

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

@jlcarvalho
Copy link

jlcarvalho commented Oct 14, 2016

@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
Copy link

cmhand commented Oct 14, 2016

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
Copy link
Contributor

danbucholtz commented Oct 14, 2016

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
Copy link
Contributor Author

Manduro commented Oct 15, 2016

@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
Copy link

salimchemes commented Oct 17, 2016

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
Copy link
Contributor

@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
Copy link
Contributor

@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
Copy link
Contributor Author

Manduro commented Oct 17, 2016

@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
Copy link

salimchemes commented Oct 17, 2016

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

@danbucholtz
Copy link
Contributor

@Manduro,

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

Thanks,
Dan

@danbucholtz
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

@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
Copy link

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
Copy link

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

image

@danbucholtz
Copy link
Contributor

@morrisonbrett,

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

Thanks,
Dan

@morrisonbrett
Copy link

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
Copy link
Contributor Author

Manduro commented Oct 17, 2016

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

@XPanniX
Copy link

XPanniX commented Oct 23, 2016

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 npm@3.10.6
3 info using node@v0.12.14
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
Copy link
Contributor

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

@XPanniX
Copy link

XPanniX commented Oct 23, 2016

@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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests