Angular-cli: Angular-cli just does not work on Windows/Visual Studio, period.

[tx8821]

You guys don't ever test anything on Windows/Visual Studio probably, otherwise I just can't understand how you can work with something broken this much. Just trying to setup hello-world project with angular-cli for half a day now but can't get to the working NG command.

Here is my setup:
Windows 10; Visual Studio 2015.3; Node v5.4.1; NPM v3.10.7; Python 2.7; All clean install, clean system without errors.

Here are my steps:

npm install -g https://github.com/angular/angular-cli.git

As I want to get the latest version (that plays with RC6), I have to install directly from github.

First comes the bunch of errors about missing peer dependencies! The readme says that you have to just install "npm install -g angular-cli" and that's all. Well, after above command, there are bunch of unmet peer dependency warnings, which you have to install one after another, some of them requiring conflicting versions (typescript 1.8, 1.9 and 2.0 were all requested by different "peers").

To install peer dependencies, I run:

npm install -g zone.js [email protected] tslint @angular/platform-server @angular/core @angular/common @angular/compiler @angular/platform-browser webpack@^2.1.0-beta.22

Many errors go away, but there are still some peer dependencies that just can't be cured. When I run "npm list -g --depth=0" I get these:

npm ERR! peer dep missing: [email protected], required by @angular/[email protected]
npm ERR! peer dep missing: typescript@^1.9.0-dev, required by @angular/[email protected]
npm ERR! peer dep missing: [email protected] || 2.x.x, required by [email protected]
npm ERR! peer dep missing: typescript@^1.8.0 || ^1.9.0-dev, required by [email protected]

Even though I explicitly (and successfully) installed [email protected] and webpack@^2.1.0-beta.22, and that very same versions are listed by "npm list -g", it still reports the "peer dep missing" on them.

Ok, maybe this is the way it should be - I think, maybe the angular-cli will work regardless... NOPE.

when I run anything with NG (like ng help), it gives an error:

Error while running script "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\node_modules\angular-cli\addon\ng2\models\webpack-build-common.ts":
Error: Cannot find module '@angular-cli/base-href-webpack'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\node_modules\angular-cli\addon\ng2\models\webpack-build-common.ts:7:27)
at Module._compile (module.js:397:26)
at Object.require.extensions..ts (C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\node_modules\angular-cli\lib\bootstrap-local.js:30:14)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
....... AND SO ON

This thing just does not work with Windows / Visual Studio. You should have written this in your readme with BIG RED TEXT. I appreciate the work that you are doing, I'm very grateful for what you've built and I really think that Angular 2 is a fascinating platform really, but... I've wasted DAYS to understand all these systemjs/webpack/angular-cli/whatever ways of building Angular 2 project, just to get to the hello-world example, but 9 out of 10 instructions that are given in docs simply don't work out of the box. I'm not even mentioning bunch of intermediate errors and workarounds that I had to overcome just to get to that point.

Is it really hard, to put down a simple, step-by-step instructions for angular-cli, on Windows/Visual Studio (clean install!) for example?.... What's the point with all your unit testing, integration testing, wudu dancing, if even the hello-world project can't be built on a clean system, even after following all those 2999 steps?

[ajrauen]

You really need to post the version of the CLI you're using.
ng --version
Otherwise it's going to be pretty hard to help.

[rodneystrong]

Agreed @ajrauen .

I'm having a similar issue. I and a colleague have not been able to get the CLI to work in Windows 10 with node 6.3.0.

My CLI version is:
1.0.0-beta.11-webpack.8

[azluck]

Global package:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@webpack

Local project package:

commit any changes you have to git first

rm -rf node_modules dist tmp typings
npm install --save-dev angular-cli@webpack

[web-dave]

Cant install angular-cli since webpack2.
I get same errors like @tx8821 .

Windows 10
node v4.5.0
npm 3.8.7

