Question

我正在尝试为我的Angular 2应用程序做一个gulp构建。我运行gulp构建，创建一个dist文件夹。当我运行这个时，我得到firebase错误和es6错误。

npm start的控制台错误：

这是我的html索引页面：

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title</title>
    <base href="/"></base>

    <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>

    <link rel="icon" type="image/png" href="/favicon32.ico" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon16.ico" sizes="16x16">

    <!-- Css libs -->
    <link rel="stylesheet" type="text/css" href="/css/animate.css" /> 
    <link rel="stylesheet" type="text/css" href="/css/datepicker.css" /> 
    <link rel="stylesheet" type="text/css" href="/css/bootstraptheme.css" /> 
    <link rel="stylesheet" type="text/css" href="/css/styles.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:vendor -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- endbuild -->

    <!-- JS CDN Libs -->    
    <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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <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="app/angular2-google-maps.js"></script>
    <script type="text/javascript" src="/firebase.js"></script>
    <!-- JS CDN Libs -->

    <!-- build:app -->
        <script src="config.js"></script>
    <!-- endbuild -->    

  </head>

  <body id="container">

    <app></app>  

  </body>
</html>

Boot.ts文件：

import {Component, bind, provide, Injectable} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'
import {NgIf} from 'angular2/common';
import {Router, Location, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF, CanActivate, OnActivate,
      ComponentInstruction} from 'angular2/router';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
//import {ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';

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

//import {ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
import {LoggedInRouterOutlet} from './interceptor';

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 {EmailService} from './services/emailService/emailService';
import {ApplicationService} from './services/applicationService/applicationService';
import {JobService} from './services/jobService/jobService';
import {MessageService} from './services/messageService/messageService';

import {Organisation} from './models/organisation/organisation';
import {Application} from './models/application/application';
import {Counties} from './models/counties/counties';
import {Environment} from './models/environment/environment';
import {Governingbody} from './models/governingbody/governingbody';
import {Job} from './models/job/job';
import {Message} from './models/Message/Message';
import {Notification} from './models/notification/notification';
import {UserProfile} from './models/profile/profile';
import {User} from './models/user/user';
import {Towns} from './models/towns/towns';
import {Tags} from './models/tags/tags';
import {Status} from './models/status/status';
import {Regions} from './models/regions/regions';

import {HeaderNavigation} from './components/header/header'; 
import {HeaderNavigationLoggedIn} from './components/header/headerNavigationLoggedIn';
import {HeaderNavigationLoggedInCompany} from './components/header/headerNavigationLoggedInCompany';
import {Footer} from './components/footer/footer';
import {SideMenuCompany} from './components/header/sideMenuCompany';
import {SideMenuUser} from './components/header/sideMenuUser';
import {Splash} from './components/splash/splash';
import {Messages} from './components/messages/messages';
import {NewJobs} from './components/newJobs/newJobs';
import {NewJob} from './components/newJob/newJob';
import {Blog} from './components/blog/blog';
import {BlogArticle} from './components/blog/blogArticle';
import {CreateJob} from './components/createJob/createJob';
import {SearchJobs} from './components/searchJobs/searchJobs';
import {Login} from './components/login/login';
import {Applications} from './components/applications/applications';
import {Register} from './components/register/register';
import {ForgotPassword} from './components/forgotpassword/forgotpassword';
import {ChangePassword} from './components/changepassword/changepassword';
import {ChangeEmail} from './components/changeemail/changeemail';
import {SocialRegister} from './components/socialregister/socialregister';
import {Admin} from './components/admin/admin';
import {Contact} from './components/contact/contact';
import {SearchUsers} from './components/searchusers/searchusers';
import {Jobs} from './components/job/jobs';
import {CompanyProfile} from './components/company/company';
import {Home} from './components/home/home';
import {Dashboard} from './components/dashboard/dashboard';
import {Profile} from './components/profile/profile';
import {UserApplications} from './components/userApplications/userApplications';
import {Messenger} from './components/messenger/messenger';
import {Help} from './components/help/help';
import {Achievements} from './components/achievements/achievements';
import {Sitemap} from './components/sitemap/sitemap';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, {useValue: ' /'}),
    HTTP_PROVIDERS, 
    AuthService, 
    SocialService, 
    UserService, 
    EmailService, 
    OrganisationService, 
    NotificationService, 
    ApplicationService, 
    JobService, 
    MessageService, 
    Organisation, 
    Application,
    Counties, 
    Environment, 
    Governingbody, 
    Job,
    Message, 
    Notification, 
    UserProfile, 
    User, 
    Towns, 
    Tags, 
    Status, 
    Regions,
    Environment,
    HeaderNavigation, 
    HeaderNavigationLoggedIn,
    HeaderNavigationLoggedInCompany,
    Footer, SideMenuCompany,   
    SideMenuUser,
    Splash,
    Messages,
    NewJobs,
    NewJob, 
    Blog,
    BlogArticle,
    SearchJobs,
    Login,
    Applications,
    Register,
    ForgotPassword,
    ChangePassword,
    ChangeEmail, 
    SocialRegister,
    Admin,
    Contact,
    SearchUsers,
    Jobs, 
    CompanyProfile, 
    Home, 
    Jobs, 
    Dashboard, 
    Profile, 
    UserApplications, 
    Messenger, 
    Help, 
    Sitemap
    ]);

