angularCLI Webpack: ERROR in TypeError: Cannot read property 'request' of undefined

[edoardoVD]

Not sure if its an issues but fairly new to webpack and how angular CLI implements it and uses it.

os: win32 x64, angular-cli: 1.0.0-beta.11-webpack.8, node: 6.3.0, npm: 3.10.6

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

Hi, I started an angular 2 app with angular-cli: 1.0.0-beta.9, broccoli as the builder, I've tried getting
angular-cli: 1.0.0-beta.11-webpack.8 working with my project. Followed Instructions on: Upgrading AngCLI beta 10 to AngularCLI Webpack but getting some nasty errors....

1. The log given by the failure. Normally this include a stack trace and some
   more information.

ERROR in   TypeError: Cannot read property 'request' of undefined

  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [ttuhscEpAtacsSPCalendar]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:33

  - ExternalModuleFactoryPlugin.js:46 next
    [ttuhscEpAtacsSPCalendar]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8

  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [ttuhscEpAtacsSPCalendar]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7

  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.<anonymous>
    [ttuhscEpAtacsSPCalendar]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5

  - NormalModuleFactory.js:177
    [ttuhscEpAtacsSPCalendar]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:177:3

  - Tapable.js:131
    [ttuhscEpAtacsSPCalendar]/[tapable]/lib/Tapable.js:131:11

 **BLAH BLAH BLAH BLAH MORE BLOODY RED MURDER ERRORSSSS**

1. Mention any other details that might be useful.

   Doing a search for "request" on the project files: I find it on
   dist/index.html, - the error/log I pasted above (the one "ng build" throws at me)
   dist/main.bundle.js -
   window.gapi.client.request
   ((window.gapi||{}).client||{}).request

Does it have to do anything with: ??

https://developers.google.com/api-client-library/javascript/reference/referencedocs

gapi.client.Request
An object encapsulating an HTTP request. This object is not instantiated directly, rather it is returned by gapi.client.request. There are two ways to execute a request. We recommend that you treat the object as a promise and use the then method, but you can also use the method and pass in a callback.

Thanks,
edo@rdo

[edoardoVD]

I tried creating a brand new project and give it another try, but the I got:

ERROR in [default]
Cannot find global type 'Array'.
ERROR in [default]
Cannot find global type 'Boolean'.
ERROR in [default]
Cannot find global type 'Function'.
ERROR in [default]
Cannot find global type 'IArguments'.
ERROR in [default]
Cannot find global type 'Number'.
ERROR in [default]
Cannot find global type 'Object'.
ERROR in [default]
Cannot find global type 'RegExp'.
ERROR in [default]
Cannot find global type 'String'.
BLAH BLAH BLAH BLAH ..............

BUT THEN SOMEONE POINTED ME TO
#1901

Which basically is downgrading typescript to 2.0.0

npm uninstall typescript -g
npm cache clean
npm install [email protected] -g

in my case, I had to run:
npm install [email protected]
at my project folder and the brand new app generated by "ng new" worked.

#Tried this on the project that I'm trying to migrate from broccoli to webpack and I keep getting the nasty error messages.. . .

Can someone explain a bit of how angular cli works behind the scenes (webpack), what configuration files does it refer to in order to do all of the magic...

Thanks,
e. Vazquez

[jtsom]

Yeah, the latest angular-cli and latest Typescript (RC) are a hot mess...

[clifntx]

Check out dematic-rodrigo-silveira's post on #1919. I will summarize below. Huge thanks to dematic-rodrigo-silveira!

For a new project, there are a few steps:

Update Node to 6.5 and npm to 3.10.3

• You can check your versions with node -v and npm -v respectively.
• These can be both be updated from the nodejs.org download site. The installer installs both of them. https://nodejs.org/en/download/current/

Update Typescript to 2.0+

• check with tsc -v
• npm install typescript@next will update you to 2.1.0

Follow the README's instructions on installing the new cli

• npm uninstall -g angular-cli
• npm install -g angular-cli@webpack
• ng new projectname Creates your new project
• cd projectname moves you into the newly created directory

Modify project dependencies

• Open package.json from your apps root directory
• Under "devDependancies", locate "typescript".
• Change "^2.0.0" to "2.0.0". This locks yourproject at typescript 2.0.0 instead of 2.1.0.
• Save

ng serve
app works!
ng init
npm install --save-dev angular-cli@webpack to set the correct cli

Once this is complete, you should be able to serve and test without issues. I am loving the new cli.

Thank you to the CLI team!
Happy coding!

[Geoide]

?? npm new projectname
Better ng new projectname:)

[jucasoft]

Thank SeekingMonkey, in my case I had to change your procedure.

I do not work if:
ng new blablabla
Change "^2.0.0" to "2.0.0" in package.json
ng serve
ng init
npm install --save-dev angular-cli@webpack

to make it work I have to:
ng new blablabla
Change "^2.0.0" to "2.0.0" in package.json
npm install
ng build

I noticed that:
ng init change "2.0.0" to "^2.0.0" in package.json

[snajperek130]

npm uninstall typescript -g
npm cache clean
npm install [email protected] -g

worked for me,
if it is still not working then go to node_modules, delete typescript manually and install it :)

[jtsom]

...which gets back to my comment of the latest "release candidate" of Typescript being broken. (and why would a "release candidate" version actually show as Version 2.0.2?)

[edoardoVD]

@SeekingMonkey thanks for the tip, I was able to fix/upgrade my project, did the following

• Deleted the npm_modules folder of my project
• Update Node to 6.5 and npm to 3.10.3
• Did instructions on https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md
• made sure package.json, angular-cli.json, tsconfig.json were accurate, as well all of the other files that needed to be updated (deleted files not needed)
• Update Typescript to 2.0+ ( I ended up using v2.0.0, higher version did not work)

ng build...... # all good

[taylorsabell]

Updating npm, deleting the node_modules folder, and running npm install fixed this for me.

[uscbsitric]

I solved min by pressing Ctrl + C on the terminal to end the current npm start,
then ran the entire setup with a npm start.

This error occurred to me when I was switching branches.

[angular-automatic-lock-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.}