5
개발 중에 SystemJS와 함께 Angular2를 사용하고 있습니다. 이제 gulp를 사용하여 컴파일 된 첫 번째 버전을 배포하려고했습니다. angular2 응용 프로그램을 구축하고 난 다음과 같은 오류를 얻을 브라우저에서로드 한 후Angular2, Gulp, SystemJS -> 기본 확장 관련 문제
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']);
:
(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 :
내가 다음 systemJS 파일을 사용 명확히하기 위해 콘솔 :Unable to load script http://localhost:81/app/app.component
이것은 t에서 .js 확장자가 없음을 나타냅니다. 그는 파일을 편집했다. 나는 꽤 확신한다, 그
'app': { format: 'register', defaultExtension: 'js' },
실제로 컴파일러는 app 폴더에서 .js 확장자를 염두에 두어야하지만 그렇지 않다. 이것은 내 첫 번째 angular2 프로젝트이며 첫 번째 꿀꺽 꿀꺽 마는 컴파일이며, 나는 기본적인 측면이 빠져 있음을 확신하지만 코드에서 찾을 수 없다.
와우 감사합니다! 그 대답은 많은 도움이되었습니다. 30 분 정도 지나서 실행하고 있습니다 (누락 된 패키지를 모두 설치하고 업데이트 한 후 :-)). –
도움이 되니 기쁩니다. ES6 모듈은 많은 개발자를위한 큰 발걸음입니다. 그게 끝내주는 데 30 분 밖에 걸리지 않았어.이 모든 걸 알아내는 데 얼마나 걸렸는지 말하지 않을거야. :) –