Latest Update
I must apologize for the confusion in my previous explanation of the issue. The errors I encountered were not during the compilation of the Angular application via Gulp, but rather in the Visual Studio 'Errors List'. Fortunately, I have managed to find a resolution (or at least a workaround) and would like to express my gratitude to all those who provided assistance. Please see my solution below.
The scenario involves developing an Angular4 / TypeScript application within a PoC Asp.Net Core Web Application. Initially, the Angular4 application functioned flawlessly within my PoC app. Subsequently, I transferred all relevant files to the application I am currently developing (also an Asp.Net Core Web App).
After running 'npm install' to ensure that all dependencies were installed and utilizing Gulp to generate the .js files within my wwwroot/js/ folder; Gulp completed without any issues. However, Visual Studio is now displaying the error specified below, hindering me from building the project.
TS2307 Build:Cannot find module 'lodash'.
Adding to the complexity, after executing the aforementioned steps, the original PoC app began encountering the same error despite no changes implemented to the project. This leads me to believe it may be due to an environmental factor.
Upon researching Similar Issue, some suggest installing @types/lodash, however, this resulted in duplication errors (removing typings resolves duplication errors but introduces other issues).
The .ts code triggering the error reads as follows:
import * as _ from "lodash";
Attempts to rectify the error by changing to:
import _ from "lodash";
have proven unsuccessful.
I wholeheartedly appreciate any assistance you can provide, as I am currently grappling with the perplexity of why this functionality has ceased working.
My configuration files are detailed as the following:
package.json
{
"version": "1.0.0",
"name": "aspnet",
"private": true,
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"angular2-datatable": "^0.6.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"lodash": "^4.17.4",
"moment": "^2.14.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/node": "7.0.7",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-tsc": "^1.3.1",
"gulp-typescript": "^3.1.6",
"gulp-uglify": "^2.0.0",
"path": "^0.12.7",
"typescript": "^2.1.0",
"typings": "^2.1.0"
}
}typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/app/",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"moduleResolution": "node",
"typeRoots": [
"./node_modules/@types",
"./node_modules"
],
"types": [
"node"
]
},
"exclude": [
"node_modules"
]
}