Lodash in hybrid AngularJS/Angular app using SystemJS. Can I separately assign '_'?

Question

I have a hybrid app written in AngularJS using TypeScript, that I recently converted to a hybrid app so that Angular can also be used in the project. I'm using SystemJS for the module loading.

After conversion, I'm getting an error in VS2015 related to Lodash that says

'Cannot find name '_'

I've looked at the following SO questions however none of the suggested solutions work or appear satisfactory:

Importing lodash into angular2 + typescript application

Angular2 and lodash...Cannot find name

I tried the main suggestion from the first question above, i.e.:

Delete node modules folder, then:

$ npm install --save lodash
$ npm install --save @types/lodash

Then, in my .ts file, I add this:

import * as _ from "lodash";

but that gives me the error 'Cannot find module 'lodash'.

I don't get that error if I use the following, but I still get the error 'Cannot find name '_':

import "lodash";

My question is this - is there a way that I can now separately assign '_' in my code to fix this? (I'd really like to fully understand the problem with using import * as _ from "lodash" i.e. what is the detail of what's going on here with the module loading and the assignment of '_')

Here's the *.ts file where I get the error:

import "lodash";

(function () {

var controller = function ( dependency1, dependency2) {

    this.myFunction = (myParam) => {

        this.MyService.getMyModel(myParam).then((model) => {
            this.model = model.Content;

            // can I assign _ so that it works here - if so where and how?
            _.each(this.model.MyEntities, function (m) { return m.showDetails = false; });
....

My relevant tsconfig.json compiler options are:

  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": [ "es2015", "dom" ]
    ....

When I look at C:\Program Files (x86)\Microsoft SDKs\TypeScript, I only have 1.8. When I grunt the project (which uses https://www.npmjs.com/package/grunt-ts) it tells me it's compiling using tsc v2.6.2 which I don't understand. I think VS2015 must be using tsc 1.8 (I only have a tsconfig.json, and no Typescript configuration on the .csproj).

Answer 1

For the issue with visual studio being on typescript 1.8, you will need to download a new version of the typescript plugin for visual studio.

You can find details for visual studio 2015 and 2017 on the typescript website download page

Regarding the lodash issue, I had what sounds like the same issue. The reason for me was that there were inconsistencies in the way lodash was being imported. When ALL code was changed to reference lodash as follows all was ok:

import * as _ from "lodash";

ALL code in my case included dropping a 3rd party component which was referencing loadash differently. I did debug and find out the actual reason but right now I cannot remember the details other than the solution that worked.