ngmodule 模块解析错误，带有意外字符“@”

Question

我已经完成了 https://angular.io/tutorial/toh-pt0 上的教程，目前正在尝试将教程编译到 /public/ 文件夹中，但出现错误...

    Module parse failed: Unexpected character '@' You may need an
      appropriate loader to handle this file type. | import {
      HeroSearchComponent } from
      './components/hero-search/hero-search.component'; |  | @NgModule({ |
      imports: [ |     BrowserModule,

我的webpack.config.js很简单

    const path = require('path');

    module.exports = {
      entry: { app: './src/app/app.module.ts' },
      output: { filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../public') },
      module: {
        rules: [{
            test: /\.ts$/,
            use: [
                //'babel-loader',
            ],
            exclude:[/node_modules/],
        }],
      }
    };

和我的app.module.ts

    import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
    import { InMemoryDataService } from './services/in-memory-data/in-memory-data.service';
    import { AppRoutingModule } from './app-routing.module';

    import { AppComponent } from './components/app/app.component';
    import { HeroesComponent } from './components/heroes/heroes.component';
    import { HeroDetailComponent } from './components/hero-detail/hero-detail.component';
    import { MessagesComponent } from './components/messages/messages.component';
    import { DashboardComponent } from './components/dashboard/dashboard.component';
    import { HeroSearchComponent } from './components/hero-search/hero-search.component';

    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpClientModule,
        ...
    })

    export class AppModule { }

如您所见，我已尝试使用 babel-loader，但模块构建失败：语法错误：带有“@”的意外标记。

我的第一个想法是我缺少一个加载器，但我已经尝试了几个加载器，而 babel 是唯一一个改变了我收到的错误消息但没有解决问题的加载器。

应用程序使用 "ng serve" 正确编译，并且他们将 webpack 与标准 angular-cli 应用程序一起使用。

我已经查看了其他几个具有类似问题的问题，其中大部分与 css 或 scss 有关，并且没有使用正确的加载程序。我相信这是一个加载器问题，但找不到一个加载器来使用它来让它工作。

Answer 1

好的，所以我终于可以编译它了，我注意到其他人对此有疑问，所以这是我找到的答案。

在webpack.config.js

    module.exports = {
      ...
      resolve: {
        extensions: [ '.js', '.ts', '.html' ]
      }

和

模块：规则：

     {
       test: /\.ts$/,
       use: [
         'awesome-typescript-loader',
         'ng-router-loader'
       ],
       exclude:[/node_modules/],
     },

Babel 也可以，我认为真正的关键是解决扩展。

ngmodule 模块解析错误，带有意外字符“@”

ngmodule Module parse error with unexpected character '@'

angular

webpack

ng-modules