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 を使用してみましたが、モジュールのビルドに失敗しました: SyntaxError: Unexpected token with the "@".
私の最初の考えは、ローダーが見つからないということですが、いくつかのローダーを試してみましたが、エラーメッセージを変更したものの問題を解決しなかったローダーはbabelだけでした。
アプリケーションは「ng serve」を使用して正しくコンパイルされ、標準の angular-cli アプリケーションで webpack を使用しています。
同様の問題に関する他のいくつかの質問を調べましたが、それらのほとんどは css または scss に関するもので、正しいローダーを使用していません。これはローダーの問題だと思いますが、それを機能させるために使用するローダーが見つかりません。