0

Having trouble bootstrapping my angular 2 app with Firebase to create a build file using gulp. I'm trying to populate my dist folder ready for deployment.

Tech: Angular 2, typescript, Firebase.

Below is my attempt:

Here is my index file:

<!DOCTYPE html>
<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>
    <meta charset="UTF-8">
    <meta name="fragment" content="!"/>

    <!-- 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/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.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>-->
    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <!-- JS CDN Libs -->

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

  </head>

  <body id="container">

    <app></app>    

  </body>
</html>

Here is my gulp file:

'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'))
});


//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'));
});

Here is my boot.ts file:

import {FirebaseService} from 'firebase-angular2/core';

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 {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';

declare var Firebase;

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, {useValue: ' /'}),

    //This below doesnt seem to work:
    provide(FirebaseService, {useFactory: () => new FirebaseService(new Firebase(myUrl)))}),

    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,
    ANGULAR2_GOOGLE_MAPS_PROVIDERS
]);

Here is my app.ts file:

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

//Tried importing it
import {FirebaseService} from 'firebase-angular2/core';

import {Component, bind, provide, Injectable} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import 'rxjs/Rx';

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 {enableProdMode} from 'angular2/core';
enableProdMode();

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 {UserProfile} from './models/profile/profile';
import {Organisation} from './models/organisation/organisation';

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';

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

@Component({
    selector: 'app',
    providers: [UserService, UserProfile, OrganisationService, Organisation, Environment, FIREBASE_APP_PROVIDERS],
    template: `

        <Splash *ngIf="isLoggedIn"></Splash>    

        <HeaderNavigation *ngIf="!isLoggedIn"></HeaderNavigation>       

        <HeaderNavigationLoggedIn *ngIf="isLoggedIn && isUserLogin"></HeaderNavigationLoggedIn>
        <HeaderNavigationLoggedInCompany *ngIf="isLoggedIn && isCompanyLogin"></HeaderNavigationLoggedInCompany>

        <SideMenuCompany *ngIf="isLoggedIn && isCompanyLogin"></SideMenuCompany>
        <SideMenuUser *ngIf="isLoggedIn && isUserLogin"></SideMenuUser>

        <div class="content">
            <router-outlet></router-outlet> 
        </div>     
    `,
    directives: [RouterOutlet, RouterLink, Splash, HeaderNavigation, HeaderNavigationLoggedIn, NgIf, HeaderNavigationLoggedInCompany, SideMenuCompany, SideMenuUser, Footer, LoggedInRouterOutlet]
})

