Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Uncaught TypeError: angular2_1.Component is not a function: error on running the application

$
0
0

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.


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>