Синтаксическая ошибка Babel-загрузчика и Webpack с TypeScript - PullRequest
Новая
       16

Синтаксическая ошибка Babel-загрузчика и Webpack с TypeScript

0 голосов
/ 12 ноября 2018

Я использую Angular 5, Webpack и Babel-loader для своего проекта надстройки Microsoft.Однако я получаю синтаксическую ошибку, когда Babel пытается скомпилировать мой проект из-за двоеточия.Я перепробовал множество различных вариантов, найденных в Google / Stackoverflow, но не могу исправить эту ошибку.

Сообщение об ошибке: 

ERROR in ./src/app/services/data.service.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/Users/lofo/Projects/word-add- 
in/src/app/services/data.service.ts: Unexpected token, expected , (17:22)

  15 | export class DataService {
  16 |
> 17 |   constructor(private http: HttpClient) { }
     |                       ^
  18 |
  19 |   // getUsers(): Observable<IUser> {
  20 |   //   return this.http.get<IUser>(apiUrl + '/users');

 @ ./src/app/app.module.ts 30:12-51
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?https://localhost:3000 ./src/index.ts
Child html-webpack-plugin for "function-file\function-file.html":
     1 asset
    Entrypoint undefined = function-file/function-file.html
       1 module
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       1 module
i ｢wdm｣: Failed to compile.

Webpack.config: 

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
    polyfill: 'babel-polyfill',
    app: './src/index.ts',
    'function-file': './function-file/function-file.ts'
},

resolve: {

    extensions: ['.ts', '.tsx', '.html', '.js']

},
module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.html$/,
            exclude: /node_modules/,
            use: 'html-loader'
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            use: 'file-loader'
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: './index.html',
        chunks: ['polyfill', 'app']
    }),
    new HtmlWebpackPlugin({
        template: './function-file/function-file.html',
        filename: 'function-file/function-file.html',
        chunks: ['function-file']
    })
]
};

и .babelrc: 

{
"presets": [
    "env"
],
"plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
]
}
...