“您可能需要一个适合此文件类型的加载器”，webpack无法解析angular2文件
“您可能需要一个适合此文件类型的加载器”，webpack无法解析angular2文件
提问于 2016-03-14 22:19:23
我正在尝试让一个非常简单的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，因为我用作基础的示例代码没有使用它，但如果有必要的话，我会安装babel。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-15 02:06:45
根据@napstablook的建议
因为在webpack.config.js文件中有
resolve: {
extensions: ['', '.ts', '.js']
},Webpack将尝试处理这些.js文件，但它需要一个特定的加载器来执行此操作，如果我没记错的话，这个加载器就是script-loader。
在您的示例中，解决方案与删除.js文件或将其扩展名更改为.ts一样简单。
Stack Overflow用户
发布于 2021-05-21 21:51:30
对于我来说，这个问题发生在我运行ng测试时，请检查以下几点：
- 控制台将列出导致错误的文件。
- 检查从CSS文件正确映射的html文件应指向CSS文件而不是html，这是我所做的错误。
Stack Overflow用户
发布于 2021-01-02 14:22:03
这个错误在angular形式中也会出现，当我设置了patch值，然后是一个额外的=符号ncont.controlsposition.patchValue({cardname:file}) =文件，这对我来说是一个愚蠢的部分，并且angular没有告诉我
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35990003
复制相关文章
相似问题
腾讯云开发者
