angular - 错误：模块解析失败：意外字符 '@' Angular

问题描述

我正在学习 webpack 并尝试实现它。但是，我收到以下错误，我尝试搜索但似乎找不到特定于此案例的加载程序？我究竟做错了什么？

错误：

  ERROR in ./src/app/app.module.ts
    Module parse failed: Unexpected character '@' (40:0)
    You may need an appropriate loader to handle this file type.
    |
    |
    | @NgModule({
    |   imports: [
    |     BrowserModule
     @ ./src/main.ts 3:0-45 5:41-50
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

包.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "build": "rimraf dist && webpack --config webpack.config.js --progress --profile --bail",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "dev": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^5.2.8",
    "@angular/common": "^5.2.8",
    "@angular/compiler": "^5.2.8",
    "@angular/compiler-cli": "^5.2.8",
    "@angular/core": "^5.2.8",
    "@angular/forms": "^5.2.8",
    "@angular/http": "^5.2.8",
    "@angular/platform-browser": "^5.2.8",
    "@angular/platform-browser-dynamic": "^5.2.8",
    "@angular/platform-server": "^5.2.8",
    "@angular/router": "^5.2.8",
    "@types/chart.js": "^2.7.14",
    "@types/underscore": "^1.8.8",
    "angular-in-memory-web-api": "^0.5.3",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.3",
    "jquery": "^3.3.1",
    "jsgrid": "^1.5.3",
    "octicons": "^7.1.0",
    "popper.js": "^1.14.1",
    "rxjs": "^5.5.7",
    "systemjs": "^0.20.19",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@types/jasmine": "2.8.5",
    "@types/jquery": "^3.3.1",
    "@types/node": "^9.3.0",
    "awesome-typescript-loader": "^5.0.0",
    "canonical-path": "0.0.2",
    "concurrently": "^3.5.1",
    "jasmine-core": "~2.9.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.17.5",
    "protractor": "~5.2.2",
    "rimraf": "^2.6.2",
    "ts-loader": "^4.2.0",
    "tslint": "^5.6.0",
    "typescript": "^2.7.2",
    "underscore": "^1.8.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  },
  "repository": {}
}

Webpack.config

var path = require('path');

    module.exports = {
        entry: './src/main.ts',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'app.js'
        },
        mode: 'development',
        devtool: 'source-map',
        resolve: {
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                { test: /\.tsx$/, use: 'awesome-typescript-loader' }
            ]
        }
    }

应用结构：

uiangular
 quickstart
   src
     app
   main.ts

标签： angulartypescriptwebpack

angular - 错误：模块解析失败：意外字符 '@' Angular

问题描述

解决方案

推荐阅读