5
मैं सिस्टमजेएस के साथ कोणीय 2 का उपयोग कर रहा हूं जो विकास के दौरान काफी अच्छा काम करता है। अब मैं गल्प का उपयोग कर अपना पहला संकलित संस्करण तैनात करना चाहता था।कोणीय 2, गुलप, सिस्टमजेएस -> डिफ़ॉल्ट एक्सटेंशन के साथ समस्या
स्पष्ट करने के लिए, मैं निम्नलिखित 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);
और निम्नलिखित gulpfile:
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']);
angular2 एप्लिकेशन बनाने और ब्राउज़र मैं में निम्न त्रुटि प्राप्त में यह लोड करने के बाद कंसोल:
Unable to load script http://localhost:81/app/app.component
जो इंगित करता है कि यह टी से एक्सटेंशन को याद नहीं कर रहा है। उन्होंने फाइल संकलित की। मैं काफी आश्वस्त हूं कि
'app': { format: 'register', defaultExtension: 'js' },
संकलक एप्लिकेशन फ़ोल्डर में .js विस्तार मन में वास्तव में से किया जा सकेगा, लेकिन यह नहीं करता है। यह मेरा पहला कोणीय 2 प्रोजेक्ट है और मेरा पहला गल्प संकलन है और मुझे पूरा यकीन है कि मुझे इसका कुछ बुनियादी पहलू याद आ रहा है लेकिन मुझे इसे मेरे कोड में नहीं मिला है।
वाह धन्यवाद! उस जवाब ने बहुत मदद की। मुझे यह मिल गया और आधे घंटे के साथ चल रहा है (मैंने सभी लापता पैकेजों को स्थापित और अपडेट करने के बाद :-))। –
खुशी हुई यह मदद की। ईएस 6 मॉड्यूल बहुत सारे देवताओं के लिए एक बड़ा कदम है। यह बहुत ही बढ़िया है कि इसे कम करने के लिए आपको केवल आधा घंटा लगा, मैं यह नहीं कहूंगा कि यह सब कुछ पता लगाने में मुझे कितना समय लगता है ... :) –