I've tried to inlude anular2 treeview module into my test application, but getting the error unexpected token
'export * from '....//filepath.....' in my bundle.js
I know it's an issue of transpiling typescript file to js, but I'm only getting this error into this particular treeview module.
I've tried both ts-loader and babel, but not working.
Below is my webpack config.
var WriteFilePlugin = require('write-file-webpack-plugin');
var path = require("path");
var APP_DIR = path.resolve(__dirname, "app");
var config = {
entry: path.resolve(APP_DIR + "/main.ts"),
output: {
path: APP_DIR,
publicPath: "/app/",
filename: "bundle.js"
},
watch: true,
resolve: {
extensions: ['', '.webpack.js', ".web.js", ".ts", ".js", ".jsx"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader:"babel!ts-loader",
//loader:"ts-loader", // tried this also
exclude: "node_modules"
}
]
}
}
module.exports = config;
and tsconfig:
{
"compilerOptions": {
"target": "es6", //(also tried with "target:es5")
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"lib": [
"es6",
"dom"
]
},
"typeRoots": [
"node_modules/@types"
],
"types": [
"core-js",
"hammerjs",
"lodash"
],
"exclude": [
"node_modules"
]
}
My all other imported and created modules are working, except this one.
Let me know, what I'm missing here? Thanks
I experienced the same kind of trouble using ng2-translate.
In my webpack config file I targetted the js files in the module, and loaded those files with the babel-loader, applying the transform-es2015-modules-commonjs plugin. You will need to change the test part to match the treeview module path:
{
test: /ng2-translate(?:\/|\\).*\.js$/,
loader: "babel-loader",
query: {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
Note that only js files are targeted, because you don't really import ts files, just using definitions for the ts compiler.
Also note that I have made this change too but I don't remember why exactly, I guess it might have broken the sourcemap :
{
// basically this enable source-mapping for everything except this module
test: /(?:(?!ng2-translate(?:\/|\\).*))\.js$/,
loaders: ["source-map-loader"]
},
I tried few es6 loaders to mitigate the transpiling issue, but actually issue was with exported library itself. So below 1 line solved my problem.
import {DropdownTreeviewModule} from 'ng2-dropdown-treeview/bundles/ng2-dropdown-treeview.umd';
rather than importing module from ng2-dropdown-treeview, I have to import it from bundled file.