"You may need an appropriate loader for this file type", webpack can't parse angular2 file
Solution 1
As suggested by @napstablook
Since in your webpack.config.js file you have
resolve: {
extensions: ['', '.ts', '.js']
},
Webpack will try to handle those .js
files but it needs a specific loader to do so which is, if I'm not wrong, script-loader
.
In your case the solution is as simple as deleting the .js
files, or changing their extension to be .ts
.
Solution 2
For me this issue occurred when I ran ng test, please check below points,
- Console will list out the files that is causing the error.
- Check the html file is correctly mapped from the typescript.
- styleUrls file should point to the CSS file not html, this is the mistake I did.
napstablook
Updated on June 04, 2022Comments
-
napstablook almost 2 years
I'm trying to get a very simple Angular2 app working, with Webpack as a module bundler. I'm following this code, and I copied all the configuration files as they are, only changing file paths. However, when I run
npm-start
, I get the following error, which I think is a Webpack error:ERROR in ./hello.js Module parse failed: /home/marieficid/Documentos/cloud/cloud/hello.js Line 1: Unexpected token You may need an appropriate loader to handle this file type. | import {bootstrap} from "angular2/platform/browser"; | import {Component} from "angular2/core"; | @ ./app.ts 2:0-21
As a result, the Angular2 code in my app isn't loaded.
This is my
app.ts
:import "./hello.js";
This is
hello.js
, where the error seems to be (which I take to mean that webpack parsed app.ts just fine):import {bootstrap} from "angular2/platform/browser"; import {Component} from "angular2/core"; @Component({ selector: 'app', template: '<div>Hello world</div>' }) class App{} bootstrap(App);
And this is
webpack.config.js
:var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); module.exports = { entry: { 'app': './app.ts', 'vendor': './vendor.ts' }, output: { path: "./dist", filename: "bundle.js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), new HtmlWebpackPlugin({ inject: false, template: './index.html' }) ], resolve: { extensions: ['', '.ts', '.js'] }, module: { loaders: [ { test: /\.ts$/, loader: 'ts-loader' }, ], noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ] }, devServer: { historyApiFallback: true } };
All these files and
node_modules
are in the same directory.I have found similar questions online but nothing worked for me. I also didn't install babel because the sample code I'm using as base doesn't use it, but if it's necessary I'm will.