angular - Webpack 2 won't work when using ts-loader -
i have been setting basic angular 2 (typescript) application, uses webpack 2 bundling etc.
my issue when use ts-loader process typescript (.ts) files lot of errors. suspect, not totally sure, errors ts-loader not excluding node_modules directory though specify exclude in webpack config.
i want able setup webpack config (and app) typescript can transpiled , app can correctly bundled webpack. please help.
webpack.config.js
var webpack = require('webpack'); module.exports = { entry: './src/main.ts', output: { filename: './dist/bundle.js', }, resolve: { // add `.ts` , `.tsx` resolvable extension. extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd need '' in array }, module: { loaders: [{ test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader' }] }, plugins: [ new webpack.contextreplacementplugin( /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, __dirname ), ] };
package.json
{ "name": "tiptip-webpack", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "dev": "webpack -d --watch" }, "keywords": [], "author": "", "license": "isc", "dependencies": { "@angular/common": "2.4.6", "@angular/compiler": "2.4.6", "@angular/core": "2.4.6", "@angular/forms": "2.4.6", "@angular/http": "2.4.6", "@angular/platform-browser": "2.4.6", "@angular/platform-browser-dynamic": "2.4.6", "@angular/platform-server": "2.4.6", "@angular/router": "3.4.6", "@angularclass/conventions-loader": "^1.0.2", "@angularclass/hmr": "~1.2.2", "@angularclass/hmr-loader": "~3.0.2", "core-js": "^2.4.1", "http-server": "^0.9.0", "ie-shim": "^0.1.0", "jasmine-core": "^2.5.2", "reflect-metadata": "^0.1.9", "rxjs": "5.0.2", "zone.js": "0.7.6" }, "devdependencies": { "source-map-loader": "^0.2.0", "ts-loader": "^2.0.3", "typescript": "^2.2.0", "typings": "^2.1.0", "webpack": "^2.2.0" } }
this not webpack problem typescript problem. webpack correctly ignores node_modules
typescript complains because doesn't know types map
or set
. these es6 features , if set target
in compileroptions
es5
won't include these in compilation , therefore doesn't know types. compiler options documentation:
note: if
--lib
not specified default library injected. default library injected is:
► --target es5: dom,es5,scripthost
► --target es6: dom,es6,dom.iterable,scripthost
you can set lib
option use es6
(or higher version e.g. es2017
):
"lib": ["es6", "dom"]
Comments
Post a Comment