Aurelia bundling fails when using relative import path - bundle

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:
I create a class Init in src/lib/init.ts
I import init from 'lib/init' in src/main.ts without a relative path
I change 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

Related

VS Code Intellisense works for Javascript files but not for TypeScript files

I have set up a node.js project where I want to use VS-Code+Typescript.
If I use plain Javascript intellisense is working fine an VS-Code even loads Typescript defintions from the cache (e.g. ~/.cache/typescript/2.5/node_modules/#types/rethinkdb/index.d.ts). But in .ts files this doesn't work at all.
.js file (instellisense working)
.ts file (intellisense not working)
Both files are in the same folder.
My tsconfig.json looks like:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"watch": true
}
}
Am I missing a configuration option or something?
Answering my own question:
Andy's comment gave me a hint, because there was no .d.ts file in the module folder of rethinkdb.
So I copied the .d.ts file from the cache folder to the module folder. I also needed to install the types from DefinitelyTyped:
npm install --save-dev #types/node
I don't know if this is the recommended way to fix this issue or why VS-Code doesn't resolve the definition files automatically, but at least it works for me now.

Cannot find namespace 'Webpack' during Aurelia application build with Webpack

I am trying to set up an Aurelia application with Webpack, but I get the error all the time:
[at-loader] Checking finished with 1 errors
[at-loader] ./node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.d.ts:31:51
TS2503: Cannot find namespace 'Webpack'.
I installed #types/webpack and also modules: webpack, webpack-dev-server, webpack-dev-middleware and webpack-hot-middleware. I tried everything I could find, but nothing works, I am stuck.
This is my tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"sourceRoot": "src",
"allowJs": true,
"baseUrl": "src",
"lib": [
"es2017", "dom"
]
},
"exclude": [
"node_modules",
"dist",
"static"
],
"typeAcquisition": {
"include": [
"src"
]
}
}
I saw that people have similar problems with modules and namespaces, but not a single answer was working for me. Anyone has an idea what might be the problem?
As we could not tackle the problem nicely and because this error was preventing us from creating successful builds, we ended up by simple deleting the relevant declaration file (node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.d.ts).
I know this is not the preferred solution, however it works and it shouldn't be of any problem, as the node_modules directory should anyway be ignored by the awesome-typescript-loader. Some how it wasn't.
You can compare to a Webpack/Aurelia setup that works.
Here is a sequence of windows console commands that easily create such a skeleton. Note it works with .NET though, which may not match your needs. But it should be possible to simplify the resulting skeleton to work without the .Net parts.
Steps:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
mkdir [Your Project Folder]
cd [Your Project Folder]
dotnet new aurelia
dotnet restore
npm install
Set an environment variable to tell ASP.NET to run in development mode:
If you’re using PowerShell in Windows, execute
$Env:ASPNETCORE_ENVIRONMENT = "Development"
If you’re using cmd.exe in Windows, execute setx
ASPNETCORE_ENVIRONMENT "Development", and then restart your command
prompt to make the change take effect
If you’re using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development
Finally:
dotnet run

TS2403: Subsequent variable declarations must have the same type. After NPM install

I've searched stack overflow for this issue, but am still unclear on why this is happening/how to fix.
I wanted Node Typings in my Typescript project so I entered this command:
npm install #types/node --save
Which resulted in:
c:/xyz/node_modules/#types/node/index.d.ts(89,13)
error TS2403: Subsequent variable declarations must have the same type.
Variable 'require' must be of type 'Require', but here has type 'NodeRequire'.
My machine had node version 7.0.3
The installed types was for version + #types/node#7.0.28
If I remove uninstall the typings my project compiles with no problems.
It appears as if the typings content is not correct per the error message! Fixing it is messy. Any tips?
Here's the failing line of code in index.d.ts
Seems like the NodeRequire (interfaces) need to be bypassed in favor of Require.js?
This is the TSConfig file:
{
"compilerOptions": {
"module": "amd",
"moduleResolution": "node",
"target": "es5",
"noImplicitAny": false,
"jsx": "react",
"sourceMap": false,
"baseUrl": ".",
"paths": {
"OfficeFabric/*": [
"node_modules/office-ui-fabric-react/lib-amd/*"
]
}
}
}
I tried the Exclude suggestion below which didn't work. Github says, if module resolution is NODE then exclude won't work anyway.
Ok finally found the root cause: Node's index.d.ts file was conflicting with Require's index.d.ts file both were declaring a variable named require. The way I found it was to rename require to nrequire then search the project for all instances of nrequire. There are many solutions, 1) Rename the variable (will get wiped out on npm install or update 2) In TypeScript use the --types option to use one or the other but not both. 3) Just remove the node typings.

