Module parse failed: *.ts Unexpected character '@'

Question

I'm having trouble getting webpack to bundle my scripts. I get an error from this line on app.module.ts: @NgModule({

I get the message: You may need an appropriate loader to handle this file type.

Here's my webpack config:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: ["./src/ts/main.ts","./src/ts/css.ts"], module: { rules: [ { test: /\.tsx$/, loaders: [ { loader: 'awesome-typescript-loader', options: { configFileName: 'tsconfig.json' } } , 'angular2-template-loader' ] }, { test: /\.css$/, use: ExtractTextPlugin.extract({use: 'css-loader'}) }, { test: /\.(jpe?g|png|gif|svg)$/i, use: ['url-loader?limit=10000', 'img-loader'] }, { test: /\.(eot|woff2?|ttf)$/i, use: 'url-loader' } ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, plugins: [ new ExtractTextPlugin("public/styles.css"), ], output: { filename: "public/bundle.js" } }

Here's tsconfig.json:

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "rootDir": "src/ts" }, "angularCompilerOptions": { "genDir": "public/dist/js" }, "exclude": [ "node_modules", "**/*-aot.ts" ], "filesGlob": [ "src/ts/**/*.ts" ] }

It gets to app.module.ts through main.ts.

Michel · Accepted Answer · 2017-04-20 13:26:11Z

1

Your file has obviously a ts extension, but the rule in your webpack config matches only the extension tsx. Change the pattern /\.tsx$\ to /\.tsx?$\ to handle both extensions.

 { test: /\.tsx?$/, loaders: [ { loader: 'awesome-typescript-loader', options: { configFileName: 'tsconfig.json' } } , 'angular2-template-loader' ] }

answered Apr 20, 2017 at 13:26

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Troy Taylor Over a year ago

That solved it. I getting another error with 'describe' on a different ts file: TS2304: Cannot find name 'describe'. I was able to get tsc to work on this project before so I'm not sure what I'm missing.

Michel Over a year ago

That looks like jasmine library is missing or not properly imported. That's a quite different error though, could you close this question, and post an adequate question for the describe problem in case you don't find the solution?

Collectives™ on Stack Overflow

Module parse failed: *.ts Unexpected character '@'

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related