I'm encountering an issue with lodash. Whenever I deploy using gulp, I consistently receive the following error:
vendors.min.js:3 GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found)
I have declared the library in my index.html file
<script src="node_modules/lodash/lodash.js"></script>
I import lodash into my typescript file
///<reference path="../../../typings/modules/lodash/index.d.ts" />
import * as _ from "lodash";
Everything works fine when I test my website locally (by launching lite server with npm start).
Now, I am trying to deploy my website using Gulp. Here is my gulp file:
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src([
'node_modules/angular2/typings/browser.d.ts',
'typings/main/ambient/firebase/firebase.d.ts',
'app/**/*.ts'
])
.pipe(ts(tsProject));
return tsResult.js.pipe(addsrc.append('config-prod.js'))
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/systemjs/dist/syst...
gulp.task('default',[ 'app-bundle', 'vendor-bundle' ], function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js'
}))
.pipe(gulp.dest('dist'));
});
When I test my website, I encounter the following errors:
vendors.min.js:3 GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found)r @ vendors.min.js:3e.scheduleTask @ ve...
vendors.min.js:3 Error: XHR error (404 Not Found) loading http://127.0.0.1/projects/myproject/lodash
Error loading http://127.0.0.1/projects/myproject/lodash as "lodash" from ht...
Here is my SystemJS :
System.config({
paths: {
'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
'rxjs/*' : 'node_modules/rxjs/*.js'
},
map: {
'@angular' : 'angular2',
'videogular2' : 'node_modules/videogular2',
'rxjs': 'node_modules/rxjs',
'lodash': 'node_modules/lodash'
},
packages: {
map: {
'rxjs': 'node_modules/rxjs'
},
lodash:{
main:'lodash',
defaultExtension:'js'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
});
<p>I have been searching for a solution for many days and would greatly appreciate any assistance.</p>
<p>When deploying, I also add this script:</p>
<pre><code>document.addEventListener('DOMContentLoaded', function () {
System.import('boot')
.then(null, console.error.bind(console));
});