我正在尝试找到一个具有使用最新@angular库创建dist文件夹的gulp的angular2应用

Question

I'm trying to find an angular2 app that has gulp for creating a dist folder using the latest @angular libraries.

I can find some online but they dont use latest @angulae libs and gulp.

I'm also using system.js to boot the app locally, so I need to see an example of how that works for a dist deployment folder thats bundled.

My main requirements for the app I'm trying to build is:

• Gulp.
• Angular2.
• Latest Angular 2 libs with http and routing libs added.
• System.js used.
• Typescript.
• All the ts files bundles into one file for dist folder.

This is my main.ts file:

import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, provide } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, Http, Headers} from '@angular/http';

import {ROUTER_DIRECTIVES, Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, CanActivate, OnActivate,
    ComponentInstruction} from '@angular/router-deprecated';

import { AppComponent } from './app.component';

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

import {AuthService} from './services/authService/authService';
import {SocialService} from './services/socialService/socialService';
import {UserService} from './services/userService/userService';
import {OrganisationService} from './services/organisationService/organisationService';
import {NotificationService} from './services/notificationService/notificationService';
import {ApplicationService} from './services/applicationService/applicationService';
import {JobService} from './services/jobService/jobService';
import {MessageService} from './services/messageService/messageService';
import {EmailService} from './services/emailService/emailService';

import {Environment} from './models/environment/environment';

import {LoggedInRouterOutlet} from './interceptor';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }),
    HTTP_PROVIDERS,
    Environment,
    AuthService, 
    ApplicationService,
    EmailService,
    SocialService, 
    UserService,
    JobService,
    MessageService, 
    EmailService, 
    OrganisationService, 
    NotificationService
]);

Folder Structure And Git Bash Error

Answer 1

I've been looking for exactly the same thing, and it's been challenging, especially when it comes to bundling.

This repo has what you're asking for (as far as I can tell), but it's far more complicated than I'm hoping for. And its build is currently failing.

Last night I was finally able to get this working, but I haven't checked to see whether source maps and such are going to work. I started by following the 5-minute quickstart pretty closely (ie make sure you're using the version of Node they recommend), but making a few adjustments based on my project's setup.

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var cleanCSS = require('gulp-clean-css');
var cached = require('gulp-cached');
var remember = require('gulp-remember');
var ts = require('gulp-typescript');
var SystemBuilder = require("systemjs-builder");

var paths = {
    dist: 'client/dist',
    tsconfig: 'tsconfig.json'
}

gulp.task('scripts:startup', function() {
    return gulp.src([
            'core-js/client/shim.min.js',
            'zone.js/dist/zone.js',
            'reflect-metadata/Reflect.js'
        ], { cwd: 'node_modules' })
        .pipe(concat('startup.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('client/dist'));
});


gulp.task('scripts:app', function() {
    var tsResult = tsProject.src()
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(ts(tsProject));
    return tsResult.js
        //.pipe(uglify())
        .pipe(sourcemaps.write('../maps', { includeContent: false, sourceRoot: '/client/app' }))
        .pipe(gulp.dest('client/dist/app'));
});

gulp.task('scripts:bundle',
    function () {
        var builder = new SystemBuilder('.', 'systemjs.config.js');
        return builder.buildStatic('app', 'client/dist/app.js');
    });

gulp.task('scripts', ['scripts:startup', 'scripts:app', "scripts:bundle"]);

gulp.task('default', ['scripts', 'styles'], function () {
});

package.json

{
    ...
    "private": true,
    "scripts": {
        "start": "tsc",
        "lite": "lite-server",
        "postinstall": "typings install",
        "tsc": "tsc",
        "typings": "typings"
    },
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-concat": "^2.6.0",
        "gulp-uglify": "^1.5.3",
        "gulp-sourcemaps": "^1.5.2",
        "gulp-clean-css": "^2.0.7",
        "gulp-cached": "^1.1.0",
        "gulp-remember": "^0.3.1",
        "gulp-typescript": "~2.13.4",
        "systemjs-builder": "~0.15.19",
        "typescript": "~1.8.10",
        "typings": "~1.0.4"
    },
    "dependencies": {
        "@angular/common": "2.0.0-rc.1",
        "@angular/compiler": "2.0.0-rc.1",
        "@angular/core": "2.0.0-rc.1",
        "@angular/http": "2.0.0-rc.1",
        "@angular/platform-browser": "2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
        "@angular/router": "2.0.0-rc.1",
        "@angular/router-deprecated": "2.0.0-rc.1",
        "@angular/upgrade": "2.0.0-rc.1",

        "systemjs": "0.19.27",
        "core-js": "^2.4.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12",

        "angular2-in-memory-web-api": "0.0.11",
        "bootstrap": "^3.3.6"
    }
}

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Precise Patient Registry</title>
    <meta charset="utf-8"/>
    <script src="client/dist/startup.min.js"></script>
    <script src="client/dist/app.js"></script>
</head>
<body>

    <ppr-app>Loading...</ppr-app>

</body>
</html>

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "node_modules/typescript",
        "typings/index.d.ts"
    ]
}

typings.json

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160317120654",
        "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
        "node": "registry:dt/node#4.0.0+20160509154515"
    }
}

systemjs.config.js

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'client/dist/app', 
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };
    var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade'
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    });
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

Also, if you've already got a project that has stuff from an older version of angular, be sure to prune npm and typings:

npm prune
npm install
npm run typings prune

Otherwise the old polyfills tend to get in the way of typescript compiling.

Please, please , keep me updated if you make improvements to this. I've been spending far too much time trying to get this stuff all figured out, and I'd love to get some collaborative feedback.

Answer 2

Angular2 Seed by Minko Gechev is probably exactly what you are looking for:

https://github.com/mgechev/angular2-seed

It follows the official Angular2 style guide (which i think he also works on). So basically a pretty good starting point for training projects and probably for production projects as well.

---

A more lightweight seed would be from the angular2 team itself . But the systemjs branch is not yet updated to angular2 rc1. But updating it yourself wouldn't be so hard, since the basic setup could stay the same.