npm install -g angular-cli@webpack
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This package has been discontinued in favor of lodash@^4.0.0.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
D:\Users\damu1de\AppData\Roaming\npm
`-- (empty)

npm WARN optional Skipping failed optional dependency /angular-cli/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN @angular/[email protected] requires a peer of typescript@^1.9.0-dev but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/platform-server@^2.0.0-rc.5 but none was installed.
npm WARN [email protected] requires a peer of [email protected] || 2.x.x but none was installed.
npm WARN [email protected] requires a peer of tslint@^3.0.0 but none was installed.
npm WARN @angular/[email protected] requires a peer of typescript@^1.9.0-dev but none was installed.
npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of zone.js@^0.6.17 but none was installed.
npm WARN [email protected] requires a peer of typescript@^1.8.0 || ^1.9.0-dev but none was installed.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "D:\Users\damu1de\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "-g" "angular-cli@webpack"
npm ERR! node v4.5.0
npm ERR! npm v3.8.7
npm ERR! path D:\Users\damu1de\AppData\Roaming\npm\node_modules.staging\abbrev-4f961d0b
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename

npm ERR! enoent ENOENT: no such file or directory, rename 'D:\Users\damu1de\AppData\Roaming\npm\node_modules.staging\abbrev-4f961d0b' -> 'D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\node_modules\npm\node_modules\abbrev'
npm ERR! enoent ENOENT: no such file or directory, rename 'D:\Users\damu1de\AppData\Roaming\npm\node_modules.staging\abbrev-4f961d0b' -> 'D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\node_modules\npm\node_modules\abbrev'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! D:\npm-debug.log
npm ERR! code 1

---

ng v is not working.

If i run ng v it throws:

Error while running script "D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config\config.ts":
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.require.extensions..ts (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:30:14)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module._load (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:55:22)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config.ts:7:16)
at Module._compile (module.js:409:26)
Error while running script "D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config.ts":
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.require.extensions..ts (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:30:14)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module._load (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:55:22)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config.ts:7:16)
at Module._compile (module.js:409:26)
D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config\config.ts:23
this._config = new (schema_class_factory_1.SchemaClassFactory(schema))(configJson, ...fallbacks);
^^^

SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.require.extensions..ts (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:30:14)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module._load (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:55:22)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (D:\Users\damu1de\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config.ts:7:16)
at Module._compile (module.js:409:26)

[web-dave]

npm i -g [email protected] was the only way to get it work again.

Please fix the windows problems!

[jtsom]

I've found that since so much is broken in the angular-cli@webpack install, that to get anything working I had to install using the "Working with master" instructions:
https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli

that way you get all the fixes that have been made since the last actual release. And even then, you'll see all sorts of warnings when you install. Also make sure you install the latest Typescript - npm install -g typescript@rc

Don't know why they haven't been releasing more frequent versions of this tool... getting all the fiddly bits and dependencies to actually work and play nice is pretty much a hot mess... anytime anything changes, you're info a world of hurt.

[DeWitt-A]

It has been exciting lately with the move to WebPack and Angular RC 5 and 6, but I have been following along on both Windows and OSX and found the experience pretty much if not exactly the same on both. I was on WebPack 1,2, and 8. Currently linked to Master.

[jtsom]

Case in point - just created a branch new, empty project, using the latest (HEAD) version of Angular-CLI. When starting the server, I'm now seeing webpack warnings, where I wasn't before. Sigh. (created issue #2070)

[kylecordes]

The situation is not quite as dire as it may seem in this issue thread. The current challenge (and actually a challenge over the last couple of months) is that CLI has been shipping with various floating dependencies, into the Node ecosystem where semver is assumed by versioning system, but not given as much attention as it would need by package developers who very frequently ship breaking changes in minor versions.

I imagine the CLI team would like to be able to respond to these breakages with the new CLI versions immediately, but they are also trying to absorb new versions of Angular itself. I'm hoping that between the rapidly settling churn in Angular, and hopefully an increased respect for the tendency of node packages to break, we will end up with a stable CLI in the near future. Where stable means that "ng new" continues to give a working application, on all major platforms, for an extended period of months.

[tx8821]

@kylecordes The situation is exactly dire because, it is not actually a technical/physical problem, as much as it is a negligence from core developers to the general public. I'm pretty sure contributing devs themselves do not have these problems because they solved them once for their own rig, with dirty workaround here, dirty workaround there, and once they got their setup working, they just focus on their daily job. But, there are thousands of devs from "general public" (like me), who are just trying to switch to Angular 2, trying to RTFM over and over again, just to taste the Angular 2 as it has been demoed in numerous webcasts, conferences, and blogs, but... there are so many unnecessary barriers to get the base scenario working! Being mostly a backend developer (MS-technology-stack-based) originally, its already challenging for me to wrap my head around so many new concepts, so complicated frontend build scenarios, etc, but I really am intrigued by the power of Angular 2, and eager to make a switch to it (from ASP.NET MVC) no matter the learning curve. I imagine there are thousands of devs just like me. But is it hard for somebody that got it working already, to share the basic steps necessary and write it into the readme with big bold font?

Take the peer dep missing error for example. I'm sure it's not dependent on my particular system, you should have these warnings on any system right now. Three different versions of typescript are requested by different dependencies. How do you solve them? Should I ignore that?

And then that fatal error that pops with every NG command execution: Cannot find module '@angular-cli/base-href-webpack'. This thing is just so easy to repro! Just npm install the version from HEAD right now and you have that error. If I install the one from npm official registry, it is outdated (not RC6) and there are no instructions how (and whether at all) can we update from it.

Can anybody write a steps required to setup everything on Windows so that I could ng new an RC6 project? No? Maybe later? When? It has been like more than two weeks after RC6 release, and I've been visiting this repo every evening and every morning since, but couldn't find a clear way to make it work with Angular-CLI. There are no milestones, no blog posts, the readme hasn't been properly updated for ages, the changelog is from August and says "beta.11-webpack.3", while everybody mentions "beta.11-webpack.8". There have been 5 releases since? Why don't you make a version that just updates to RC6 and publish it to npm? Why should we hack with repo directly to get updates? I imagine it should not take more than few hours to proper people involved to update it to RC6 and publish to npm? Well certainly not 15 days (and counting)?? RC6 did NOT bring any breaking functionality changes per se, so what's the problem?

I see what is the problem. The problem is that you just don't realize that there are thousands of devs watching and waiting day after day, just to play with latest versions, and "sometimes in the future" is not the proper date to give them, when actually you can waste few hours of yours to write proper instructions and save thousands of hours collectively for those who really can't hack it themselves. Just please be more _responsible_ to the public...

[brtnshrdr]

I don't think you're using the master branch correctly (although I could be wrong).
I simply did the following:

1. Clone the repo to your computer (i.e. git clone https://github.com/angular/angular-cli.git)
2. cd into the directory (cd angular-cli)
3. Install dependencies (npm install)
4. Link the package for local dev (npm link)
5. Create a new project (ng new blah)
6. cd into your new project (cd blah)
7. Link global angular-cli (npm link angular-cli)

It should work fine now

[jtsom]

Yeah, that's what I was able to do to get things mostly** working. Quick shortcut to step 5 and 7, you can create the project specifying that it should use a linked version of the cli: ng new blah --link-cli

** by mostly see the issue I posted earlier today (#2070)

[jtsom]

And now that Angular itself is updated to RC7, trying to update a working project is a decent into hades. Just update the package.json and reinstall, right? Nope. Errors all up and down.

Not to mention a brand new, blank project, using the master version of the CLI insists on using an old beta of webpack - webpack beta.21 - even though beta.22 is specified in all the package.json files.

Ugh. What holy hell this is turning out to be.

[sharpmachine]

Our backend is ASP.NET 4 so the backend devs use Visual Studio in Windows. I work on the front-end on a Mac. We're building the latest version of our product using Angular 2. We need cross-platform workflow and we all thought Angular-CLI would a good cross platform tool. But if it works for me and not them, they will stop using it which means I have to stop using it and they will probably make me start using a Windows VM and Visual Studio, which I HATE. Please CLI team...don't keep us in the dark! Empathize and help us out.

[DeWitt-A]

As I commented above I see no merit in the statement that cli does not work on Windows. It is difficult to stay on top of the changes(angular rc7 today!) but the issues in my experience are the same on Windows and Mac. I have had no windows specific issues..

[web-dave]

Wtf. This seems to turn into team bashing.
Stop it please.

Yes, it's hard to use on windows ( no experience with other platforms),
Yes it's hard to understand why.

But keep calm.
It's still beta!

[tomwanzek]

The angular-cli team is juggling a whole heap of fast moving dependencies. So other than keeping the tone civil, it would be preferable to separate out what is platform vs tooling specific. Yes, there have been some opportunities as of late to keep things smoother...

However, developing on a Windows 10 machine, there is not a single issue I had to look into with the webpack.8 version that other platforms had not flagged as well.

If the issue is related to getting it to work with Windows tooling, try VS Code instead of Visual Studio. Maybe some of the sting you seem to experience is resolved that way. Lightweight works & like a charm.

[rodneystrong]

@DeWitt-A could you please explain your setup in detail?
I'd like to try and replicate your environment in order to get this to work.
'preciate it

[DeWitt-A]

Just did a fresh test on Windows 7. I'm using master with npm link. Node is 6.5. I am using, if it matters, Visual Studio Code.
ng new testProject
Cd testProject
Npm link angular-cli

ng serve
Ng test
Some warnings on test but works
No warnings on serve

[bonnici]

It might also help if you follow the setup instructions for node-gyp since I've definitely had some node-gyp related issues when trying to use angular-cli before.

[jtsom]

@DeWitt-A You say some warnings on test, but did you look in the browser console? Open the console and reload the page and you'll see an error showing that Karma isn't running in the browser. I've got another issue open on that (with no comments or response)

[filipesilva]

@tx8821 I'd like to start off by saying that I do all of my development of the CLI in a Windows 10 machine, with both node4 and 5, npm 3 and Visual Studio Code. I don't know much about your troubles with Visual Studio (non code) but if it works from the CLI and with other editors, I take it whatever problem you have in VS is related to VS.

I just globally installed angular-cli a couple of times from scratch, and test commands, as I do every other day. I often do this on brand new node install to be sure everything is fine. I also don't have python or anything else installed, I just use npm and node because I assume that's what users have.

For some reason you decided to do npm install -g https://github.com/angular/angular-cli.git. Not sure where you got that idea from since it's not on the readme or anything, but that doesn't work. It doesn't work for a whole lot of packages on npm because when you publish something on npm it is not necessarily what's on your repo. It's very common to have a build step, such as we have introduced recently, which creates necessary assets (commonly dist/).

If you want to work with the latest master, check the instructions in https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli. This is what the team uses to work with the repo and have the latest version.

There have been two issues affecting installs though, both npm:

• https://github.com/npm/npm/issues/13782 (npm hanging)
• https://github.com/npm/npm/issues/10343 (npm link stealing packages, fixed in https://github.com/angular/angular-cli/pull/2086)

I'm sorry you had a bad experience, but it seems to have been rooted in you doing npm install -g https://github.com/angular/angular-cli.git instead of npm install -g angular-cli@webpack.

[rajshrimohanks]

• Windows 10 Home x64
• Node v6.6.0
• NPM v.3.10.8
• [email protected]

Every time I try to do a npm install -g angular-cli or npm install -g angular-cli@webpack, this is the warning I'm getting:
npm WARN [email protected] requires a peer of [email protected] || 2.x.x but none was installed.
I tried manually installing webpack, but still the same.

Worst part is that doing a npm list -g --depth=0 throws out an error like so after doing the angular-cli install above.:

C:\Users\Rajshri Mohan K S\AppData\Roaming\npm
+--  error: ENOENT: no such file or directory, open 'C:\Users\Rajshri Mohan K S\AppData\Roaming\npm\node_modules\angular-cli\package.json
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

The error goes away after I do npm uninstall -g angular-cli.

I appreciate the work you are doing. I just want to bring this to your notice.

[PaybackMan]

npm i -g [email protected] was the only way to get it work again.

This saved me! But seriously, this is ridiculously complex to install. How would one even know to use that given the "simple" instruction provided on the main cli page?

[Xamlware]

I installed the "ng new migration-project" and then did ng serve. It worked perfectly on VS Code/Windows 10/ Angular final. However, when I add in my src code (angular final -- all works fine with angular cli beta10) after I installed beta14 cli and build, I get these errors:

ERROR in [default] E:\development\ketogeniqweb\node_modules\@angular\platform-browser\src\facade\collection.d.ts:102:21
Cannot find name 'Set'.

ERROR in [default] E:\development\ketogeniqweb\node_modules\@angular\platform-browser\src\facade\collection.d.ts:103:24
Cannot find name 'Set'.

ERROR in [default] E:\development\ketogeniqweb\node_modules\@angular\router\src\config.d.ts:279:61
Cannot find name 'Promise'.

ERROR in [default] E:\development\ketogeniqweb\src\app\app.component.ts:16:13
Cannot find name 'require'.

ERROR in [default] E:\development\ketogeniqweb\src\app\classes\calculator.ts:50:61
Property 'log10' does not exist on type 'Math'.

I'm thinking it has to do with typings, but I installed the @typings for all the packages I could. Any ideas on how to make this build?

[filipesilva]

@rajshrimohanks @PaybackMan @Xamlware this issue is closed, please make new issues instead of replying here.

[rodneystrong]

I understand this issue is closed but im posting a solution for posterity's sake.

I followed all the solutions posted here except ones that required installing specific versions of the CLI as noted by @PaybackMan and using VS Code instead of Atom.

What worked for me is running npm start instead of ng serve from the project root

[fergalmoran]

This stuff isn't ASP.Net/Windows specific. I'm facing exactly the same issues using linux.
Currently mid way into a greenfield project and really wishing I had stuck with Angular 1 or React.

[JanStureNielsen]

@fergalmoran -- I'd like to help -- as @filipesilva noted above, this issue is close, so please open a new issue with all the details of the issue you're facing. FWIW, I'm using Angular 2 on Linux with Angular CLI and Angular Material and it's working well, despite various issues in each of these rapidly maturing libraries...

[Sydwell]

The correct answer is to use the command line option below when ever you do a npm install!
--no-optional

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