5
Tôi đang sử dụng Angular2 với SystemJS hoạt động khá tốt trong quá trình phát triển. Bây giờ tôi muốn triển khai phiên bản biên dịch đầu tiên của tôi bằng cách sử dụng gulp.Angular2, Gulp, SystemJS -> Vấn đề với phần mở rộng mặc định
Để làm rõ, tôi sử dụng các tập tin sau đây systemJS:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'lib/node_modules/rxjs',
'angular2-in-memory-web-api': 'lib/node_modules/angular2-in-memory-web-api',
'@angular': 'lib/node_modules/@angular',
'ng2-charts/bundles': 'lib/node_modules/ng2-charts/bundles',
'ng2-charts/components': 'lib/node_modules/ng2-charts/components',
'ng2-cookies': 'lib/node_modules/ng2-cookies/'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { format: 'register', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
baseURL: "/",
defaultJSExtension : true,
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Và gulpfile sau:
const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const tsconfig = require('tsconfig-glob');
const sourcemaps = require('gulp-sourcemaps');
// clean the contents of the distribution directory
gulp.task('clean', function() {
return del('dist/**/*');
});
// TypeScript compile
gulp.task('compile', ['clean'], function() {
return gulp
.src(tscConfig.files)
.pipe(sourcemaps.init()) // <--- sourcemaps
.pipe(typescript(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.')) // <--- sourcemaps
.pipe(gulp.dest('dist'));
});
// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
return gulp.src([
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/router.dev.js',
'node_modules/chart.js/dist/Chart.bundle.min.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'TcAdsWebService.js'
])
.pipe(gulp.dest('dist/lib'))
});
gulp.task('copy:modules',['clean'],function() {
return gulp.src([
'./node_modules/@angular/**/*',
'./node_modules/rxjs/**/**',
'./node_modules/angular2-in-memory-web-api/**/*',
'./node_modules/ng2-charts/**/*',
'./node_modules/ng2-cookies/**/*'
],{base:'./'}).pipe(gulp.dest('dist/lib'));
});
gulp.task('copy:pics',['clean'], function() {
return gulp.src(['pics/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
})
gulp.task('copy:css',['clean'],function() {
return gulp.src(['css/**/*'],{base:'./'}).pipe(gulp.dest('dist/css'));
});
gulp.task('copy:js',['clean'],function() {
return gulp.src(['js/**/*'],{base:'./'}).pipe(gulp.dest('dist/js'));
});
gulp.task('copy:systemJS',['clean'],function() {
return gulp.src(['systemjs.config.js']).pipe(gulp.dest('dist'));
});
// copy static assets - i.e. non TypeScript compiled source
gulp.task('copy:assets', ['clean'], function() {
return gulp.src(['app/**/*', 'index.html', 'styles.css', '!app/**/*.ts'], { base : './' })
.pipe(gulp.dest('dist'))
});
gulp.task('tsconfig-glob', function() {
return tsconfig({
configPath: '.',
indent: 2
});
});
gulp.task('build', ['tsconfig-glob','compile', 'copy:pics', 'copy:js', 'copy:css', 'copy:systemJS','copy:modules','copy:libs', 'copy:assets']);
gulp.task('default', ['build']);
Sau khi xây dựng các ứng dụng angular2 và tải nó trong trình duyệt tôi nhận được lỗi sau đây trong bảng điều khiển:
Unable to load script http://localhost:81/app/app.component
cho biết rằng nó thiếu phần mở rộng .js từ t ông đã biên soạn các tập tin. Tôi khá chắc chắn rằng,
'app': { format: 'register', defaultExtension: 'js' },
thực sự yêu cầu trình biên dịch lưu ý đến phần mở rộng .js trong thư mục ứng dụng, tuy nhiên nó không. Đây là dự án angular2 đầu tiên của tôi và biên dịch gulp đầu tiên của tôi và tôi khá chắc chắn rằng tôi thiếu một số khía cạnh cơ bản của nó nhưng tôi không thể tìm thấy nó trong mã của tôi.
Xin cảm ơn! Câu trả lời đó đã giúp rất nhiều. Tôi đã thiết lập và chạy với nửa giờ (Sau khi tôi cài đặt và cập nhật tất cả các gói bị thiếu :-)). –
Vui vì nó đã giúp. Mô-đun ES6 là một bước tiến lớn cho rất nhiều nhà phát triển. Đó là tuyệt vời nó chỉ mất nửa giờ để có được nó xuống, tôi sẽ không nói bao lâu nó đã cho tôi để tìm tất cả những thứ này ra ... :) –