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] 삭제
몇 마디 만하겠습니다