How to create an angular 2 build folder when using systemjs.config.js
My app works fine locally. I need help with my gulp file so I can grab the node modules required and move them to the dist folder ready for deployment.
This is my gulp folder:
const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();
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/system-polyfills.js',
'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/http.dev.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
gulp.task('add-styles', function() {
gulp.src([
'css/animate.css',
'css/bootstraptheme.css',
'sass/styles.scss'
])
.pipe(sass().on('error', sass.logError))
.pipe(concat('styles.min.css'))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(cachebust.resources())
.pipe(gulp.dest('dist/'))
});
gulp.task('add-images', function() {
gulp.src([
'images/*.png'
])
.pipe(gulp.dest('dist/images'))
});
gulp.task('add-bits', function() {
gulp.src([
'favicon*.*',
'sitemap.xml',
'robots.txt',
'firebase.json'
])
.pipe(gulp.dest('dist/'))
});
gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle', 'add-styles', 'add-images', 'add-bits'], function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js'
}))
.pipe(gulp.dest('dist'));
});
This is a screen grab of my current dist folder ready for deployment live. But is missing the node modules required:
This is my config file:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'angular2-google-maps': { 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 = {
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);
These are the node modules I think im missing and need to add to dist folder and link to dist folders index.html
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',
];
This is my index file:
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>App</title>
<base href="/"></base>
<!-- Css libs -->
<link rel="stylesheet" type="text/css" href="/css/animate.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstraptheme.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- build:css -->
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
<!-- Js libs -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>
<!-- endbuild -->
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
<!-- build:app -->
<script src="config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- endbuild -->
</head>
<body id="container">
<my-app>Loading...</my-app>
</body>
</html>
Try this:
//in the gulpfile.js
gulp.task("angular", () => {
return gulp.src([ '@angular/**','rxjs/**']).pipe(gulp.dest("./dist"));
});
// in the config.js
var map = {
'app': 'dist', //I guess that the problem was here
'rxjs': 'dist/rxjs',
'angular2-in-memory-web-api': 'dist/angular2-in-memory-web-api',
'@angular': 'dist/@angular'
};
Ankit Singh
Your gulp-task vendor-bundle suggests that you want a bundle of the dependencies used in your app. If you can use system-js-builder, it'll be very easy.
- It will be much smaller than the whole bundle of angular or rxjs
Just run this
It'll include angular and rxjs dependencies
var gulp = require('gulp'),
Builder = require('systemjs-builder');
gulp.task('bundle-dependencies', function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'config.js'); // config.js is the name of systemjs config file
return builder
.bundle('app/boot.js - [app/**/*.js]', 'path/to/put/dependencies.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
for a complete guide see my another answer Compile Angular 2 node_modules files into one file.
Note: path/to/put/ is the path where you want to export the bundle.
If you want files of the dependencies, I'm sorry. But I'd suggest to create a bundle intead of having seperate files.
Here you go,
gulpfile
gulp.task('vendor', function () {
var includeLibrary = [
"./node_modules/systemjs/dist/system.src.js",
"./node_modules/es6-shim/es6-shim.min.js",
"./node_modules/zone.js/dist/zone.js",
"./node_modules/reflect-metadata/Reflect.js",
"./node_modules/rxjs/**/*.js",
"./node_modules/angular2-in-memory-web-api/**/*.js",
"./node_modules/@angular/**/*.js",
"./node_modules/crypto-js/crypto-js.js"
]
return gulp.src(includeLibrary, { base: './node_modules/' })
.pipe(gulp.dest('dist/lib/'));
});
system.config
let map: any = {
"app": "",
"rxjs": "lib/rxjs",
"angular2-in-memory-web-api": "lib/angular2-in-memory-web-api",
"@angular": "lib/@angular",
"reflect-metadata": "lib/Reflect.js",
"crypto": "lib/crypto-js/crypto-js.js"
};
index.html
<head>
<base href="/dist/" />
<title>App Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
above assumes your gulpfile and node_modules are on same level.
Hope this helps!!
来源：https://stackoverflow.com/questions/37525356/how-to-create-an-angular-2-build-folder-when-using-systemjs-config-js