模块解析失败：/src/app/app.ts Unexpected token (14:5) 你可能需要一个合适的加载器来处理这个文件类型

如何解决模块解析失败：/src/app/app.ts Unexpected token (14:5) 你可能需要一个合适的加载器来处理这个文件类型

我开始在我的 AngularJS 1.7.x 项目中使用 webpack。我找到了这个 repo：https://github.com/preboot/angularjs-webpack，这似乎是一个很好的起点。

我试图让这个 repo 使用 typescript，以便将类似的结构应用于我自己的项目，但是在向 url 变量（url:string to app.ts）添加类型后，我不断收到此错误：

Module parse Failed: /src/app/app.ts Unexpected token (14:5)
You may need an appropriate loader to handle this file type.
|
| class AppCtrl {
|   url: string;
|   constructor() {
|     this.url = "https://github.com/preboot/angular-webpack";
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/app/app.ts

我使用的是 typescript v. 2.5.2 和 awesome-typescript-loader v.2.2.4。

webpack.config.js

  config.module = {
    rules: [
      {
        test: /\.(ts|tsx)?$/,loader: ["awesome-typescript-loader"],exclude: [/node_modules/],},{
        test: /\.css$/,loader: isTest
          ? "null-loader"
          : ExtractTextPlugin.extract({
              fallbackLoader: "style-loader",loader: [
                { loader: "css-loader",query: { sourceMap: true } },{ loader: "postcss-loader" },],}),{
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: "file-loader",{
        test: /\.html$/,loader: "raw-loader",};

app.ts

import "../style/app.css";

let app = () => {
  return {
    template: require("./app.html"),controller: "AppCtrl",controllerAs: "app",};
};

class AppCtrl {
  url: string;
  constructor() {
    this.url = "https://github.com/preboot/angular-webpack";
  }
}

const MODULE_NAME = "app";

angular
  .module(MODULE_NAME,[])
  .directive("app",app)
  .controller("AppCtrl",AppCtrl);

export default MODULE_NAME;