Typescript Compiler Error TS2307: Cannot find module “angular2/core” when loading from CDN without NPM

I have an example of an angular2 application with typescript, but without all the node_modules in my project (like this). The necessary files are embedded in the head of my index.html (as described in example 1 here):
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
Since I want to pre-compile my typescript-files, I installed node.js and tsc. My editor (PHPStorm 2016.1) automatically compiles the files to assets/js as defined in tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"declaration": true,
"noImplicitAny": false,
"preserveConstEnums": true,
"removeComments": true,
"outDir": "../assets/js",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"emitBOM": true,
"moduleResolution": "node"
}
}
The application is loaded with (as described here):
System.config({
packages: {
'assets/js': {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import( 'assets/js/main' ).then( null, console.error.bind( console ) );
On compiling, I always get the (kind of classic) error
error TS2307: Cannot find module 'angular2/core'
PHPStorm tells me that it cannot resolve the imports:
even when all the external libraries are loaded:
But after compiling (even with the above errors) the application is working fine in the browser.
Maybe the Typescript Definition (TSD) is missing (link here), but tsd is deprecated. I read about typings install angular --ambient but I am not sure if this is really necessary (and it throws out a bunch of other errors like this).
So my question:
Is this just a side-effect of my setup (without node_modules) which I can ignore, or do I have to install other things?
My environment:
node 5.4.1
npm 3.3.12
tsc 1.8.9
Mac OS X 10.11.4
PHPStorm 2016.1
I am a little bit lost. Any hints would be greatly appreciated.
You have the problem since the TypeScript compiler can find the Angular2 .d.ts files. They are provided when installing Angular2 using NPM (see files .d.ts under the folder node_modules/angular2).
When setting the module property within your tsconfig.json file, the compiler will try to find them within the node_modules folder.
You can notice that is an issue when compiling the source code but this code will be however compiled and your application able to run...
There are tools like typings and tsd (deprecated) to install manually such typings but Angular2 isn't present in corresponding registries.

How do I compile my TypeScript code for Node.js to one file?

I want to compile TypeScript to one file when using with Node.js.
I have tried configuring "tsconfig.json" like this:
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": false,
"outFile": "./app/index.js",
"pretty": true,
"types": [
"node"
]
}",
...but when I try with module" set to"commonjs"`, I get the error:
error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile.
If I change it to "module": "system", I get this error when running the file in node:
ReferenceError: System is not defined
If I change module to "amd", I get this error when running the file in node:
ReferenceError: define is not defined
It is not possible to bundle Node.js modules into a single file with the TypeScript compiler alone: each file in the CommonJS module system (used by Node.js) is treated as a single module, and cannot be joined together without proper module bundling techniques found in the many JavaScript code bundlers out there (such as Browserify, Webpack, Rollup, Parceljs, ...).
Other module systems such as SystemJS do not have this limitation, and module definitions can be concatenated into a single file using just the TypeScript compiler: tsc ... --outfile bundle.js -module system. However, they are not supported by Node.js on the fly.
For the actual solution, there are two reasonable choices: either configure your project to bundle the solution using a separate tool (Browserify, Webpack, ...), or include an implementation of SystemJS into your Node.js application (instructions here).
I will also end with a side note: there are hardly any benefits in bundling server-sided code. Bundling is typically performed in frontend projects to reduce the size of client-sided resources.

Resources