HRM Cannot find name 'module' #10668

JonnyBGod · 2018-05-05T16:51:46Z

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

The text was updated successfully, but these errors were encountered:

shyamal890 · 2018-05-05T18:14:00Z

+1

alan-agius4 · 2018-05-06T18:12:07Z

Duplicate of #10668

eikishi01 · 2018-05-07T14:56:37Z

It looks like the error is in this line:

import { environment } from 'environment'

Replace it with:

import { environment } from './environments/environment';

That worked for me, In a topic related, the HRM doesn't seen to be working in Angular6, it always does the full reload page refresh.

JonnyBGod · 2018-05-07T21:52:24Z

@eikishi01

problem is in these two lines:

if (module['hot']) {
    hmrBootstrap(module, bootstrap)

JonnyBGod · 2018-05-10T03:17:07Z

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

wapplegate · 2018-05-12T13:40:01Z

@JonnyBGod Would you mind posting your angular.json file for your project if you got HMR working? I'm pretty sure I was able to get it working as well and I'm curious if we did the same thing.

huangshengliang · 2018-05-16T02:54:18Z

@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.

JonnyBGod · 2018-05-16T15:28:57Z

@Singularity222 here you go:

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "environments/environment.ts",
                  "with": "environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "hmrWarning": false
          },
          "configurations": {
            "hmr": {
              "hmr": true
            },
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["styles.scss"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "backoffice": {
      "root": "projects/backoffice/",
      "sourceRoot": "projects/backoffice/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/backoffice",
            "index": "projects/backoffice/src/index.html",
            "main": "projects/backoffice/src/main.ts",
            "polyfills": "projects/backoffice/src/polyfills.ts",
            "tsConfig": "projects/backoffice/tsconfig.app.json",
            "assets": [
              "projects/backoffice/src/favicon.ico",
              "projects/backoffice/src/assets",
              "projects/backoffice/src/manifest.json"
            ],
            "styles": ["projects/backoffice/src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "environments/environment.ts",
                  "with": "environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "backoffice:build",
            "hmrWarning": false
          },
          "configurations": {
            "hmr": {
              "hmr": true
            },
            "production": {
              "browserTarget": "backoffice:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "backoffice:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/backoffice/src/test.ts",
            "polyfills": "projects/backoffice/src/polyfills.ts",
            "tsConfig": "projects/backoffice/tsconfig.spec.json",
            "karmaConfig": "projects/backoffice/karma.conf.js",
            "styles": ["projects/backoffice/styles.scss"],
            "scripts": [],
            "assets": [
              "projects/backoffice/src/favicon.ico",
              "projects/backoffice/src/assets",
              "projects/backoffice/src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["projects/backoffice/tsconfig.app.json", "projects/backoffice/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "backoffice-e2e": {
      "root": "projects/backoffice-e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/backoffice-e2e/protractor.conf.js",
            "devServerTarget": "backoffice:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "projects/backoffice-e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "shared": {
      "root": "projects/shared",
      "sourceRoot": "projects/shared/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/shared/tsconfig.lib.json",
            "project": "projects/shared/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "projects/shared/ng-package.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/shared/src/test.ts",
            "tsConfig": "projects/shared/tsconfig.spec.json",
            "karmaConfig": "projects/shared/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["projects/shared/tsconfig.lib.json", "projects/shared/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "shared-web": {
      "root": "projects/shared-web",
      "sourceRoot": "projects/shared-web/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/shared-web/tsconfig.lib.json",
            "project": "projects/shared-web/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "projects/shared-web/ng-package.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/shared-web/src/test.ts",
            "tsConfig": "projects/shared-web/tsconfig.spec.json",
            "karmaConfig": "projects/shared-web/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["projects/shared-web/tsconfig.lib.json", "projects/shared-web/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "app",
  "cli": {
    "warnings": {
      "typescriptMismatch": false
    }
  }
}

Update documentation for the hmr story to show proper configurations in angular.json and src/tsconfig.app.json. Closes angular#11028, angular#10668, angular#10663

Update documentation for the hmr story to show proper configurations in angular.json and src/tsconfig.app.json. Closes #11028, #10668, #10663

Update documentation for the hmr story to show proper configurations in angular.json and src/tsconfig.app.json. Closes angular#11028, angular#10668, angular#10663

PetarMetodiev · 2018-06-22T13:13:11Z

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

"types": [
    "node"
]

and the errors were gone.

see this angular/angular-cli#10668

filipesilva · 2018-07-06T03:15:00Z

Fixed via #11029

billfranklin · 2018-08-31T15:54:04Z

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

angular-automatic-lock-bot · 2019-09-08T13:41:39Z

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.}

clydin added the comp: cli/serve label May 8, 2018

rbasniak mentioned this issue May 26, 2018

HMR not working according to the documentation #11028

Closed

bniedermeyer mentioned this issue May 26, 2018

docs: update hmr documentation #11029

Merged

filipesilva added area: @angular-devkit/build-angular and removed area: @angular-devkit/build-angular comp: cli/serve labels Jun 8, 2018

filipesilva pushed a commit that referenced this issue Jun 12, 2018

docs: update hmr documentation

ff2bd3e

Update documentation for the hmr story to show proper configurations in angular.json and src/tsconfig.app.json. Closes #11028, #10668, #10663

gemron pushed a commit to gemron/ng-alain that referenced this issue Jul 4, 2018

fix HRM Cannot find name 'module'

1f65220

see this angular/angular-cli#10668

gemron mentioned this issue Jul 4, 2018

fix HRM Cannot find name 'module' ng-alain/ng-alain#562

Merged

3 tasks

cipchk pushed a commit to ng-alain/ng-alain that referenced this issue Jul 4, 2018

fix(hmr): fix not find name 'module' (#562)

c3ccfea

see this angular/angular-cli#10668

filipesilva closed this as completed Jul 6, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HRM Cannot find name 'module' #10668

HRM Cannot find name 'module' #10668

JonnyBGod commented May 5, 2018

shyamal890 commented May 5, 2018

alan-agius4 commented May 6, 2018

eikishi01 commented May 7, 2018

JonnyBGod commented May 7, 2018

JonnyBGod commented May 10, 2018

wapplegate commented May 12, 2018

huangshengliang commented May 16, 2018 •

edited

Loading

JonnyBGod commented May 16, 2018

PetarMetodiev commented Jun 22, 2018

filipesilva commented Jul 6, 2018

billfranklin commented Aug 31, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

HRM Cannot find name 'module' #10668

HRM Cannot find name 'module' #10668

Comments

JonnyBGod commented May 5, 2018

Versions

Repro steps

Observed behavior

Desired behavior

shyamal890 commented May 5, 2018

alan-agius4 commented May 6, 2018

eikishi01 commented May 7, 2018

JonnyBGod commented May 7, 2018

JonnyBGod commented May 10, 2018

wapplegate commented May 12, 2018

huangshengliang commented May 16, 2018 • edited Loading

JonnyBGod commented May 16, 2018

PetarMetodiev commented Jun 22, 2018

filipesilva commented Jul 6, 2018

billfranklin commented Aug 31, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

huangshengliang commented May 16, 2018 •

edited

Loading