"이 파일 유형에 적합한 로더가 필요할 수 있습니다.", webpack은 angular2 파일을 구문 분석 할 수 없습니다.

napstablook

Webpack을 모듈 번 들러로 사용하여 매우 간단한 Angular2 앱을 작동 시키려고합니다. 이 코드를 따르고 있으며 모든 구성 파일을 그대로 복사하고 파일 경로 만 변경했습니다. 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오류가있는 곳입니다 (웹팩이 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은 동일한 디렉토리에 있습니다.

비슷한 질문을 온라인에서 찾았지만 아무것도 효과가 없었습니다. 베이스로 사용하고있는 샘플 코드가 사용하지 않기 때문에 바벨을 설치하지 않았는데 필요하다면 그렇게 할 것입니다.

에릭 마르티네즈

@napstablook에서 제안한대로

webpack.config.js 파일에서

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

Webpack은 해당 .js파일 을 처리하려고 시도 하지만 그렇게하려면 특정 로더가 필요합니다 script-loader.

귀하의 경우 솔루션은 .js파일 을 삭제 하거나 확장자를 .ts.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관