使用systemjs.config.js时如何创建一个角度2的构建文件夹
我的应用程序在本地工作正常
我需要帮助我的gulp文件,所以我可以抓住需要的节点模块,并将它们移动到dist文件夹准备好部署.
这是我的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'));
});
这是我目前的dist文件夹的屏幕抓取,可以实时部署.但是缺少所需的节点模块：
这是我的配置文件：
(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);
这些是我认为缺少的节点模块,需要添加到dist文件夹并链接到dist文件夹index.html
var packageNames = [
'@angular/common',];
这是我的索引文件：
<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>
解决方法
尝试这个：
//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'
};