I get this below mentioned error while loading the application. I am using
angular2-modal to load a popup, The Error which appears in the browser
console is as follows:
index.html:68 Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
at Object.eval (http://localhost:49928/app/AppModule.js:13:24)
at eval (http://localhost:49928/app/AppModule.js:111:4)
at eval (http://localhost:49928/app/AppModule.js:112:3)
Evaluating
http://localhost:49928/lib/angular2-modal/bundles/angular2-modal.umd.js
Evaluating http://localhost:49928/app/AppModule.js
Evaluating http://localhost:49928/app/main.js
Error loading http://localhost:49928/app/main.js
Line http://localhost:49928/app/AppModule.js:13:24 refers to the below line
in AppModule
var angular2_modal_1 = require("angular2-modal");
My package.json is like below
"dependencies": {
"@angular/common": "~4.1.1",
"@angular/compiler": "~4.1.1",
..
..
"angular2-modal": "2.0.3"
},
SystemJS.Config.js file is as below
(function (global) {
System.config({
paths: {
'npm:': 'lib/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
..
..
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'angular2-modal': 'npm:angular2-modal/bundles/angular2-modal.umd.js'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
AppModule.ts is like below
@NgModule({
imports:
[
...
ModalModule.forRoot(),
BootstrapModalModule,
],
declarations:
[
....
],
entryComponents:
[
QlikDashboard, QlikDashboardIFrame,
ExtractorDetails, ExtractorQueueDetails,
AddStoryBook
],
bootstrap: [AppLoader]
})
AddStoryBook is the component where I am using angular2-modal popup
import { Overlay, overlayConfigFactory } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { StoryBook } from './StoryBook';
@Component({
selector: 'add-story-book',
styles: [],
providers: [Modal],
templateUrl: './HTML/StoryBook/AddStoryBook.html'
})
export class AddStoryBook implements CloseGuard, ModalComponent<StoryBook> {
context: StoryBook;
public username: string;
public password: string;
constructor(public dialog: DialogRef<StoryBook>, public modal: Modal) {
this.context = dialog.context; // this is the dialog reference
dialog.setCloseGuard(this);
}
}
StoryBook component is
import { Component } from '@angular/core';
import { DialogRef, ModalComponent, CloseGuard } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
export class StoryBook extends BSModalContext {
public Stories: any;
public Page: any;
}
index.html file is as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>Firebolt</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet" />
<link href="css/BubbleChart.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js";></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js";></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js";></script>
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="js/Angular2/shim.min.js"></script>
<script src="js/Angular2/zone.js"></script>
<script src="js/Angular2/reflect-metadata.js"></script>
<script src="js/Angular2/system.src.js"></script>
<script src="js/D3/d3.v3.min.js" charset="utf-8"></script>
<script src="js/Plugins/jsonplus.min.js"></script>
<script src="js/Plugins/jquery.jsontotable.js"></script>
<script src="js/Plugins/jp.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body [ngClass]="{menuToggle: nav-md}">
<my-app>
<div class="loading-container">
<div class="loading-inner">
<img src="../../images/loading.gif" alt="Loading...">
</div>
</div>
</my-app>
<script src="js/custom.js"></script>
</body>
</html>
I'm missing something which causes this problem and the exception appears
while loading the application itself, can anyone help me with this issue?
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
