Angular-cli: Angular is not injecting providers.

Created on 26 Apr 2017 · 8Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x ] bug report 
- [ ] feature request

Versions.

@angular/cli: 1.0.0-beta.32.3
node: 6.10.2
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.10

OS:

NAME="Amazon Linux AMI"
VERSION="2017.03"
ID="amzn"
ID_LIKE="rhel fedora"
VERSION_ID="2017.03"
PRETTY_NAME="Amazon Linux AMI 2017.03"
ANSI_COLOR="0;33"
CPE_NAME="cpe:/o:amazon:linux:2017.03:ga"
HOME_URL="http://aws.amazon.com/amazon-linux-ami/"
Amazon Linux AMI release 2017.03

On my aws machine I have an angular2 webapp created with @angular/cli. I've tried to install all packages with yarn/npm but it doesn't seem to install everything, because when I enter to the website it doesn't inject any provider and it doesn't render properly.

I've deleted the whole folder of node_modules/ .npm/cache yarn/cache reinstalled everything with yarn and npm but it doesn't work either.

My package.json:

{
  "name": "seon.site-builder.ui",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --proxy-config proxy.conf.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@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/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.24",
    "@ngx-translate/core": "^6.0.0",
    "@ngx-translate/http-loader": "^0.0.3",
    "angular2-esri-loader": "^0.1.11",
    "angular2-esri4-components": "^0.5.0",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "esri-loader": "^0.1.3",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "ng2-signalr": "1.0.8",
    "ng2-table": "^1.3.2",
    "ng2-validation": "^3.8.0",
    "ngx-toastr": "^4.3.0",
    "rxjs": "^5.1.0",
    "settings-editor": "0.0.11",
    "signalr": "^2.2.1",
    "zone.js": "^0.7.6",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.11",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.34"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "^2.4.0",
    "@types/arcgis-js-api": "^4.2.0",
    "@types/jasmine": "^2.5.38",
    "@types/lodash": "^4.14.58",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0-beta.4",
    "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",
    "karma-phantomjs-launcher": "^1.0.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "^2.2.1"
  }
}

Node: 6.10.2
Npm: 3.10.10
Yarn: 0.22.0
After running:

npm cache clean
rm -rf node_modules/
npm install

I'll get UNMET PEER DEPENDENCY errors with angular:


├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── UNMET PEER DEPENDENCY [email protected]

RFC / discussion / question

Source

rrdlpl

👍1

All 8 comments

@rrdlpl Seems like you are using old version on Angular CLI @angular/cli: 1.0.0-beta.32.3 Please update to latest version and check.

sumitarora on 26 Apr 2017

@sumitarora thanks for the reply
I've uninstalled the @angular/cli: 1.0.0-beta.32.3. And Installed the latest version with:
sudo npm install -g @angular/cli@latest

npm list -g --depth=0
├── @angular/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

I deleted the npm cache too and updated the package.json to point to this version of angular/cli in my
"@angular/cli": "1.0.1",

ran the site with ng serve --host 0.0.0.0 and when I access to the site I get this message:

Invalid Host header

rrdlpl on 26 Apr 2017

😕1 👍1

@sumitarora I managed to get rid off the invalid host header error, but I'm getting the same error as before. The providers aren't getting injected.
And
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── UNMET PEER DEPENDENCY [email protected]

rrdlpl on 27 Apr 2017

@rrdlpl Is there a repo that I can take a look?

sumitarora on 27 Apr 2017

@sumitarora The repo is private I cannot show you :(

rrdlpl on 27 Apr 2017

@rrdlpl Above package.json is same if I copy and use it in a project?

sumitarora on 27 Apr 2017

@rrdlpl how did you get rid of the invalid host header?

Edit: Apparently now your URL can't be different than what ng serve --host has specified. So if you just do ng serve, you MUST visit the url "http://localhost:4200"