beeman / tutorial-angular-cli-hmr

Tutorial: Enable HRM in Angular CLI apps
https://medium.com/@beeman/1b0d13b80130
19 stars 3 forks source link

TSC Cannot find name 'module'. #1

Open ackzell opened 7 years ago

ackzell commented 7 years ago

Hello,

I was following the tutorial and got the following error on my terminal after attempting $ npm run hmr:

Module build failed: Error: <MY_APP_PATH>/src/main.ts (19,7): Cannot find name 'module'.)

As a side note, my editor (VSCode) would complain that it didn't find the module name either.

solution After some research, I figured I would probably need @types/webpack-env and so I added it to my CLI () generated project. This actually fixed it. I can now use HMR in a very simple app!

The tsconfig.json file also needed to know that it should look for those definitions (I think), so the "types" key now looks like:

"types": [
     .
     .
     .,
      "webpack-env"
    ]

Just wanted to share it in case someone else would bump into the same thing.

And to give a little more context this is my CLI environment right now:


angular-cli: 1.0.0-beta.24
node: 6.9.1
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/material: 2.0.0-alpha.11-3
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/compiler-cli: 2.4.0```

I'd be glad to know if there is another / better solution to this.
beeman commented 7 years ago

Hi @ackzell, thanks for your kind words - I'm glad you like the tutorial!

It might be that the problem consists in the Angular CLI version you are using. Tonight I will try to run the tutorial with the latest release to see if I get the same error, and will update the tutorial and the project accordingly!

daddyschmack commented 7 years ago

Hi All,

I've just encountered this issue also.. HMR works just fine in a project I set up earlier, but when trying to do tutorial on Angular-Material (https://coursetro.com/posts/code/29/Working-with-Angular-2-Material), I get the module error. I actually walked though this HMR tutorial twice and the error message I receive is as follows:

Module build failed: Error: /Users/johnjaeckle/Sites/Ang-Material-tut/src/main.ts (19,6): Cannot find name 'module'.)
/Users/xxxxxx/Sites/Ang-Material-tut/src/main.ts (20,18): Cannot find name 'module'.)
    at _checkDiagnostics (/Users/johnjaeckle/Sites/Ang-Material-tut/node_modules/@ngtools/webpack/src/loader.js:145:15)
    at /Users/xxxxxxx/Sites/Ang-Material-tut/node_modules/@ngtools/webpack/src/loader.js:172:17
 @ multi webpack-dev-server/client?http://localhost:4200/ webpack/hot/dev-server ./src/main.ts
jisuo commented 7 years ago

I'm also having this problem. I added "@types/webpack-env": "^1.13.0" to package.json but I still get the error. What am I missing?

$ 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.github.io/docs/hot-module-replacement.html
  for information on working with HMR for Webpack.
** NG Live Development Server is running on http://localhost:4200 **
Hash: 9afe0f93ad28fece8b54                                                               
Time: 7411ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 6.21 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.84 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in /Users/me/Code/src/main.ts (20,7): Cannot find name 'module'.)
/Users/me/Code/src/main.ts (21,18): Cannot find name 'module'.)
webpack: Failed to compile.

Edit: I added /// <reference path="../node_modules/@types/node/index.d.ts" /> at the top of my main.ts file and now it is working. Not sure if that is the correct way, but...

ranouf commented 6 years ago

I have a problem too:

../../../../../client-src/main.ts http://localhost:54443/main.bundle.js:206:9
    __webpack_require__ http://localhost:54443/inline.bundle.js:55:12
    [0] http://localhost:54443/main.bundle.js:220:18
    __webpack_require__ http://localhost:54443/inline.bundle.js:55:12
    webpackJsonpCallback http://localhost:54443/inline.bundle.js:26:23
    <anonymous>

I m working on It, I added "@ types/webpack-env". But Still have the problem.

BorisKhapilin commented 6 years ago

try to add in main.ts, for example: import { element } from 'protractor';

as for me, it is solution