bundle with non relative path

[gama410]

I'm submitting a bug report

• Library Version: aurelia-cli 0.24

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 5.11.0

• NPM Version: 3.10.8

• Browser: all

• Language: TypeScript 2.1

Current behavior: See this stack overflow question.

When using non-relative path imports, the bundling fails. For instance, if I import a class like this:

import { DialogBox } from '../../resources/elements/dialog-box';

the bundling works whereas if I import it like this: import { DialogBox } from 'resources/elements/dialog-box';

the bundling fails. This happens during the bundling phase of aurelia-cli's build (with au run --watch) so it means that the typescript compilation worked correctly. VSCode doesn't complain about either relative or absolute path either... The error I get that interrupts the build:

{ uid: 11, name: 'writeBundles', branch: false, error: { [Error: ENOENT: no such file or directory, open 'C:\Users\GMA\Doc errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\\Users\\GMA\\Documents\\Sources\\ProtoSAMWeb\\FluBAO\\D duration: [ 0, 8865477 ], ...

Expected/desired behavior: I'd like the bundling not to fail when using 'root-relative' imports.

• What is the motivation / use case for changing the behavior? Having to use relative path everywhere makes the imports much less clear and harder to maintain for our developers.

[sbolel]

@gama410 I answered via StackOverflow and here's a Gist of the changes.

TL;DR -- Edit tsconfig:

a) Add ./ in front of src in compilerOptions.paths (solves on my machine)

  paths: {"*": ["./src/*"]}
                 ^

b) Ensure filesGlob exists

"filesGlob": [
  "./src/**/*.ts",
  "./test/**/*.ts",
  "./typings/index.d.ts",
  "./custom_typings/**/*.d.ts"
],

[gama410]

@sbolel Thanks for your input (here and on SO) Unfortunately, this doesn't change anything for me. As I stated up there, it's the bundling step of the build that fails, not the typescript compilation. Here is the output from a build for me when I use a 'root-relative' path:

Starting 'readProjectConfiguration'... Finished 'readProjectConfiguration' Starting 'processMarkup'... Starting 'processCSS'... Starting 'prepareFontAwesome'... Starting 'configureEnvironment'... Finished 'configureEnvironment' Starting 'buildTypeScript'... Finished 'processCSS' Finished 'prepareFontAwesome' Finished 'processMarkup' Finished 'buildTypeScript' Starting 'writeBundles'... ... Tracing services/generic-view-model... Tracing resources/elements/dialog-box... { uid: 11, name: 'writeBundles', branch: false, error: { [Error: ENOENT: no such file or directory, open '...\src\resources\elements\dialog-box.js'] errno: -4058, code: 'ENOENT', syscall: 'open', path: '...\\src\\resources\\elements\\dialog-box.js' }, duration: [ 11, 105602837 ], time: 1487877880834 } { uid: 2, name: '<series>', branch: true, error: { [Error: ENOENT: no such file or directory, open '...\src\resources\elements\dialog-box.js'] errno: -4058, code: 'ENOENT', syscall: 'open', path: '...\\src\\resources\\elements\\dialog-box.js' }, duration: [ 14, 741807493 ], time: 1487877880846 }

And then the build stops...

[sbolel]

I didn't read your question well, did I? haha 😅 How about updating these packages:

npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0

I noticed my ts files weren't making it into my bundle as well even though I did not see any errors. Updating these packages seems to have fixed it.

Before:

$ au build
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Starting 'writeBundles'...
Tracing app...          # where is main, lib, etc?
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing text...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'

After:

$ au build
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
gulp-typescript: ts(tsProject) has been deprecated - use .pipe(tsProject(reporter)) instead
  As of gulp-typescript 3.0, .pipe(ts(tsProject)) should be written as .pipe(tsProject()).
  More information: http://dev.ivogabe.com/gulp-typescript-3/
Finished 'buildTypeScript'
Starting 'writeBundles'...
Tracing app...          # NEW!
Tracing environment...  # NEW!
Tracing main...         # NEW!
Tracing app...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing text...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'

[EisenbergEffect]

Can we close this out? Problem solved?

[sbolel]

It solves it for me, waiting on confirm from @gama410.

@EisenbergEffect -- I can make a PR for these updates if you'd like? And fix this as well --

gulp-typescript: ts(tsProject) has been deprecated - use .pipe(tsProject(reporter)) instead
  As of gulp-typescript 3.0, .pipe(ts(tsProject)) should be written as .pipe(tsProject()).
  More information: http://dev.ivogabe.com/gulp-typescript-3/

[EisenbergEffect]

PRs are always welcome :)

