Sp-dev-docs: Unhandled Promise rejection: Can't resolve all parameters for Component: (?). ; Zone: <root> ; Task: Promise.then ;

[dhavalshah01]

I am trying out to create a webpart using Angular 2 and SharePoint Framework SPFX and I am facing the below issue when I am trying to get the data from the service created in angular.

I am not sure but this works all fine in normal angular2 and typescript application. But when I merge the code in SharePoint Framework example it gives me the error.

Category

• [x] Question
• [x] Bug

Expected or Desired Behavior

I want to load the data from my service into angular app

Observed Behavior

I am getting the below error.

Unhandled Promise rejection: Can't resolve all parameters for AnnouncementComponent: (?). ; Zone: ; Task: Promise.then ; Value: SyntaxError Error: Can't resolve all parameters for AnnouncementComponent: (?).
at SyntaxError.ZoneAwareError (https://localhost:4321/dist/announcement-webpart.bundle.js:2101:34)
at SyntaxError.BaseError [as constructor] (https://localhost:4321/dist/announcement-webpart.bundle.js:5116:21)
at new SyntaxError (https://localhost:4321/dist/announcement-webpart.bundle.js:5319:21)
at CompileMetadataResolver._getDependenciesMetadata (https://localhost:4321/dist/announcement-webpart.bundle.js:22182:36)
at CompileMetadataResolver._getTypeMetadata (https://localhost:4321/dist/announcement-webpart.bundle.js:22057:31)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (https://localhost:4321/dist/announcement-webpart.bundle.js:21697:29)
at CompileMetadataResolver._loadDirectiveMetadata (https://localhost:4321/dist/announcement-webpart.bundle.js:21573:28)
at https://localhost:4321/dist/announcement-webpart.bundle.js:21774:59
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (https://localhost:4321/dist/announcement-webpart.bundle.js:21773:46)
at https://localhost:4321/dist/announcement-webpart.bundle.js:30890:63
at Array.forEach (native)
at JitCompiler._loadModules (https://localhost:4321/dist/announcement-webpart.bundle.js:30889:48)
at JitCompiler._compileModuleAndComponents (https://localhost:4321/dist/announcement-webpart.bundle.js:30844:57)
at JitCompiler.compileModuleAsync (https://localhost:4321/dist/announcement-webpart.bundle.js:30810:26)

Steps to Reproduce

const ANNOUNCEMENTS: Announcement[] = [
  { Id: 1, Title: "401k Policy", Description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." },
  { Id: 2, Title: "Medical Benefits", Description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." },
  { Id: 3, Title: "Happy 2017 !", Description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." }
];

@Injectable()
export class AnnouncementService {
    getMockAnnouncements(): Announcement[] {
        return ANNOUNCEMENTS;
    }
}

My component.ts file

export class AnnouncementComponent implements OnInit {

  description: string = "Company Announcements";
  announcements:Announcement[];
  constructor(private _announcementService : AnnouncementService){ }

  getAnnouncementsData():void{
    console.log("dd");  
    this.announcements = this._announcementService.getMockAnnouncements();
  }
  //announcements: Announcement[] = ANNOUNCEMENTS;
  ngOnInit():any {
    console.log("get announcements");
    this.getAnnouncementsData();
    console.log("Application component initialized ...");
  } 

package.json

"@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/router": "3.4.6",
    "@angular/upgrade": "2.4.6",
    "@microsoft/sp-client-base": "~0.7.0",
    "@microsoft/sp-client-preview": "~0.9.0",
    "@microsoft/sp-core-library": "~0.1.2",
    "@microsoft/sp-webpart-base": "~0.4.0",
    "@types/core-js": "^0.9.34",
    "@types/lodash": "^4.14.50",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "es6-shim": "^0.35.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.1.0",
    "zone.js": "^0.7.6"

[BenGWeeks]

Hi @dhavalshah01 - did you get this resolved?

[dhavalshah01]

Not really. But i got the workaround I initialized the service with the below line,

_announcementService = new AnnouncementService();

It gives me error when i try to initialize using the constructor.

public constructor(private _announcementService : AnnouncementService){ }

[BenGWeeks]

Did you try injecting into the constructor?

[nagpuregajanan]

I got the exact same error.

[raydelto]

In my case the issue was caused by @angular/forms . If you are using it near the faulty component start checking your @angular/forms and find a fix around it.

[deploymentvsureshk]

Did any one get it working

[patmill]

This sounds like an issue getting Angular2 working, rather than with the framework itself.

Here are some examples of people using Angular2
https://www.fmtconsultants.com/sharepoint-framework-spfx-angular2/

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype

http://www.sebastienlevert.com/2017/07/31/sharepoint-framework-and-angular-introducing-the-spfx-angular-boilerplate/

[mananchoksi007]

Did any one get it working

[sagar4u]

https://stackoverflow.com/questions/41045508/angular-2-cant-resolve-all-parameters-for-component?rq=1

Adding this inside tsconfig.js solved the issue
"emitDecoratorMetadata": true,

[kchiragowni]

I ran into similar issue for 'AppModule' and resolved by importing below:

```javascript
import 'reflect-metadata';

[selianord]

Running the same problems with My Online Store..

Unhandled Promise rejection:
Can't resolve all parameters for CartService: (?).
; Zone:

; Task:
null
; Value:
Error: Can't resolve all parameters for CartService: (?).
Error: Can't resolve all parameters for CartService: (?).
at syntaxError

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues