I am a newbie to AngularJS + Asp.net5 + Gulp. tried downloading a sample from the internet and executed it. But I am facing 2 issues while exectuing the application.
Issue# 1: As I understand, Gulp will take care of minifying/deploying the JS and CSS files to the specified bin directories i.e. in Asp.Net5 it is WWWRoot folder. but the sample which i downloaded doesn't work as expected. I get the below mentioned errors when the application is executed.
GET http://localhost:24314/lib/css/bootstrap.css localhost/:11 GET http://localhost:24314/lib/css/font-awesome.css localhost/:14 GET http://localhost:24314/lib/css/jquery.fancybox.css localhost/:17 GET http://localhost:24314/lib/css/alertify.bootstrap.css localhost/:16 GET http://localhost:24314/lib/css/alertify.core.css localhost/:20 GET http://localhost:24314/lib/js/angular2-polyfills.js localhost/:22 GET http://localhost:24314/lib/js/Rx.js localhost/:25 GET http://localhost:24314/lib/js/jquery.js localhost/:23 GET http://localhost:24314/lib/js/angular2.dev.js localhost/:26 GET http://localhost:24314/lib/js/bootstrap.js (index):21 GET http://localhost:24314/lib/js/system.src.js
I assume the above mentioned files are not deployed automatically into the /lib/css or /lib/js folders respectively. Even If I manually copy the above mentioned files in the appropriate folders still the application doesn't work either. I ran into the Issue# 2 mentioned below.
Issue# 2: I am getting the below mentioned errors when i Execute after manually placing the required JS/CSS files in the Lib folder.
UncaughtSyntaxError:Unexpected reserved word angular2-polyfills.js:1152 DEPRECATION WARNING:'enqueueTask' is no longer supported and will be removed in next major release.Use addTask/addRepeatingTask/addMicroTask:24314/lib/spa/app.js:14UncaughtTypeError: angular2_1.Component is not a function angular2-polyfills.js:1243UncaughtTypeError: angular2_1.Component is not a functionEvaluating http://localhost:24314/lib/spa/app.jsError loading http://localhost:24314/lib/spa/app.js
I have placed following code in the app.ts file,
///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>import{provide,Component,View} from 'angular2/core';import{CORE_DIRECTIVES} from 'angular2/common';import{bootstrap} from 'angular2/platform/browser';import{HTTP_BINDINGS, HTTP_PROVIDERS,Headers,RequestOptions,BaseRequestOptions} from 'angular2/http';import{RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ROUTER_BINDINGS,Location,LocationStrategy,HashLocationStrategy} from 'angular2/router';import'rxjs/add/operator/map';import{enableProdMode} from 'angular2/core'; enableProdMode();import{Routes, APP_ROUTES } from './routes';import{DataService} from './core/services/dataService';import{MembershipService} from './core/services/membershipService';import{UtilityService} from './core/services/utilityService';import{User} from './core/domain/user';@Component({ selector:'photogallery-app', templateUrl:'./app/app.html', directives:[ROUTER_DIRECTIVES, CORE_DIRECTIVES]})@RouteConfig(APP_ROUTES)exportclassAppRoot{private routes =Routes; constructor(public membershipService:MembershipService, location:Location){this.routes =Routes; location.go('/');} isUserLoggedIn(): boolean {returnthis.membershipService.isUserAuthenticated();} getUserName(): string {if(this.isUserLoggedIn()){var _user =this.membershipService.getLoggedInUser();return _user.Username;}elsereturn'Account';} logout():void{this.membershipService.logout().subscribe(res =>{ localStorage.removeItem('user');}, error => console.error('Error: '+ error),()=>{});}}classAppBaseRequestOptions extends BaseRequestOptions{ headers:Headers=newHeaders({'Content-Type':'application/json'})} bootstrap(AppRoot,[HTTP_PROVIDERS, ROUTER_PROVIDERS, provide(RequestOptions,{ useClass:AppBaseRequestOptions}), provide(LocationStrategy,{ useClass:HashLocationStrategy}),DataService,MembershipService,UtilityService]).catch(err => console.error(err));// ROUTER_BINDINGS: DO NOT USE HERE IF YOU WANT TO HAVE HASHLOCATIONSTRATEGY!!
Also the Gulp.js file contains the following code:
var gulp = require('gulp'), ts = require('gulp-typescript'), merge = require('merge'), fs = require("fs"), del = require('del'), path = require('path');eval("var project = "+ fs.readFileSync("./project.json"));var lib ="./"+ project.webroot +"/lib/";var paths ={ npm:'./node_modules/', tsSource:'./wwwroot/app/**/*.ts', tsOutput: lib +'spa/', tsDef: lib +'definitions/', jsVendors: lib +'js', jsRxJSVendors: lib +'js/rxjs', cssVendors: lib +'css', imgVendors: lib +'img', fontsVendors: lib +'fonts'};var tsProject = ts.createProject('./wwwroot/tsconfig.json'); gulp.task('setup-vendors',function(done){ gulp.src(['node_modules/angular2/bundles/js','node_modules/angular2/bundles/angular2.*.js*','node_modules/angular2/bundles/http.*.js*','node_modules/angular2/bundles/router.*.js*','node_modules/es6-shim/es6-shim.js*','node_modules/systemjs/dist/*.*','node_modules/jquery/dist/jquery.*js','bower_components/bootstrap/dist/js/bootstrap*.js','node_modules/fancybox/dist/js/jquery.fancybox.pack.js','bower_components/alertify.js/lib/alertify.min.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']).pipe(gulp.dest(paths.jsVendors)); gulp.src(['node_modules/rxjs/**/*.js']).pipe(gulp.dest(paths.jsRxJSVendors)); gulp.src(['bower_components/bootstrap/dist/css/bootstrap.css','node_modules/fancybox/dist/css/jquery.fancybox.css','bower_components/components-font-awesome/css/font-awesome.css','bower_components/alertify.js/themes/alertify.core.css','bower_components/alertify.js/themes/alertify.bootstrap.css','bower_components/alertify.js/themes/alertify.default.css']).pipe(gulp.dest(paths.cssVendors)); gulp.src(['node_modules/fancybox/dist/img/blank.gif','node_modules/fancybox/dist/img/fancybox_loading.gif','node_modules/fancybox/dist/img/fancybox_loading@2x.gif','node_modules/fancybox/dist/img/fancybox_overlay.png','node_modules/fancybox/dist/img/fancybox_sprite.png','node_modules/fancybox/dist/img/fancybox_sprite@2x.png']).pipe(gulp.dest(paths.imgVendors)); gulp.src(['node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot','node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg','node_modules/bootstrap/fonts/glyphicons-halflings-regular.ttf','node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff','node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2','bower_components/components-font-awesome/fonts/FontAwesome.otf','bower_components/components-font-awesome/fonts/fontawesome-webfont.eot','bower_components/components-font-awesome/fonts/fontawesome-webfont.svg','bower_components/components-font-awesome/fonts/fontawesome-webfont.ttf','bower_components/components-font-awesome/fonts/fontawesome-webfont.woff','bower_components/components-font-awesome/fonts/fontawesome-webfont.woff2',]).pipe(gulp.dest(paths.fontsVendors));}); gulp.task('compile-typescript',function(done){var tsResult = gulp.src(["node_modules/angular2/bundles/typings/angular2/angular2.d.ts","node_modules/angular2/bundles/typings/angular2/http.d.ts","node_modules/angular2/bundles/typings/angular2/router.d.ts",//"node_modules/@reactivex/rxjs/dist/es6/Rx.d.ts","wwwroot/app/**/*.ts"]).pipe(ts(tsProject),undefined, ts.reporter.fullReporter());return tsResult.js.pipe(gulp.dest(paths.tsOutput));}); gulp.task('watch.ts',['compile-typescript'],function(){return gulp.watch('wwwroot/app/**/*.ts',['compile-typescript']);}); gulp.task('watch',['watch.ts']); gulp.task('clean-lib',function(){return del([lib]);}); gulp.task('build-spa',['setup-vendors','compile-typescript']);
Can anyone help me on resolving this issues? Please revert back if more informations are required.