Angular is not injecting providers.

[rrdlpl]

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/common@2.4.10
├── UNMET PEER DEPENDENCY @angular/compiler@2.4.10
├── UNMET PEER DEPENDENCY @angular/core@2.4.10
├── UNMET PEER DEPENDENCY @angular/forms@2.4.10
└── UNMET PEER DEPENDENCY tslint@5.1.0

[sumitarora]

@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.

[rrdlpl]

@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/cli@1.0.1
├── bower@1.8.0
├── cordova@6.5.0
├── generator-jhipster@4.1.1
├── grunt@1.0.1
├── gulp@3.9.1
├── ionic@2.2.2
├── npm@3.10.10
├── npm-check@5.4.0
├── protractor@5.1.1
├── rxjs@5.0.1
├── tslint@5.1.0
├── typescript@2.2.2
├── yarn@0.22.0
└── zone.js@0.7.8

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]

@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/common@2.4.10
├── UNMET PEER DEPENDENCY @angular/compiler@2.4.10
├── UNMET PEER DEPENDENCY @angular/core@2.4.10
├── UNMET PEER DEPENDENCY @angular/forms@2.4.10
└── UNMET PEER DEPENDENCY tslint@5.1.0

[sumitarora]

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

[rrdlpl]

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

[sumitarora]

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

[coffeegist]

@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"

[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.}