Node.js &引用；您可能需要一个适合此文件类型的加载程序"；，网页包可以'；t解析angular2文件

我正在尝试让一个非常简单的Angular2应用程序工作，将Webpack作为模块绑定器。我正在跟踪，我复制了所有的配置文件，只是更改了文件路径。但是，当我运行

npm start

时，我得到以下错误，我认为这是一个网页错误：

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很好）：

所有这些文件和

node_模块

都位于同一目录中

---

我在网上发现了类似的问题，但对我来说没有任何效果。我也没有安装babel，因为我正在使用的示例代码没有使用它，但如果有必要，我会安装它。

正如@napstablook建议的那样

因为在webpack.config.js文件中

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

Webpack将尝试处理那些

.js

文件，但它需要一个特定的加载程序来处理，如果我没有错的话

---

在您的情况下，解决方案非常简单，只需删除

.js

文件，或将其扩展名更改为

.ts

当我设置了面片值，然后设置了一个额外的=号时，这个错误也会以角度形式出现 ncont.controls[position].patchValue（{[cardname]：file}）=file

---

这对我来说是一个愚蠢的部分，因为我没有告诉我这个问题发生在我运行ng测试时， 请检查以下几点

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

---

只有在

加载程序中才有
ts加载程序
。Webpack正在尝试使用
js
文件执行某些操作，但找不到该文件的加载程序。你能做的最简单的事情就是删除
js
文件。删除
js
文件是什么意思？如果没有它们，我将无法构建Angular2应用程序，是吗？Webpack可以读取
ts
文件（这就是
ts loader
的用途），并将所有内容打包到js文件中，您不需要在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
  }
};

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