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

Posted 2023-03-07

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

【英文标题】："You may need an appropriate loader for this file type", webpack can't parse angular2 file

【发布时间】：2016-06-29 15:17:03

【问题描述】：

我正在尝试让一个非常简单的 Angular2 应用程序工作，并将 Webpack 作为模块捆绑器。我正在关注this code，我照原样复制了所有配置文件，只更改了文件路径。但是，当我运行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，因为我用作基础的示例代码不使用它，但如果有必要我会的。

【问题讨论】：

您的 ts-loader 仅在您的 loaders 中。 Webpack 正在尝试对 js 文件做一些事情，但没有找到它的加载器。您可以做的最简单的事情是删除 js 文件。

删除js 文件是什么意思？没有它们，我将无法构建 Angular2 应用程序，对吗？

Webpack 可以读取ts 文件（这就是ts-loader 的用途）并将所有内容打包到一个js 文件中，您不需要在js 文件中编写代码。现在，如果我没记错的话，你应该添加script-loader。

嘿，你的建议奏效了！您想将其作为答案提交以便我接受吗？

【参考方案1】：

正如@napstablook 建议的那样

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

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

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

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

【参考方案2】：

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

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

【参考方案3】：

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