角度4:使用SystemJS的Gulp构建任务返回错误ENOENT [英] Angular 4: Gulp Build Task with SystemJS returns Error ENOENT
本文介绍了角度4:使用SystemJS的Gulp构建任务返回错误ENOENT的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
更新时间:2020.02.13 -看起来其他人也遇到了同样的问题-但是，没有解决方案.参见
gulpfile.js:
'use strict';//安装gulp任务自动化所需的依赖项.var gulp = require('gulp');var del = require('del');var sourcemaps = require('gulp-sourcemaps');var sass = require('gulp-sass');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var cleanCSS = require('gulp-clean-css');var systemjsBuilder = require('gulp-systemjs-builder')var ts = require('gulp-typescript');var htmlmin = require('gulp-htmlmin');/***编译Sass文件，并将其保存在各自的位置.*/gulp.task('sass'，function(){console.log('Building Sass files.');返回gulp.src('app/**/*.scss'，{base:'./'}).pipe(sass().on('error'，sass.logError)).pipe(gulp.dest('.'));});/***观看萨斯文件.*/gulp.task('sass:watch'，function(){console.log('观看Sass文件.');gulp.watch('app/**/*.scss'，['sass']);});/***将TypeScript应用程序编译为JS.*/gulp.task('compile:ts'，function(){console.log('将TypeScript文件编译为Angular 4 App的JavaScript文件.');var tsProject = ts.createProject('tsconfig.json');返回tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()).js.pipe(gulp.dest('app'));});/***生成基于systemjs的捆绑包(app/app.js).*/gulp.task('bundle:app'，function(){console.log('为Angular 4 App生成app.js文件.');var builder = systemjsBuilder();builder.loadConfigSync('./system.config.js');builder.buildStatic('app'，'app/app.js'，{缩小:错误，mangle:假}).pipe(gulp.dest('portal/app/assets/js'));})/***将CSS依赖项复制并捆绑到一个文件vendor.min.css中.*/gulp.task('bundle:vendorCSS'，function(){console.log('将依赖项复制并捆绑到一个文件vendor.css中');返回gulp.src(['node_modules/bootstrap/dist/css/bootstrap.css'，'node_modules/font-awesome/css/font-awesome.min.css'，'node_modules/bootstrap-social/bootstrap-social.css']).pipe(concat('vendors.min.css')).pipe(cleanCSS({等级: {1:{specialComments:错误}}})).pipe(gulp.dest('portal/app/assets/css/vendors'));});/***将CSS依赖项复制并捆绑到一个文件app.component.min.css中.*/gulp.task('bundle:appCSS'，function(){console.log('将依赖项复制并捆绑到一个文件vendor.css中');返回gulp.src(['app/assets/css/app.component.css']).pipe(concat('app.component.min.css')).pipe(cleanCSS({等级: {1:{specialComments:错误}}})).pipe(gulp.dest('portal/app/assets/css'));});/***将FONT依赖项复制并捆绑到一个文件vendor.css中.*/gulp.task('bundle:vendorFONT'，function(){console.log('将字体依赖项复制到Angular 4 App \的门户目录.');返回gulp.src(['node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot *'，'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg *'，'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf *'，'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff *'，'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 *'，'node_modules/font-awesome/fonts/fontawesome-webfont.ttf *'，'node_modules/font-awesome/fonts/fontawesome-webfont.woff *'，'node_modules/font-awesome/fonts/fontawesome-webfont.woff2 *']).pipe(gulp.dest('portal/app/assets/css/fonts'));});/***将JAVASCRIPT依赖项复制并捆绑到一个文件vendor.js中.*/gulp.task('bundle:polyfillsJS'，function(){console.log('将依赖项复制并捆绑到一个文件中，即polyfills.js.');返回gulp.src(['node_modules/core-js/client/shim.min.js'，'node_modules/zone.js/dist/zone.js'，'node_modules/reflect-metadata/Reflect.js'，'node_modules/systemjs/dist/system.src.js']).pipe(concat('polyfills.js')).pipe(gulp.dest('portal/app/assets/js/polyfills'));});/***将从SystemJS加载的依赖项复制到门户目录中.*/gulp.task('copy:vendorJS'，function(){console.log('将从SystemJS加载的第三方依赖项复制到Angular 4 App \的门户目录中.');返回gulp.src(['@ angular/common/**'，'@ angular/compiler/**'，'@ angular/core/**'，'@ angular/forms/**'，'@ angular/http/**'，'@ angular/platform-browser/**'，'@ angular/platform-browser-dynamic/**'，'@ angular/router/**'，'@ ngx-translate/core/**'，'@ ngx-translate/http-loader/**'，'@ types/highcharts/**'，'angular2-highcharts/**'，'animate.css/**'，'bootstrap/**'，'bootstrap-daterangepicker/**'，'bootstrap-social/**'，'core-js/**'，'font-awesome/**'，'highcharts/**'，'jquery/**'，'jquery-slimscroll/**'，"lodash/**"，'片刻/**'，"ng2-breadcrumb/**"，'ng2-daterangepicker/**'，'ngx-bootstrap/**'，'ngx-infinite-scroll/bundles/**'，'reflect-metadata/**'，'rxjs/**'，'systemjs/**'，'zone.js/**']，{cwd:'node_modules/**'})/*此处需要Glob.*/.pipe(gulp.dest('portal/app/assets/js/vendors'));});/***将LOWER ENVIRONMENT index.html文件获取到门户目录的根目录.*/gulp.task('index-lower'，function(){console.log('将LOWER ENVIRONMENT index.html文件获取到Angular 4 App \的门户目录的根目录.');返回gulp.src(['static_lower/index.html']).pipe(gulp.dest('portal'));});/***将LOWER ENVIRONMENT应用程序核心文件复制到门户目录.*/gulp.task('core-lower'，['index-lower']，function(){console.log('将LOWER ENVIRONMENT核心应用程序文件复制到Angular 4 App \的门户目录的根目录.');返回gulp.src(['app/**'，'！app/**/*.ts'，'！app/**/*.scss']).pipe(gulp.dest('portal/app'));});/***将节点服务器复制到门户目录.*/gulp.task('server'，function(){console.log('将服务器文件复制到Angular 4 App \的门户目录的根目录.');返回gulp.src(['index.js'，'package.json']，{cwd:'server/**'}).pipe(gulp.dest('portal'));});/***一次执行所有降低环境"任务.*/gulp.task('all-lower'，['sass'，'bundle:app'，'bundle:vendorCSS'，'bundle:appCSS'，'bundle:vendorFONT'，'bundle:polyfillsJS'，'copy:vendorJS'，'compile:ts'，'core-lower'，'index-lower'，'server'])；/***将LOWER ENVIRONMENT依赖项和应用程序捆绑到一个文件(app.bundle.js)中.*/gulp.task('bundle-lower'，['all-lower']，function(){console.log('将LOWER ENVIRONMENT JavaScript依赖项复制并捆绑到一个文件中，app.bundle.js然后将其拖放到Angular 4 App \的门户目录中.')返回gulp.src(['portal/app/assets/js/polyfills/polyfills.js'，'portal/app/assets/js/app/app.js']).pipe(concat('app.bundle.min.js')).pipe(uglify()).pipe(gulp.dest('portal/app/assets/js'));});/***缩小HTML任务.*(在这个StackOverflow问题中，filesToCopy故意是一个空数组-您不需要html文件列表吗?)*/gulp.task('buildmini'，function(){console.log('缩小门户网站目录的html组件.');var filesToCopy = [];返回gulp.src(filesToCopy，{base:'./'}).pipe(htmlmin({crashWhitespace:正确，caseSensitive:正确})).pipe(gulp.dest('./'));});/***删除门户目录.*/gulp.task('clean'，function(cb){console.log('正在删除/portal目录.');返回del(['portal']，cb);}); system.config.js:
(function(global){System.config({路径:{//路径用作别名'npm:':'node_modules/'}，//map告诉System loader在哪里寻找东西地图: {//我们的应用程序位于应用程序目录中app:"app"，//角度束，在node_modules内部'@ angular/core':'npm:@ angular/core/bundles/core.umd.js'，'@ angular/common':'npm:@ angular/common/bundles/common.umd.js'，'@ angular/common/http':'node_modules/@angular/common/bundles/common-http.umd.js'，'@ angular/compiler':'npm:@ angular/compiler/bundles/compiler.umd.js'，'@ angular/platform-browser':'npm:@ angular/platform-browser/bundles/platform-browser.umd.js'，'@ angular/platform-browser-dynamic':'npm:@ angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'，'@ angular/http':'npm:@ angular/http/bundles/http.umd.js'，'@ angular/router':'npm:@ angular/router/bundles/router.umd.js'，'@ angular/forms':'npm:@ angular/forms/bundles/forms.umd.js'，//其他库，位于node_modules内部'jquery':'npm:jquery/dist/jquery.js'，'bootstrap':'npm:bootstrap/dist/js/bootstrap.min.js'，'@ ngx-translate/core':'npm:@ ngx-translate/core/bundles/core.umd.js'，'@ ngx-translate/http-loader':'npm:@ ngx-translate/http-loader/bundles/http-loader.umd.js'，'rxjs':'npm:rxjs'，'ngx-infinite-scroll':'npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.js'，'tslib':'npm:tslib/tslib.js'，//图表框架'angular2-highcharts':'npm:angular2-highcharts'，'highcharts':'npm:highcharts'，'highcharts/noData':'npm:highcharts/modules/no-data-to-display.src.js'，'moment':'npm:moment/moment.js'，'ngx-bootstrap':'npm:ngx-bootstrap'，'bootstrap-daterangepicker':'npm:bootstrap-daterangepicker/daterangepicker.js'，'ng2-breadcrumb':'npm:ng2-breadcrumb'，'ng2-daterangepicker':'npm:ng2-daterangepicker'}，//软件包告诉系统加载程序在没有文件名和/或扩展名的情况下如何加载套餐:{应用程序: {main:'./main.js'，defaultExtension:'js'}，rxjs:{defaultExtension:'js'}，高图:{main:'./highcharts.js'，defaultExtension:'js'}，'angular2-highcharts':{main:'./index.js'，defaultExtension:'js'}，'ngx-bootstrap':{格式:"cjs"，主要:"bundles/ngx-bootstrap.umd.js"，defaultExtension:'js'}，'ng2-breadcrumb':{main:'./ng2-breadcrumb.js'，defaultExtension:'js'}，'ng2-daterangepicker':{主要:索引"，defaultExtension:'js'}}});})(这个); 角度为4的package.json:
{"name":"angular4-web-app"，"version":"1.0.0"，"author":"Mark"，"description":"SystemJS上的Angular 4 Web App"，"homepage":"https://fakehomepage.com"，脚本":{"start":"tsc&&同时\" tsc -w \"\" lite-server \"\" gulp sass \"\" gulp sass:watch \"，"start:dev":复制\" environment_dev.ts \"\" ./app/shared/environment/global.constants.ts \&& npm运行开始"，"start:qa":复制\" environment_qa.ts \"\"./app/shared/environment/global.constants.ts \&& npm运行开始"，"start:prod":复制\" environment_prod.ts \"\"./app/shared/environment/global.constants.ts \&& npm运行开始"，"tsc":"tsc"，"tsc:w":"tsc -w"，"lint":"tslint ./app/**/*.ts -t verbose"，"lite":"lite-server"，"sass":"gulp sass"，"sass:watch":"gulp sass:watch"，"build:dev":复制\" environment_dev.ts \"\" ./app/shared/environment/global.constants.ts \&& gulp bundle-lower"，"build:qa":复制\" environment_qa.ts \"\"./app/shared/environment/global.constants.ts \&& gulp bundle-lower"，"build:prod":复制\" environment_prod.ts \"\" ./app/shared/environment/global.constants.ts \&& gulp bundle-prod"，"final":"gulp buildmini"，"destroy":大口干净"}，许可证":"ISC"，依赖关系":{"@ angular/common":"4.4.7"，"@ angular/compiler":"4.4.7"，"@ angular/core":"4.4.7"，"@ angular/forms":"4.4.7"，"@ angular/http":"4.4.7"，"@ angular/platform-browser":"4.4.7"，"@ angular/platform-browser-dynamic":"4.4.7"，"@ angular/router":"4.4.7"，"@ ngx-translate/core":"^ 6.0.1"，"@ ngx-translate/http-loader":"0.0.3"，"@ types/highcharts":"^ 4.2.57"，"angular2-highcharts":"^ 0.5.5"，"animate.css":"^ 3.5.2"，"bootstrap":"^ 3.4.1"，"bootstrap-social":"^ 5.1.1"，"core-js":"^ 2.4.1"，"font-awesome":〜4.7.0"，"gulp":"^ 3.9.1"，"gulp-htmlmin":"^ 5.0.1"，"highcharts":"^ 5.0.12"，"jquery":"^ 3.4.1"，"jquery-slimscroll":"^ 1.3.8"，"lodash":"^ 4.17.15"，"moment":"^ 2.18.1"，"ng2-breadcrumb":"^ 0.5.14"，"ng2-daterangepicker":"^ 2.0.8"，"ngx-bootstrap":"^ 2.0.5"，"ngx-infinite-scroll":"^ 0.5.1"，"reflect-metadata":"^ 0.1.3"，"rxjs":"5.4.2"，"systemjs":"0.19.27"，"zone.js":"^ 0.6.23"}，"devDependencies":{"@ types/node":"^ 6.0.60"，"concurrently":"^ 3.1.0"，"connect-history-api-fallback":"^ 1.3.0"，"del":"^ 2.2.2"，"gulp-clean-css":"^ 3.9.0"，"gulp-concat":"^ 2.6.1"，"gulp-sass":"^ 3.1.0"，"gulp-sourcemaps":"^ 2.6.0"，"gulp-systemjs-builder":"^ 0.15.0"，"gulp-typescript":"^ 3.2.1"，"gulp-uglify":"^ 3.0.0"，"lite-server":"^ 2.3.0"，"tslint":"^ 3.7.4"，"typescript":"^ 2.2.2"}，存储库":{"type":"git"，"url":"https://bitbucket.org/mark/angular4-web-app.git"}} 解决方案
在您的配置文件(例如webpack config或Babel)中，您将需要使用与操作系统无关的方法来查找文件，因为:
Windows使用 \ ，其他所有内容使用/
因此需要Node的内置 path 模块
const path = require('path') 在您的配置文件中，使用 path 和 __ dirname
//"target":"./dist"目标":路径(__dirname，'/dist') 来自webpack的证据:
https://webpack.js.org/configuration/
(尽管不仅仅是webpack出现了问题)
UPDATED: 2020.02.13 - Looks like someone else fell through this same problem too - however, no solution. See Github.
A specific set of GulpJS errors are surfacing when trying to build out an Angular 4 Web App with SystemJS.
What's odd is that usually this build script works. There were no edits to the GulpJS or SystemJS file. I'm curious if something in the node/npm ecosystem changes this assumption. At any rate, your thoughts on a fix would be appreciated.
My Windows 10 machine is currently installed with Node version 10.14.0 and npm version of 6.9.0.
When executing npm run build:dev The errors from Gulp show in the terminal as:
Unhandled rejection Error on fetch for app/main.js at file:///C:/Users/Mark/Desktop/Development/Bitbucket/Angular4App/app/main.js
Error: ENOENT: no such file or directory, open 'C:\Users\Mark\Desktop\Development\Bitbucket\Angular4App\app\main.js'
To be clear, the above file being main.js does truly exist in the file system.
Gulp continues, and the remainder of the build completes. But when testing out the final build, the app doesn't load and this asset is missing from the final build:
Noticeably missing from the final build artifact:
app/assets/js/app/app.js
gulpfile.js:
'use strict';
// Install required dependencies for gulp task automation.
var gulp = require('gulp');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var systemjsBuilder = require('gulp-systemjs-builder')
var ts = require('gulp-typescript');
var htmlmin = require('gulp-htmlmin');
/**
* Compile Sass files and keep them in their respective locations.
*/
gulp.task('sass', function () {
console.log('Building Sass files.');
return gulp.src('app/**/*.scss', { base: './' })
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('.'));
});
/**
* Watch Sass files.
*/
gulp.task('sass:watch', function () {
console.log('Watching Sass files.');
gulp.watch('app/**/*.scss', ['sass']);
});
/**
* Compile TypeScript app to JS.
*/
gulp.task('compile:ts', function() {
console.log('Compile TypeScript files into JavaScript files for Angular 4 App.');
var tsProject = ts.createProject('tsconfig.json');
return tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(gulp.dest('app'));
});
/**
* Generate systemjs-based bundle (app/app.js).
*/
gulp.task('bundle:app', function() {
console.log('Generate app.js file for Angular 4 App.');
var builder = systemjsBuilder();
builder.loadConfigSync('./system.config.js');
builder.buildStatic('app', 'app/app.js', {
minify: false,
mangle: false
})
.pipe(gulp.dest('portal/app/assets/js'));
})
/**
* Copy and bundle CSS dependencies into one file, vendors.min.css.
*/
gulp.task('bundle:vendorCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/font-awesome/css/font-awesome.min.css',
'node_modules/bootstrap-social/bootstrap-social.css'
])
.pipe(concat('vendors.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css/vendors'));
});
/**
* Copy and bundle CSS dependencies into one file, app.component.min.css.
*/
gulp.task('bundle:appCSS', function() {
console.log('Copy and bundle dependencies into one file, vendors.css.');
return gulp.src([
'app/assets/css/app.component.css'
])
.pipe(concat('app.component.min.css'))
.pipe(cleanCSS({
level: {
1: {
specialComments: false
}
}
}))
.pipe(gulp.dest('portal/app/assets/css'));
});
/**
* Copy and bundle FONT dependencies into one file, vendors.css.
*/
gulp.task('bundle:vendorFONT', function() {
console.log('Copy font dependencies to Angular 4 App\'s portal directory.');
return gulp.src([
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff*',
'node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2*',
'node_modules/font-awesome/fonts/fontawesome-webfont.ttf*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff*',
'node_modules/font-awesome/fonts/fontawesome-webfont.woff2*'
])
.pipe(gulp.dest('portal/app/assets/css/fonts'));
});
/**
* Copy and bundle JAVASCRIPT dependencies into one file, vendors.js.
*/
gulp.task('bundle:polyfillsJS', function() {
console.log('Copy and bundle dependencies into one file, polyfills.js.');
return gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js'
])
.pipe(concat('polyfills.js'))
.pipe(gulp.dest('portal/app/assets/js/polyfills'));
});
/**
* Copy dependencies loaded from SystemJS into portal directory.
*/
gulp.task('copy:vendorJS', function () {
console.log('Copy 3rd party dependencies loaded from SystemJS to Angular 4 App\'s portal directory.');
return gulp.src([
'@angular/common/**',
'@angular/compiler/**',
'@angular/core/**',
'@angular/forms/**',
'@angular/http/**',
'@angular/platform-browser/**',
'@angular/platform-browser-dynamic/**',
'@angular/router/**',
'@ngx-translate/core/**',
'@ngx-translate/http-loader/**',
'@types/highcharts/**',
'angular2-highcharts/**',
'animate.css/**',
'bootstrap/**',
'bootstrap-daterangepicker/**',
'bootstrap-social/**',
'core-js/**',
'font-awesome/**',
'highcharts/**',
'jquery/**',
'jquery-slimscroll/**',
'lodash/**',
'moment/**',
"ng2-breadcrumb/**",
'ng2-daterangepicker/**',
'ngx-bootstrap/**',
'ngx-infinite-scroll/bundles/**',
'reflect-metadata/**',
'rxjs/**',
'systemjs/**',
'zone.js/**'
], { cwd: 'node_modules/**' }) /* Glob required here. */
.pipe(gulp.dest('portal/app/assets/js/vendors'));
});
/**
* Get the LOWER ENVIRONMENT index.html file to the root of the portal directory.
*/
gulp.task('index-lower', function(){
console.log('Get LOWER ENVIRONMENT index.html file to the root of Angular 4 App\'s portal directory.');
return gulp.src(['static_lower/index.html'])
.pipe(gulp.dest('portal'));
});
/**
* Copy the LOWER ENVIRONMENT app core files to the portal directory.
*/
gulp.task('core-lower', ['index-lower'], function(){
console.log('Copy LOWER ENVIRONMENT core application files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['app/**', '!app/**/*.ts', '!app/**/*.scss'])
.pipe(gulp.dest('portal/app'));
});
/**
* Copy node server to portal directory.
*/
gulp.task('server', function () {
console.log('Copy server files to the root of Angular 4 App\'s portal directory.');
return gulp.src(['index.js', 'package.json'], { cwd: 'server/**' })
.pipe(gulp.dest('portal'));
});
/**
* Perform all LOWER ENVIRONMENT tasks at once.
*/
gulp.task('all-lower', ['sass', 'bundle:app', 'bundle:vendorCSS', 'bundle:appCSS', 'bundle:vendorFONT', 'bundle:polyfillsJS', 'copy:vendorJS', 'compile:ts', 'core-lower', 'index-lower', 'server']);
/**
* Bundle LOWER ENVIRONMENT dependencies and app into one file (app.bundle.js).
*/
gulp.task('bundle-lower', ['all-lower'], function() {
console.log('Copy and bundle LOWER ENVIRONMENT JavaScript dependencies into one file, app.bundle.js then drop it into Angular 4 App\'s portal directory.');
return gulp.src([
'portal/app/assets/js/polyfills/polyfills.js',
'portal/app/assets/js/app/app.js'
])
.pipe(concat('app.bundle.min.js'))
.pipe(uglify())
.pipe(gulp.dest('portal/app/assets/js'));
});
/**
* Minify HTML task.
* (filesToCopy is intentionally an empty array in this StackOverflow Question - you don't need a list of html files do you?)
*/
gulp.task('buildmini', function() {
console.log('Minify portal directory\'s html components.');
var filesToCopy = [
];
return gulp.src(filesToCopy, {base: './'})
.pipe(htmlmin({
collapseWhitespace: true,
caseSensitive: true
}))
.pipe(gulp.dest('./'));
});
/**
* Remove portal directory.
*/
gulp.task('clean', function (cb) {
console.log('Removing /portal directory.');
return del(['portal'], cb);
});
system.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app directory
app: 'app',
// angular bundles, inside of node_modules
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries, inside of node_modules
'jquery': 'npm:jquery/dist/jquery.js',
'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
'@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
'rxjs': 'npm:rxjs',
'ngx-infinite-scroll': 'npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.js',
'tslib': 'npm:tslib/tslib.js',
// charting frameworks
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts': 'npm:highcharts',
'highcharts/noData': 'npm:highcharts/modules/no-data-to-display.src.js',
'moment': 'npm:moment/moment.js',
'ngx-bootstrap': 'npm:ngx-bootstrap',
'bootstrap-daterangepicker': 'npm:bootstrap-daterangepicker/daterangepicker.js',
'ng2-breadcrumb': 'npm:ng2-breadcrumb',
'ng2-daterangepicker': 'npm:ng2-daterangepicker'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
highcharts: {
main: './highcharts.js',
defaultExtension: 'js'
},
'angular2-highcharts': {
main: './index.js',
defaultExtension: 'js'
},
'ngx-bootstrap': {
format: 'cjs',
main: 'bundles/ngx-bootstrap.umd.js',
defaultExtension: 'js'
},
'ng2-breadcrumb': {
main: './ng2-breadcrumb.js',
defaultExtension: 'js'
},
'ng2-daterangepicker': {
main: 'index',
defaultExtension: 'js'
}
}
});
})(this);
angular 4 package.json:
{
"name": "angular4-web-app",
"version": "1.0.0",
"author": "Mark",
"description": "Angular 4 Web App on SystemJS",
"homepage": "https://fakehomepage.com",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" \"gulp sass\" \"gulp sass:watch\" ",
"start:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"start:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && npm run start",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"sass": "gulp sass",
"sass:watch": "gulp sass:watch",
"build:dev": "copy \"environment_dev.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:qa": "copy \"environment_qa.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-lower",
"build:prod": "copy \"environment_prod.ts\" \"./app/shared/environment/global.constants.ts\" && gulp bundle-prod",
"final": "gulp buildmini",
"destroy": "gulp clean"
},
"license": "ISC",
"dependencies": {
"@angular/common": "4.4.7",
"@angular/compiler": "4.4.7",
"@angular/core": "4.4.7",
"@angular/forms": "4.4.7",
"@angular/http": "4.4.7",
"@angular/platform-browser": "4.4.7",
"@angular/platform-browser-dynamic": "4.4.7",
"@angular/router": "4.4.7",
"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"@types/highcharts": "^4.2.57",
"angular2-highcharts": "^0.5.5",
"animate.css": "^3.5.2",
"bootstrap": "^3.4.1",
"bootstrap-social": "^5.1.1",
"core-js": "^2.4.1",
"font-awesome": "~4.7.0",
"gulp": "^3.9.1",
"gulp-htmlmin": "^5.0.1",
"highcharts": "^5.0.12",
"jquery": "^3.4.1",
"jquery-slimscroll": "^1.3.8",
"lodash": "^4.17.15",
"moment": "^2.18.1",
"ng2-breadcrumb": "^0.5.14",
"ng2-daterangepicker": "^2.0.8",
"ngx-bootstrap": "^2.0.5",
"ngx-infinite-scroll": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.4.2",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/node": "^6.0.60",
"concurrently": "^3.1.0",
"connect-history-api-fallback": "^1.3.0",
"del": "^2.2.2",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-systemjs-builder": "^0.15.0",
"gulp-typescript": "^3.2.1",
"gulp-uglify": "^3.0.0",
"lite-server": "^2.3.0",
"tslint": "^3.7.4",
"typescript": "^2.2.2"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/mark/angular4-web-app.git"
}
}
解决方案
Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:
Windows uses \ and everything else uses /
So require Node's built in path module
const path = require('path')
And in your config files use path and __dirname
// "target": "./dist"
"target": path(__dirname, '/dist')
Evidence from webpack:
https://webpack.js.org/configuration/
(Though it's not just webpack that has the issue)
这篇关于角度4:使用SystemJS的Gulp构建任务返回错误ENOENT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
