Solvedangular cli HRM Cannot find name 'module'

Versions

Angular CLI: 6.0.0
Node: 8.10.0
OS: darwin x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-ng-packagr   0.6.0
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.0
@angular/pwa                       0.6.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.0
@schematics/update                 0.6.0
ng-packagr                         3.0.0-rc.2
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.6.0

Repro steps

main.ts

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from 'environment'

import { hmrBootstrap } from './hmr'

if (environment.production) {
  enableProdMode()
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule)

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap)
  } else {
    console.error('HMR is not enabled for webpack-dev-server!')
    console.log('Are you using the --hmr flag for ng serve?')
  }
} else {
  bootstrap().catch(err => console.log(err))
}

Observed behavior

nps is executing `dev` : ng serve --hmr
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
The project will still live reload when HMR is enabled,
but to take advantage of HMR additional application code is required'
(not included in an Angular CLI project by default).'
See https://webpack.js.org/guides/hot-module-replacement
for information on working with HMR for Webpack.
To disable this warning use "hmrWarning: false" under "serve" options in "angular.json".
** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ **

Date: 2018-05-05T16:43:05.837Z
Hash: f930bfad870d927052ea
Time: 12573ms
chunk {main} main.js, main.js.map (main) 2.14 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 708 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 30.6 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 264 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 329 kB [initial] [rendered]

ERROR in src/main.ts(16,7): error TS2304: Cannot find name 'module'.
src/main.ts(17,18): error TS2304: Cannot find name 'module'.

 wdm: Failed to compile.

Desired behavior

13 Answers

✔️Accepted Answer

I believe the fix or workaround (not sure which would be more appropriate) is to add types: ["node"] to tsconfig.app.ts

Other Answers:

Had the same issue. In src/tsconfig.app.json I added

"types": [
    "node"
]

and the errors were gone.

@JonnyBGod Someone has mentioned that it would work after inserting

///<reference path="../node_modules/@types/node/index.d.ts" />

at the top of main.ts. I did, and it really worked. But I don't know why.

Please note, still had this problem in CLI 6.1.5...regression?

More Issues: