Angular-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
devkibuild-angular
JonnyBGod
👍7
All 12 comments
+1
shyamal890
on 5 May 2018
Duplicate of https://github.com/angular/angular-cli/issues/10668
alan-agius4
on 6 May 2018
👎7
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.
eikishi01
on 7 May 2018
@eikishi01
problem is in these two lines:
if (module['hot']) {
hmrBootstrap(module, bootstrap)
👍1
I believe the fix or workaround (not sure which would be more appropriate) is to add types: ["node"] to tsconfig.app.ts
JonnyBGod
on 10 May 2018
👍26
❤5
🎉4
👎1
@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.
wapplegate
on 12 May 2018
@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.
huangshengliang
on 16 May 2018
👍9
❤1
🎉1
@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
}
}
}
Had the same issue. In src/tsconfig.app.json I added
"types": [
"node"
]
and the errors were gone.
PetarMetodiev
on 22 Jun 2018
👍16
🎉2
👎2
filipesilva
on 6 Jul 2018
Please note, still had this problem in CLI 6.1.5...regression?
billfranklin
on 31 Aug 2018
👍5
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._
![angular-automatic-lock-bot[bot] picture](https://avatars0.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
ericel
·
3Comments
rajjejosefsson
·
3Comments
jbeckton
·
3Comments
hareeshav
·
3Comments
brtnshrdr
·
3Comments
Most helpful comment
I believe the fix or workaround (not sure which would be more appropriate) is to add
types: ["node"]to tsconfig.app.ts