Closed rfball closed 7 years ago
I have the same issue, but running node 6.10.1 on the same environment and using angular version 4.
Having a exact same issue.
Seems to be related to #5131. Resolved in the same way (upgrade typescript to latest).
Updated my local typescript to latest and changed my tsconfig.json to tsconfig.app.json and everything worked again.
I am having the same problem, and updating typescript and changing tsconfig.json to tsconfig.app.json did not help.
The "@angular/compiler-cli" package was not properly installed. Error: The "@angular/compiler-cli" package was not properly installed. at Object.
(/Users/daniel/Documents/globati/code/MemberAdmin/node_modules/@ngtools/webpack/src/index.js:14:11) at Module._compile (module.js:573:32) at Object.Module._extensions..js (module.js:582:10) at Module.load (module.js:490:32) at tryModuleLoad (module.js:449:12) at Function.Module._load (module.js:441:3) at Module.require (module.js:500:17) at require (internal/module.js:20:19) at Object. (/Users/daniel/Documents/globati/code/MemberAdmin/node_modules/@angular/cli/tasks/eject.js:10:19) at Module._compile (module.js:573:32) at Object.Module._extensions..js (module.js:582:10) at Module.load (module.js:490:32) at tryModuleLoad (module.js:449:12) at Function.Module._load (module.js:441:3) at Module.require (module.js:500:17) at require (internal/module.js:20:19)
package.json
{
"name": "member-admin",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"postinstall": "typings install",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "~3.1.0",
"angular-calendar": "^0.4.0",
"angular2-datatable": "^0.5.2",
"angular2-google-maps": "^0.16.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-timepicker": "^0.5.2",
"core-js": "^2.4.1",
"mydatepicker": "^1.7.7",
"ng2-datepicker": "^1.8.2",
"ng2-datetime": "^1.2.2",
"ng2-file-upload": "^1.1.4-2",
"rxjs": "5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@types/jasmine": "^2.2.30",
"@types/jquery": "^2.0.34",
"@types/node": "^6.0.42",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"typings": "1.0.4",
"webdriver-manager": "10.2.5"
}
}
add @angular/compiler-cli
to package.json and install it (same version as your other @angular libs. It's required as per the error message :)
Easiest way to debug any CLI error is to just generate a new project and compare files like your package.json: ng new temporary
@intellix solved the problem for me. I added the line
... "@angular/compiler-cli":"^2.3.1", ...
version was the same as my other dependencies.
I have the same error with a new empty project that i am trying to deploy on heroku so this isn't an upgrade problem:
@angular/cli: 1.0.0
node: 6.10.1
os: linux x64
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0
Executing ng build after installing deps with npm
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
at Object.<anonymous> (/tmp/build_cbb06fd66b6910b71eeba0a0f3c62096/.heroku/node/lib/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/index.js:14:11)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/tmp/build_cbb06fd66b6910b71eeba0a0f3c62096/.heroku/node/lib/node_modules/@angular/cli/tasks/eject.js:10:19)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
Executing ng build after installing deps with yarn
remote: The "@angular/compiler-cli" package was not properly installed.
remote: Error: The "@angular/compiler-cli" package was not properly installed.
remote: at Object.<anonymous> (/app/.config/yarn/global/node_modules/@ngtools/webpack/src/index.js:14:11)
remote: at Module._compile (module.js:570:32)
remote: at Object.Module._extensions..js (module.js:579:10)
remote: at Module.load (module.js:487:32)
remote: at tryModuleLoad (module.js:446:12)
remote: at Function.Module._load (module.js:438:3)
remote: at Module.require (module.js:497:17)
remote: at require (internal/module.js:20:19)
remote: at Object.<anonymous> (/app/.config/yarn/global/node_modules/@angular/cli/tasks/eject.js:10:19)
remote: at Module._compile (module.js:570:32)
remote: at Object.Module._extensions..js (module.js:579:10)
remote: at Module.load (module.js:487:32)
remote: at tryModuleLoad (module.js:446:12)
remote: at Function.Module._load (module.js:438:3)
remote: at Module.require (module.js:497:17)
remote: at require (internal/module.js:20:19)
@codestation if you're building on Heroku, you need to move compiler-cli amongst a few other packages to "dependencies"
as Heroku only installs packages in production mode.
Here's an example package.json that works on Heroku with a basic server. I keep seeing this daily, I guess it's time for me to write my first blog post :)
{
"name": "wildcase",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"serve": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start": "node server",
"postinstall": "ng build --target=production -e ${NODE_ENV:-production} --aot"
},
"private": true,
"dependencies": {
"@angular/cli": "1.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "4.0.0-alpha.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"rxjs": "^5.1.0",
"typescript": "~2.2.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0"
}
}
Notice how I moved @angular/cli @angular/compiler-cli and a few others to dependencies
Thanks, that was the problem. Moved cli, compiler-cli and typescript out of devDeps and it worked.
@intellix where i put that code pleas ???
@elversace - If you're deploying to Heroku, add it to dependencies
, otherwise add it to devDependencies
inside package.json
.
...or go to console and: npm install --save @angular/compiler-cli
Created a blog post about Heroku deployments.
A long litany of comments. Still, I am not sure what the I need to do with respect to my initial posting???
@rfball npm install --save @angular/compiler-cli
@intellix Thanks for the quick response! Just tried this but this is a long list of "UNMET PEER DEPENDENCIES" . Is there a way to do something like the following, in order to start form scratch. 1 fix the package.json (and/or other files) 2 remove any existing files 3 reinstall from scratch Thanks for your help!
OK,
node_modules
directory (rm -rf node_modules dist
), package.json
to match the "dependencies" and "devDependencies" as shown in comment by @intellix above. angular-cli.json
file for changes in the environment configs (as listed in diagnostics from first time I ran ng serve after the install). I am up and running. Hoping for smooth sailing. Thanks again for the help. Closing this one now. :)
Same error here after upgrading to angular-cli 1.0, fixed by upgrading typescript to 2.2.0
Moving from devDeps to dependencies as @intellix said make npm start (ng serve) work, but... Are you sure about to use angular-cli? I moved to angular/cli and it seems that everything is working fine.
Everything? Chrome sais in some pages
ERROR Error: Uncaught (in promise): Error: Found the synthetic property @showFilterList. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Error: Found the synthetic property @showFilterList. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
I forgot to link to the blog post for CLI in Heroku, here it is: https://medium.com/@intellix/production-ready-angular-cli-in-heroku-4bcdc8322550
@jjorbas you need to import BrowserAnimationsModule into AppModule
Here's what worked for me: 1.) Followed the Updating Angular CLI section here 2.) Deleted node_modules folder 3.) Moved these from devDependencies to dependencies:
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
4.) npm install
This is why I hate npm and all this stuff (yes I know it can be great) I am following angular mobile toolkit - I only follow the first 2 steps of the tutorial and splat, nothing works,
If Typescript is a dependency and requires a certain version then npm should ruddy well update it instead of us having to google here and there to resolve it - unstructured nonsense.
This error happens from the following chunk of code:
https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/index.ts#L8
This code is not ideal. It assumes that if anything went wrong, it is because the user didn't install the right thing. Preferably it would look at the actual error more and try to give a more helpful error message. A stack overflow answer:
Suggest that the actual underlying problem is that some version of the package might not expose a VERSION symbol; but I have not investigated whether this is actually true.
Still, more defensive and specific error handling would help when things like this happen.
Setting up an Angular working app is still so tedious. I think this should be addressed by core team. If the team is creating an awesome product, then it should be awesome to use it too. Fixing Angular setup problems are like finding a pearl in shell. Although it gives some deeper understanding when we go under the hood, but how much man/hours we are going to spend in setting up an app. And on top of that we never know what will be changed in next release and the app will start giving such irrelevant messages which does not help a developer at all, that let us wandering. Angular QuickStart was a pain at first and now CLI too.. BTW, I have created brand new app just few moments ago after latest install of @angular/cli and it dont works.
I've applied some changes as recommended above this is how my package.json looks: I have moved "@angular/cli": "1.0.0", "@angular/compiler-cli": "^4.0.0" from devDependencies to Dependencies { "name": "shopper", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4", "@angular/cli": "1.0.0", "@angular/compiler-cli": "^4.0.0" }, "devDependencies": { "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.2.0" } }
Please do something to give us time to be more creative in creating an Angular App, rather than getting frustrated setting up a working app.
With above said, I love Angular.. Suggest me some solution for my problem. Cheers !
@mutanttech I don't believe you ever really said what problem you're having. You're getting the @angular/compiler-cli package was not properly installed
error?
A fresh install out of the box using CLI 1.0.0 should work. Do you have anymore details about your environment? OS/Node version etc
@intellix I guess you missed out that I have mentioned in my comment "BTW, I have created brand new app just few moments ago after latest install of @angular/cli and it dont works.". And yes, I am getting the same @angular/compiler-cli package was not properly installed error?
I am using Windows 8.1 Enterprise, Node Version 6.9.5, NPM version. 3.10.1. Let me know if you require any other details. I tried to make it work today by getting latest typescript v 2.2.2. But still the same error.
Cloud 9 Ubuntu 14.04 Node 7.8.0 NPM 4.2.0
Trying to get through the Thinkster.io training and first had a lot of Peer Dependency errors. Now,
freeredpill:~/workspace/angular2-realworld-example-app (master) $ npm uninstall --save-dev angular-cli && npm install --save-dev @angular/cli@latest ang2-conduit@0.0.0 /home/ubuntu/workspace/angular2-realworld-example-app └── @angular/cli@1.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
freeredpill:~/workspace/angular2-realworld-example-app (master) $ ng serve --host 0.0.0.0 --port 8080 --live-reload-port 8081
The option '--live-reload-port' is not registered with the serve command. Run ng serve --help
for a list of supported options.
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
at Object.
The option '--mobile' is not registered with the new command.
I had the same error. The issue was that I forgot that the project was ejected so I had to use npm run server instead of ng serve (you can not launch using ng serve if you've ejected the project). So, just double check if you're ejected or not. If you're working on multiple projects like I was, where some are ejected and some are not, it's easy to forget which ones are which and use ng serve like a reflex
FUCK!!!
For those who are still struggling with that error
Follow this guide step-by-step
Updating Angular CLI
Just do it thoroughly and double recheck your package.json dependencies before invoking npm install
.
My fix:
My fix was to set production to false and after that local npm install
sudo npm config set -g production false
npm install
{ "name": "orderflow2", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "webpack": "^3.2.0", "zone.js": "^0.8.4" }, "devDependencies": { ** THESE TWO ENTRIES RESOLVED THE ERROR
"@angular/cli": "^1.2.0", "@angular/compiler-cli": "^4.0.0",
** "@angular/language-service": "^4.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3" } }
npm install
npm update
ng serve
Will Work :D i just use this command and its work npm install -g @angular/cli
Finally found the solution see the below screenshots and steps to resolve this issue http://itechiesol.blogspot.com/2017/07/angular-compiler-cli-package-was-not.html
@naru6be 's solution worked for me after trying and failing with uninstall /reinstall
Thanks for your appreciation graycube
This works like magic
npm install --save-dev del
Make sure you cd into the file containing the package.json
I got the same error.... i gave command
npm install
and run the server ng serve
NodeJS installed as root (sudo apt get install nodejs) caused this problem for me. Using nvm tool fixed the problem https://github.com/creationix/nvm.
lready had an existing application I wanted to start using angular-cli in. When trying to implement angular-cli for an existing application, for me, just doing npm install -g @angular/cli
and then trying to use the ng commands did not work.
After installing angular-cli I did the following.
In a command line, in windows, I went to my C:\ folder and ran the command
ng new foo
. After nicely scaffolding my app, I copied the necessary files from this new folder and started moving them to my existing app folder and started sorting out the issues until I got my app running fine using angular-cli. This is the solution that worked for me when trying to implement angular-cli for an already existing application. Hope it helps
running npm install --save-dev @angular/cli@latest in the project folder fixed my problem
@intellix
Thanks a million. After moving the compiler-cli to my dependencies and re-installing it with npm install --save @angular/compiler-cli my 6 hour struggle ended. Now I can relax and enjoy my gaming night.
no worries bro. In code we believe/trust/live. What's your favorite game?
On Sep 15, 2017 9:04 PM, "Imran Khan" notifications@github.com wrote:
@intellix https://github.com/intellix
Thanks a million. After moving the compiler-cli to my dependencies and re-installing it with npm install --save @angular/compiler-cli my 6 hour struggle ended. Now I can relax and enjoy my gaming night.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/5654#issuecomment-329856369, or mute the thread https://github.com/notifications/unsubscribe-auth/AbgUzhPeJ_hSfP0CQccL6Aclk-3bBjxOks5sirxEgaJpZM4MpMsX .
@rickmutua Heroes of the Storm!
hey all,
I was sick of this kinda error. This whole process had me to install, uninstall, update etc a lot of time. but then I found the solution to this by following a few methods.
First of all, I found out that even after I had installed the @angular/cli globally my local setup wasn't able to identify a few of the dependencies like @angular/cli , @angular/compiler-cli, typescript, @angular/language-service. I found this out by executing the command "ng -v
" in which it showed an error right beside these mentioned dependencies. Then I executed the command npm install @angular/cli@latest
. That changed all my dependencies to v4.4.3 and all those dependencies were automatically shifted from devDependencies to Dependencies. and then when I execute "ng -v
" it shows no error, all the dependencies along with their versions were displayed and finally my "ng serve
" works great.
Note: It's just that some of the dependencies of angular/cli installed globally can't be fetched locally by the system and hence by installing them locally may do the trick...
Something to check - I noticed that I got this exact error message too when I forgot to run "npm install" first (whoops).
[X ] bug report -> please search issues before submitting