Comment créer un dossier de construction angulaire 2 lors de l'utilisation de systemjs.config.js
Mon application fonctionne bien localement. J'ai besoin d'aide pour mon fichier gulp afin de pouvoir récupérer les modules de nœuds requis et les déplacer dans le dossier dist prêts pour le déploiement.
Ceci est mon dossier gulp:
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'));
});
Ceci est une capture d'écran de mon dossier dist actuel prêt au déploiement en direct. Mais il manque les modules de nœuds requis:
Ceci est mon fichier de configuration:
(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);
Ce sont les modules de nœud qui me manquent et qui doivent être ajoutés au dossier dist et être liés aux dossiers dist 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',
];
Ceci est mon fichier d'index:
<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>
Votre gulp-task
fournisseur faisceau suggère que vous voulez un paquet des dépendances utilisées dans votre application. Si vous pouvez utiliser system-js-builder
, ce sera très facile.
Il suffit de lancer cette
Il va inclureangular
etrxjs
dépendances
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);
});
});
pour un guide complet voir mon autre réponse Compiler Angular 2 fichiers node_modules dans un seul fichier .
Note: path/to/put/
est le chemin où vous souhaitez exporter le paquet.
Si vous voulez des fichiers des dépendances, je suis désolé. Mais je vous suggère de créer un intead bundle d'avoir des fichiers séparés.
Essaye ça:
//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'
};
Voici,
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>
ci-dessus suppose que votre gulpfile
et node_modules
sont au même niveau.
J'espère que cela t'aides!!