[sbolel]

The above two commits fixes the relative paths issue, but show types errors:

custom_typings/aurelia-protractor.d.ts(8,41): error TS2694: Namespace 'protractor' has no exported member 'Protractor'.
[01:58:23] gulp-notify: [Error running Gulp] Error: custom_typings/aurelia-protractor.d.ts(8,41): error TS2694: Namespace 'protractor' has no exported member 'Protractor'.
custom_typings/aurelia-protractor.d.ts(9,56): error TS2694: Namespace 'protractor' has no exported member 'Protractor'.
[01:58:23] gulp-notify: [Error running Gulp] Error: custom_typings/aurelia-protractor.d.ts(9,56): error TS2694: Namespace 'protractor' has no exported member 'Protractor'.
custom_typings/aurelia-protractor.d.ts(14,36): error TS2503: Cannot find namespace 'webdriver'.
[01:58:23] gulp-notify: [Error running Gulp] Error: custom_typings/aurelia-protractor.d.ts(14,36): error TS2503: Cannot find namespace 'webdriver'.
[01:58:23] TypeScript: 3 semantic errors
[01:58:23] TypeScript: emit succeeded (with errors)

Will get back to that shortly.

Full Bash session testing a build with a newly generated app in this Gist.

[gama410]

I just tried it and indeed : it fixes the relative path problem for me too! You rock!

I ended up with a few semantic errors like you:

node_modules/@types/es6-collections/index.d.ts(23,5): error TS2687: Al l declarations of 'value' must have identical modifiers. node_modules/@types/es6-collections/index.d.ts(46,5): error TS2687: Al l declarations of 'size' must have identical modifiers. /node_modules/@types/es6-collections/index.d.ts(52,5): error TS2687: Al l declarations of 'prototype' must have identical modifiers. node_modules/@types/es6-promise/index.d.ts(42,19): error TS2300: Dupli cate identifier 'Promise'. ...

[gama410]

All of my semantic errors came from es6-promise & es6-collections types. When I uninstalled these, all the errors disappeared:

npm uninstall @types/es6-promise
npm uninstall @types/es6-collections

I was put on tracks by a comment from @niieani on this issue: https://github.com/aurelia/skeleton-navigation/issues/485

Thanks a lot!

[sbolel]

That's great news. Thank you for the update @gama410

[sbolel]

Hey @EisenbergEffect, PR #499 is ready for review :)

@gama410 I never got the @types issues you saw, so I'm not sure what the fix for that would be. Can you check out the PR and see if any change is necessary please?

[gama410]

Hello! Sorry for the delay : I was not on my computer for the whole week-end. The types errors I had were not due to this bug but rather from me having added 2 types definitions to package.json. I just had to remove them to solve my problem:

npm uninstall @types/es6-promise npm uninstall @types/es6-collections

[sbolel]

Awesome, thanks for the update @gama410

[ModernRonin]

what's the status on this? does bundling work with path aliases in tsconfig now? would be very useful.

[JeroenVinke]

@ModernRonin sure, take a look at this project: https://github.com/JeroenVinke/aurelia-presentation-amsterdam-2017/tree/master/path-mappings-modified. Important is the paths section in aurelia.json and the tsconfig.json

[sbolel]

I have a PR for this, looking for direction

[JeroenVinke]

@sbolel would it be enough just to supply a paths in tsconfig and a baseurl?