@RouteConfig([
    { path: '/', component: Home, as: 'Home'},
    { path: '/home', component: Home, as: 'Home', useAsDefault: true},
    { path: '/login', component: Login, as: 'Login' },  
    { path: '/register/', component: Register, as: 'Register' },
    { path: '/register/:id', component: Register, as: 'Register' },
    { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
    { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
    { path: '/search', component: SearchJobs, as: 'Search' },   
    { path: '/search/:id', component: SearchJobs, as: 'SearchJob' },    
    { path: '/profile', component: Profile, as: 'Profile' },
    { path: '/settings', component: CompanyProfile, as: 'Settings' },
    { path: '/jobs', component: Jobs, as: 'Jobs' },
    { path: '/password', component: ChangePassword, as: 'Password' },
    { path: '/email', component: ChangeEmail, as: 'Email' },
    { path: '/applications/:id', component: Applications, as: 'Applications' },
    { path: '/applications', component: Applications, as: 'Applications' },
    { path: '/socialRegister/:id', component: SocialRegister, as: 'SocialRegister' },
    { path: '/socialRegister', component: SocialRegister, as: 'SocialRegister' },
    { path: '/applys', component: UserApplications, as: 'Applys' },
    { path: '/contact', component: Contact, as: 'Contact' },
    { path: '/searchTeachers', component: SearchUsers, as: 'SearchUsers' },
    { path: '/createJob', component: CreateJob, as: 'CreateJob' },
    { path: '/pizzacat123', component: Admin, as: 'Pizzacat123' },  
    { path: '/messenger', component: Messenger, as: 'Messenger' },
    { path: '/messenger/:id', component: Messenger, as: 'Messenger' },
    { path: '/messenger/:id/:type/:roomId', component: Messenger, as: 'Messenger' },
    { path: '/help', component: Help, as: 'Help' }, 
    { path: '/achievements', component: Achievements, as: 'Achievements' }, 
    { path: '/blog', component: Blog, as: 'Blog' }, 
    { path: '/blog/:slug', component: BlogArticle, as: 'BlogArticle' }, 
    { path: '/sitemap', component: Sitemap, as: 'Sitemap' },
    { path: '/newJobs', component: NewJobs, as: 'NewJobs' },
    { path: '/newJob/:slug', component: NewJob, as: 'NewJob' }, 
    { path: '/messages', component: Messages, as: 'Messages' }, 

    { path:'/**', redirectTo: ['Login']}
])

@Injectable()

export class AppComponent {
    router: Router;
    location: Location;
    authService: AuthService;
    userService: UserService
    isLoggedIn: boolean = false;
    isCompanyLogin: boolean = false;
    isUserLogin: boolean = false;
    userProfile: UserProfile;   

    constructor(_router: Router, _location: Location, _authService: AuthService, _userService: UserService, _userProfile: UserProfile){ 
        this.router = _router;
        this.location = _location;
        this.authService = _authService;
        this.userService = _userService;
        this.userProfile = _userProfile;

        this.isUserLoggedIn(this.location.path());

        //On refresh
        this.router.subscribe((currentRoute) => {
            this.isUserLoggedIn(currentRoute);
        })  
    }

    isUserLoggedIn(currentRoute): void{ 
        this.authService.checkIfLoggedIn().then((response) => { 
            this.isLoggedIn = response

            if(this.isLoggedIn){
                this.isUserOrganisationOrTeacher();                 
            }   

            if(currentRoute.substring(0, 14) == "socialRegister" || currentRoute == "socialRegister" || currentRoute == "home" || currentRoute == "contact" || currentRoute == "" || currentRoute == "forgotpassword" || currentRoute == "login" || currentRoute.substring(0, 8) == "register" || currentRoute == "blog" || currentRoute == "newJobs" || currentRoute.substring(0, 4) == "blog" || currentRoute == "sitemap" || currentRoute.substring(0, 6) == "newJob"){
                this.isCompanyLogin = false;
                this.isUserLogin = false;
                this.isLoggedIn = false;
            }           
        });  
    }

    isUserOrganisationOrTeacher(): void{
        this.userService.checkIfProfileExists().then((response) => {
            this.isCompanyLogin = false;
            this.isUserLogin = false;       

            if(response){
                this.isUserLogin = true;
                this.isCompanyLogin = false;
            }else{
                this.isCompanyLogin = true; 
                this.isUserLogin = false;                   
            }
        }); 
    }       
}

//bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService, SocialService, UserService, EmailService, OrganisationService, NotificationService, ANGULAR2_GOOGLE_MAPS_PROVIDERS, Environment]);

Here's the error I get in the git bash when trying to deploy to my dist folder:

enter image description here

AngularM
  • 15,982
  • 28
  • 94
  • 169

1 Answers1

1

I can see several "new" used in your boot.ts file. Perhaps it's the root cause of your problem:

provide(APP_BASE_HREF, {useValue: ' /'}),

//This below doesnt seem to work:
provide(FirebaseService, {useFactory: () => new new FirebaseService(new Firebase('https://poolcover-dev.firebaseio.com')))}), // <----

HTTP_PROVIDERS,

Moreover it seems that there is too much ). I would use this:

provide(FirebaseService, {useFactory: () => new FirebaseService(new Firebase('https://poolcover-dev.firebaseio.com'))}),
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • So I've added your provide code and that seemed to work. Then it uncovered loads of other errors. I've updated the list of errors in my git bash above at the bottom of the question. I have no idea why all those errors have suddenly appeared when I did "gulp html-replace" ? – AngularM May 11 '16 at 13:21
  • Most of the errors are related to firebaseAuthData, do I need to reference this somewhere? – AngularM May 11 '16 at 17:16
  • Thierry Templier can you help me with this question: http://stackoverflow.com/questions/37227507/how-do-i-concattinate-my-angular2-app-javascript-files – AngularM May 14 '16 at 16:24