ngmodule Module parse error with unexpected character '@'

Question

I've gone through the tutorial on https://angular.io/tutorial/toh-pt0, and I'm currently trying to compile the tutorial into a /public/ folder and getting the error...

 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,

my webpack.config.js is simple

 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/], }], } };

and my 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 { }

As you can see I've tried using babel-loader and get a Module build failed: SyntaxError: Unexpected token with the "@".

My first thoughts are that I'm missing a loader, but I've tried several loaders and babel was the only loader that changed the error message I was getting but didn't resolve the issue.

The application compiles correctly using "ng serve" and they are using webpack with the standard angular-cli application.

I've looked through several other questions with similar issues and most of them are with css or scss and not using the correct loader. I do believe this is a loader issue but can't find a loader to use that gets it to work.

David Larsen · Accepted Answer · 2018-07-27 14:43:35Z

Ok, so I've finally gotten it to compile and I noticed there were other people having problems with this one so here is the answer I found.

In the webpack.config.js

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

and

module: rules:

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

Babel might work too, I think the real key was the resolving the extensions.

Collectives™ on Stack Overflow

ngmodule Module parse error with unexpected character '@'

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related