stackoom
  简体   繁体   中英

Having trouble bootstrapping my angular 2 typescript app with Firebase in order to create a dist folder for deploying to live environment

 原文  2016-05-11 11:39:51  7   1    angularjs/ build/ typescript/ angular

Question

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:

在此处输入图片说明

1 answers

solution1
 1  2016-05-11 11:43:54

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Having trouble setting persisting session in a typescript / angular2 environment and nodejs in the backend Angular JS bootstrapping app Create symlink from AngularJS dist folder to a different Angular.io dist folder I am manually bootstrapping angular. Even though the module is injected it's having trouble loading Yeoman angular dist version of app, does not restrict the direct folder access Having trouble getting json data into angular app Yeoman generator-angular grunt serve:dist breaks my app TypeScript in Angular2 and Firebase App Not Compiling I'm trying to find an angular2 app that has gulp for creating a dist folder using the latest @angular libraries angularfire: Having trouble getting a Firebase array from my factory with $asArray()
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM