Angular-cli: @ngtools/webpack plugin error: Unexpected token {

[GeorgeKnap]

OS?

Windows 10

Versions.

"dependencies": {
    "@angular/common": "4.0.0-rc.2",
    "@angular/compiler": "4.0.0-rc.2",
    "@angular/compiler-cli": "4.0.0-rc.2",
    "@angular/core": "4.0.0-rc.2",
    "@angular/forms": "4.0.0-rc.2",
    "@angular/http": "4.0.0-rc.2",
    "@angular/platform-browser": "4.0.0-rc.2",
    "@angular/platform-browser-dynamic": "4.0.0-rc.2",
    "@angular/router": "4.0.0-rc.2",
    "core-js": "2.4.1",    
"hammerjs": "2.0.8",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.2.0",
    "zone.js": "0.7.8",
...
  },
  "devDependencies": {
    ...
    "@ngtools/webpack": "1.2.12",
    "typescript": "2.2.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "4.0.0"
  },

Repro steps.

Not using the CLI seed but the webpack introduction.
the webpack npm task "webpack:dev-host": "webpack-dev-server --inline --progress --port 8080", crash with following error

The log given by the failure.

C:\Development\templates\Angular\AG2\src\AG2.Web> cmd.exe /c npm run webpack:dev-host --color=always
> [email protected] webpack:dev-host C:\Development\templates\Angular\AG2\src\AG2.Web
> webpack-dev-server --inline --progress --port 8080
C:\Development\templates\Angular\AG2\src\AG2.Web\node_modules\@ngtools\webpack\src\plugin.js:270
                const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
                      ^
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Development\templates\Angular\AG2\src\AG2.Web\node_modules\@ngtools\webpack\src\index.js:6:10)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Development\templates\Angular\AG2\src\AG2.Web\config\webpack.common.js:5:22)
    at Module._compile (module.js:397:26)

webpack config:

var ngToolsWebpack = require('@ngtools/webpack');
module: {
        rules: [
            {
                test: /\.ts$/,
                loader: '@ngtools/webpack',
                exclude: helpers.root('node_modules')
            },
            ...
        ]
    },
 plugins: [
        new ngToolsWebpack.AotPlugin({
            tsConfigPath: helpers.root('tsconfig.json'),
            entryModule: helpers.root('app/app.module#AppModule'),
            mainPath: helpers.root('app/main.ts')
        }),

    ...
    ]

[mattdistefano]

What version of node?

[GeorgeKnap]

@mattdistefano node v6.10.0

[puku0x]

I faced the same problem too on Node 4 and 5.

https://travis-ci.org/puku0x/angular-onsenui2-webpack2/builds/210068755

[GeorgeKnap]

Oh boy. Status update:
Sorry for misleading you. Although I have installed latest node and yes, cmd command states clearly:
```

node --version
v 6.10.0

the webpack task give me the error from my main post but down below the error there is this:

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\Node.exe" "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\node_modules\npm\bin\npm-cli.js" "run" "webpack:dev-host" "--color=always"
npm ERR! node v5.4.1
npm ERR! npm v3.3.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] webpack:dev-host: webpack-dev-server --inline --progress --port 8081
npm ERR! Exit status 1
```

Since I'm using Visual Studio the solution was to tell the VS to use the latest node in Tools -> Options -> Projects and Solutions -> External Web Tools. Adding the path to nodejs install folder solved the problem. Hope it will help anyone else facing this problem.

Cheers

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}