“你可能需要一个适合这种文件类型的加载器”，webpack 无法解析 angular2 文件

Question

我试图让一个非常简单的 Angular2 应用程序工作，并将 Webpack 作为模块捆绑器。 我正在关注此代码，并按原样复制了所有配置文件，仅更改了文件路径。 但是，当我运行npm-start ，出现以下错误，我认为这是一个 Webpack 错误：

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

因此，我的应用程序中的 Angular2 代码未加载。

这是我的app.ts ：

import "./hello.js"; 

这是hello.js ，错误似乎在哪里（我认为这是 webpack 解析 app.ts 就好了）：

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'app',
    template: '<div>Hello world</div>'
})
class App{}

bootstrap(App);

这是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
  }
};

所有这些文件和node_modules都在同一个目录中。

我在网上找到了类似的问题，但对我没有任何帮助。 我也没有安装 babel，因为我用作基础的示例代码没有使用它，但如果有必要，我会。

Answer 1

正如@napstablook 所建议的

因为在你的 webpack.config.js 文件中你有

resolve: {
   extensions: ['', '.ts', '.js']
},

Webpack 将尝试处理那些.js文件，但它需要一个特定的加载器来完成，如果我没记错的话，就是script-loader 。

在您的情况下，解决方案就像删除.js文件或将其扩展名更改为.ts一样简单。

Answer 2

当我设置了补丁值时，这个错误也会以角度形式出现在我身上，然后一个额外的 = sign ncont.controls[position].patchValue({[cardname]:file}) = file 这对我来说是一个愚蠢的部分，并且有角度不告诉我

Answer 3

对我来说这个问题是在我运行ng test时发生的，请检查以下几点，

• 控制台将列出导致错误的文件。
• 检查 html 文件是否从打字稿正确映射。
• styleUrls 文件应该指向 CSS 文件而不是 html，这是我犯的错误。