Config.js：

System.config({
  packages: {      
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/boot')
      .then(null, console.error.bind(console));

NPM运行tsc错误：

tsconfig：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

吞

'use strict';

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 cachebust = require('gulp-cache-bust');

var sass = require('gulp-sass');
var inject = require('gulp-inject');
var minifyCss = require('gulp-minify-css');

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',
    '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/router.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('getAllImages', function() {
  gulp.src('images')
      .pipe(gulp.dest('./dist'))
});

gulp.task('getCss', function() {
  gulp.src('css/*.css')
      .pipe(gulp.dest('./dist/css'))
});

gulp.task('compileSass', function() {
  gulp.src('sass/styles.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(minifyCss({compatibility: 'ie8'}))
      .pipe(gulp.dest('./dist/css'))
});

gulp.task('getFavicons', function() {
  gulp.src('favicon*.*')
      .pipe(gulp.dest('./dist'))
});

gulp.task('getRobot', function() {
  gulp.src('robot.txt')
      .pipe(gulp.dest('./dist'))
});

gulp.task('getFirebase', function() {
  gulp.src('firebase.*')
      .pipe(gulp.dest('./dist'))
});

gulp.task('getSitemap', function() {
  gulp.src('sitemap.xml')
      .pipe(gulp.dest('./dist'))
});

//TODO - get the maps added may need an npm install - check its lib for github url.
//TODO - concat sass and move to css folder.



//This starts the dist
gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle', 'getAllImages', 'getFavicons', 'getRobot', 'getFirebase', 'getSitemap', 'getCss', 'compileSass'], function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js'
    }))
    .pipe(cachebust({type: 'timestamp'}))
    .pipe(gulp.dest('dist'));
});

包

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "firebase-angular2": "^0.7.2",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.22",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "gulp": "^3.9.1",
    "gulp-add-src": "^0.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-html-replace": "^1.5.5",
    "gulp-typescript": "^2.12.1",
    "gulp-uglify": "^1.5.3",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings": "^0.6.8",
    "uglify": "^0.1.5",
    "gulp-cache-bust": "1.0.2"
  }
}

typings.json：

{
  "ambientDependencies": {
    "es6-promise": "github:DefinitelyTyped/DefinitelyTyped/es6-promise/es6-promise.d.ts#71b4d6f6087f49891a01c937d2a86eee6f6c9b3a",
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "firebase": "registry:dt/firebase#2.4.1+20160412125105"
  }
}

Answer 1

根据您提供的内容，很难回答您的问题。我在SystemJS中错误配置了第三方库时遇到了这样的错误......

您能否提供有关此配置的更多详细信息？

有关更多详细信息，请参阅此文章（“加载模块的SystemJS配置错误”一节）：

https://medium.com/@ttemplier/common-errors-you-can-encounter-when-angular2-applications-b875c2a5d5c5#.2gil8xhw3

Answer 2

有一个已知问题https://github.com/angular/angular/issues/5169，在ng-switch-default

中使用管道时会产生此错误

每次在* ngIf中使用管道时都会出现同样的问题，条件是没有触发

提到的解决方法https://github.com/angular/angular/issues/5169#issuecomment-214962054

<script>
    System.register("angular2/src/core/change_detection/pipe_lifecycle_reflector", [], true, function(require, exports, module) {
        exports.implementsOnDestroy = function(pipe) { return pipe ? pipe.constructor.prototype.ngOnDestroy : false };
    });
</script>

另见https://github.com/angular/angular/issues/6425

Answer 3

您的tsconfig.json文件中是否有以下部分？

"exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

如果您不在此处忽略typings文件夹，则会收到duplicate identifier条消息。

运行我的gulp构建的问题，以创建用于部署angular 2应用程序的dist包

3 个答案: