angular - Can't resolve all parameters for AppComponent

Question

i'm building big project, this is started part of it. my problem is very common, however I did not find a way to solve it. really need your help! I get an error of type. I will be glad to any help

Uncaught Error: Can't resolve all parameters for AppComponent: (?).
at syntaxError (main-client.js:52112)
at CompileMetadataResolver._getDependenciesMetadata (main-client.js:67193)
at CompileMetadataResolver._getTypeMetadata (main-client.js:67028)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (main-client.js:66536)
at CompileMetadataResolver._getEntryComponentMetadata (main-client.js:67341)
at main-client.js:66822
at Array.map (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (main-client.js:66822)
at CompileMetadataResolver.getNgModuleSummary (main-client.js:66645)
at main-client.js:66733
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (main-client.js:66718)
at JitCompiler._loadModules (main-client.js:85147)
at JitCompiler._compileModuleAndComponents (main-client.js:85108)
at JitCompiler.compileModuleAsync (main-client.js:85024)
at CompilerImpl.compileModuleAsync (main-client.js:50948)
at PlatformRef.bootstrapModule (main-client.js:6395)
at Object.defineProperty.value (main-client.js:49385)
at __webpack_require__ (main-client.js:679)
at fn (main-client.js:89)
at Object.options.path (main-client.js:48085)
at __webpack_require__ (main-client.js:679)
at module.exports (main-client.js:725)
at main-client.js:728

Here is my app.module.shared.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import { AppService } from './app.service'
import { HttpClient, HttpClientModule } from '@angular/common/http';
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http,
    ((typeof window !== 'undefined') ? window.location.origin: "http://localhost:5000")
        +'/assets/i18n/', '.json');
}

@NgModule({
declarations: [
    AppComponent,
],
imports: [
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
    }),
    BrowserModule    
],
providers: [AppService],
bootstrap: [AppComponent]
})

export class AppModuleShared {
}

Here is my app.component.ts

import { Component } from '@angular/core';
import { AppService } from '@app/app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(service: AppService) { }
}

Here is my app.component.html

<p>WORK</p>

Here is my app.service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class AppService { }

Here is my package.json

    {
    "name": "new_ang",
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "test": "karma start ClientApp/test/karma.conf.js"
    },
    "dependencies": {
        "@angular/animations": "5.0.2",
        "@angular/common": "5.0.2",
        "@angular/compiler": "5.0.2",
        "@angular/compiler-cli": "5.0.2",
        "@angular/core": "5.0.2",
        "@angular/forms": "5.0.2",
        "@angular/http": "5.0.2",
        "@angular/platform-browser": "5.0.2",
        "@angular/platform-browser-dynamic": "5.0.2",
        "@angular/platform-server": "5.0.2",
        "@angular/router": "5.0.2",
        "@aspnet/signalr-client": "1.0.0-alpha2-final",
        "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
        "@nguniversal/aspnetcore-engine": "^5.0.0-beta.5",
        "@ngx-translate/core": "8.0.0",
        "@ngx-translate/http-loader": "^2.0.0",
        "@types/webpack-env": "^1.13.2",
        "angular": "^1.6.6",
        "angular-oauth2-oidc": "3.0.2",
        "angular2-jwt": "0.2.3",
        "aspnet-prerendering": "3.0.1",
        "aspnet-webpack": "2.0.1",
        "bootstrap": "4.0.0-beta.2",
        "core-js": "2.5.1",
        "font-awesome": "4.7.0",
        "isomorphic-fetch": "2.2.1",
        "msgpack5": "3.6.0",
        "ng2-charts": "^1.6.0",
        "ng2-tree": "^2.0.0-rc.2",
        "ngx-swiper-wrapper": "^5.0.2",
        "preboot": "5.1.7",
        "rxjs": "5.5.2",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "1.5.2",
        "@angular/compiler-cli": "5.0.2",
        "@compodoc/compodoc": "1.0.4",
        "@ngtools/webpack": "1.8.2",
        "@types/hammerjs": "2.0.35",
        "@types/jasmine": "2.6.3",
        "@types/node": "8.0.51",
        "@types/selenium-webdriver": "3.0.8",
        "@types/source-map": "0.5.2",
        "@types/uglify-js": "2.6.29",
        "@types/webpack": "3.8.1",
        "angular-router-loader": "^0.8.0",
        "angular2-template-loader": "0.6.2",
        "awesome-typescript-loader": "3.3.0",
        "codelyzer": "4.0.1",
        "css-loader": "0.28.7",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.5",
        "html-loader": "0.5.1",
        "html-webpack-plugin": "2.30.1",
        "istanbul-instrumenter-loader": "3.0.0",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-coverage": "1.1.1",
        "karma-coverage-istanbul-reporter": "1.3.0",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-mocha-reporter": "2.2.5",
        "karma-remap-coverage": "0.1.4",
        "karma-sourcemap-loader": "0.3.7",
        "karma-webpack": "2.0.6",
        "ng-router-loader": "2.1.0",
        "node-sass": "4.7.1",
        "protractor": "5.2.0",
        "raw-loader": "0.5.1",
        "sass-loader": "6.0.6",
        "source-map-loader": "0.2.3",
        "style-loader": "0.19.0",
        "to-string-loader": "1.1.5",
        "ts-node": "3.3.0",
        "tslib": "1.8.0",
        "tslint": "5.8.0",
        "typescript": "2.6.1",
        "uglifyjs-webpack-plugin": "1.0.1",
        "url-loader": "0.6.2",
        "webpack": "3.8.1",
        "webpack-bundle-analyzer": "2.9.1",
        "webpack-hot-middleware": "2.20.0",
        "webpack-merge": "4.1.1"
    }
}

Environment

Angular CLI: 1.5.2
Node: 8.3.0
OS: linux x64
Angular: 5.0.2

Answer 1

Problem was solved by adding Inject directive to Service in AppComponent

constructor(@Inject(AppService) service: AppService)

Answer 2

This error message occurs because there is a problem with one or more of the dependencies of your Angular app. To resolve the issue, you need to find out which dependency is causing the problem and fix it. Here are some steps you can take:

1. Review the error message to determine which part of your code is causing the problem. In this case, it looks like the error is being thrown by the AppComponent.

2. Review the AppComponent class and its dependencies. Make sure that all required dependencies are imported and that there are no typos or syntax errors in the code.

3. Look for any missing or incorrect values in the constructor parameters. Make sure that you have declared all the required dependencies and that the correct types are being passed in.

4. Review the code for the AppService class. Make sure that there are no errors or missing values in this class.

5. Finally, run the npm install command in your terminal to make sure that all dependencies are installed correctly.

If you are still having trouble resolving the issue, you can try searching for similar issues online or reaching out to the Angular community for help.