Joseph Joseph - 24 days ago 14
TypeScript Question

Webpack not all sourcemaps show typescript

So, I have a project structured like so:

Root
| index.html
| package.json
| tree.txt
| tsconfig.json
| webpack.config.js
|
+---.vscode
| settings.json
| tasks.json
|
+---app
| | main.js
| | main.js.map
| | main.ts
| | test.js
| | test.js.map
| | test.ts
| |
| +---components
| | app.component.js
| | app.component.js.map
| | app.component.ts
| |
| \---modules
| app.module.js
| app.module.js.map
| app.module.ts
|
\---node_modules
|
*SNIP*


My issue is that only my main.ts sourcemap gets shown as actual typescript in chrome dev tools, app.module, app.component and test are shown as compiled javascript.

Any other issues I've managed to find about webpack typescript are either babel loader specific, issues placing breakpoints or sourcemaps not being generated at all.

My tsconfig:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"watch": true,
"compileOnSave": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"atom": {
"rewriteTsconfig": false
},
"typeRoots": [
"./node_modules/@types"
],
"types": [
"core-js"
]
}


My webpack.config.js:

const config = {
entry: {
app: "./app/main.ts"
},
output: {
filename: "./bundle.js",
path: "./"
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loaders: ["awesome-typescript-loader", "angular2-template-loader"]
}
]
},
resolve: {
extentions: ["", ".ts", ".js"]
}
}

module.exports = config;


Chrome dev tool output for main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './modules/app.module';
import { test } from "./test";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
alert(test.msg)


// WEBPACK FOOTER //
// ./~/angular2-template-loader!./app/main.ts


Chrome dev tool output for test.js:

"use strict";
var test = (function () {
function test() {
}
test.msg = "test";
return test;
}());
exports.test = test;
//# sourceMappingURL=test.js.map


//////////////////
// WEBPACK FOOTER
// ./app/test.js
// module id = 25
// module chunks = 0


All the individual .map files sources point to the ts version of the script.

webpack-dev-server command output:

webpack-dev-server -d
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\Joseph Goodley\Desktop\stockmonitor\frontend
Hash: b3331cfe915060534a0f
Version: webpack 1.13.3
Time: 7618ms
Asset Size Chunks Chunk Names
./bundle.js 1.54 MB 0 [emitted] app
./bundle.js.map 1.75 MB 0 [emitted] app
chunk {0} ./bundle.js, ./bundle.js.map (app) 1.49 MB [rendered]
[0] ./app/main.ts 326 bytes {0} [built]
[1] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 6.89 kB {0} [built]
[2] ./~/@angular/compiler/bundles/compiler.umd.js 825 kB {0} [built]
[3] ./~/@angular/core/bundles/core.umd.js 386 kB {0} [built]
[4] ./~/rxjs/Subject.js 5.33 kB {0} [built]
[5] ./~/rxjs/Observable.js 6.04 kB {0} [built]
[6] ./~/rxjs/util/root.js 471 bytes {0} [built]
[7] ./~/rxjs/util/toSubscriber.js 707 bytes {0} [built]
[8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
[9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
[10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
[11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
[12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
[13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
[14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
[15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
[16] ./~/rxjs/Observer.js 193 bytes {0} [built]
[17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
[18] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
[19] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
[20] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
[21] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 120 kB {0} [built]
[22] ./~/@angular/common/bundles/common.umd.js 121 kB {0} [built]
[23] ./app/modules/app.module.js 1.42 kB {0} [built]
[24] ./app/components/app.component.js 1.22 kB {0} [built]
[25] ./app/test.js 175 bytes {0} [built]
webpack: bundle is now VALID.


I notice that it's building js files on [23-24], however I have no idea why, additionally just running webpack --debug generates a bundle.js.map file which has its sources pointing to the js files too.

This issue has been stumping me for quite a while, so if it's something simple I apologise.

Thanks for any help!

Update:

Could the issue be that I'm compiling the ts before webpacking them? I've attempted running webpack without the compiled files but now it cannot find my ts files:

./app/main.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./modules/app.module in C:\--\app
resolve file
C:\--\app\modules\app.module doesn't exist
C:\--\app\modules\app.module.webpack.js doesn't exist
C:\--\app\modules\app.module.web.js doesn't exist
C:\--\app\modules\app.module.js doesn't exist
C:\--\app\modules\app.module.json doesn't exist
resolve directory
C:\--\app\modules\app.module doesn't exist (directory default file)
C:\--\app\modules\app.module\package.json doesn't exist (directory description file)
[C:\--\app\modules\app.module]
[C:\--\app\modules\app.module.webpack.js]
[C:\--\app\modules\app.module.web.js]
[C:\--\app\modules\app.module.js]
[C:\--\app\modules\app.module.json]
@ ./app/main.ts 3:19-50


Why would it not be resolving my .ts files?

Answer

Found the issue.

Inside my package.config "extensions" should have been "extensions" unfortunately I had no errors indicating syntax issues.