Tuesday, November 8, 2016

How to solve "error TS2307: Cannot find module 'angular'" issue in development using sharpeoint page framework

In the WebPart.ts file. I use the import * as angular from angular to reference the external source that pointing to the angular CDN location.

{
  "entries": [
    {
      "entry": "./lib/webparts/itRequest/ItRequestWebPart.js",
      "manifest": "./src/webparts/itRequest/ItRequestWebPart.manifest.json",
      "outputPath": "./dist/it-Request.bundle.js"
    }
  ],
  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
      "angular": {
            "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
            "globalName": "angular"
          }

  },
  "localizedResources": {
    "itRequestStrings": "webparts/itRequest/loc/{locale}.js"
  }
}

however the syntax error already is shown indicate the type script can not find the angular module.



after i launch the app with Gulp Serve. the same erorr was encounter on the application launch



the root cause of this issue is that the project did not contain the angular TypeScript typing. since it is from the external source. we just need to install the angular TypeScript typing to fix the issue.

here is the steps to add the type script typing to the project.

1. use npm install tsd to install the tsd command (if the tsd is not installed.)

2. run tsd install angular --save to install the angular TypeScript typing. and angularjs will be found under typing folder.







 for more information, please visit the following link. it really save my day...

Use existing JavaScript libraries in SharePoint Framework client-side web parts



3 comments:

  1. Thanks for sharing useful information typescript. Good Stuff.

    Best Regards,
    CourseIng - ReactJS Training in Hyderabad

    ReplyDelete
  2. Hello, after reading this remarkable piece of writing i am as well glad to share my knowledge here with friends.

    ReplyDelete
  3. Hello There. I found your blog the use of msn. This is an extremely smartly written article. I will make sure to bookmark it and return to learn extra of your helpful info. Thanks for the post. I'll definitely comeback.

    ReplyDelete