I'm using aurelia with typescript and I wanted to avoid using relative import path like :
import { DialogBox } from '../../resources/elements/dialog-box';
but rather
import { DialogBox } from 'resources/elements/dialog-box';
I modified my tsconfig.json so the compiler handles relative paths by adding baseUrl and paths like this:
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"],
"baseUrl": ".",
"paths": {
"*":["src/*"]
}
}...
But when I run the cli's command 'au run --watch', I can see all steps working fine up to the writeBundle step that fails when tracing some files:
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'buildTypeScript'
Starting 'writeBundles'...
The process fails with the following error:
Tracing resources/elements/dialog-box...
{ uid: 11,
name: 'writeBundles',
branch: false,
error:
{ [Error: ENOENT: no such file or directory, open 'C:\...\src\resources\elements\dialog-box.js']
errno: -4058,
The strange thing is: there are other files that are referenced with non-relative path and where the bundler doesn't fail.
And another strange thing: if I leave the relative path and bundle using the watcher, everything works fine. Then if I remove the relative '../../' from the problematic import, I get a bundling warning but everything works anyway...
Any idea what I might have done wrong?
EDITED FOR CORRECTION:
I just understoof why some files seemed to be bundled while others were not. I noticed that all the files with "root-relative" imports that didn't fail were actually imported from other files with a relative path. So I suppose the bundler finds them from there. That solves one thing but the base problem is still there : aurelia-cli fails bundling when there are "root-relative" imports...
EDITED FOR SOLUTION: Thanks to the solution of Sinan Bolel here under, the relative path problem was solved by updating some packages:
npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0
The semantic errors I got afterward came from some typings that were still installed and not needed as well as having typescript installed as a local npm package as well as globally. I uninstalled them and all errors disappeared.
npm uninstall @types/es6-promise
npm uninstall @types/es6-collections
npm uninstall typescript
Take a look at this Gist example in which:
Init
in src/lib/init.ts
import init from 'lib/init'
in src/main.ts
without a relative path main.ts
to import environment from 'environment'
as opposed to from './environment'
-- which also works.
Using the original tsconfig
generated by the CLI , my build failed with the error:
src/main.ts(3,18): error TS2307: Cannot find module 'lib/init'.
After changing to the tsconfig
in my Gist , the build succeeded.
(invalid) Suggestions:
In tsconfig, can you please try:
a) Adding ./
ahead of src
in compilerOptions.paths
(this solves the issue on my machine)
paths: {"*": ["./src/*"]}
^
b) Adding filesGlob
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./typings/index.d.ts",
"./custom_typings/**/*.d.ts"
],
edit: Previous suggestions did not work, how about updating packages:
npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0
See results in https://github.com/aurelia/cli/issues/494#issuecomment-282103289
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.