Uncaught Syntax Error

Guest User

Hi team

I need some help, i have an Angular js file called "Modal.js" sitting under Script folder on mvc asp.net project and have installed Angular JS using command on nu-get. Let me share the error, basically want to create modal popup using Angular js on my front end.

// Angular js

import { Component, Input } from '@angular/core'; // Error here Uncaught SyntaxError: Cannot use import statement outside a module"
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({

selector: 'ngb-modal-content',
templateL `

`
})

// index.chstml

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari5y ago
Accepted answer
@Gcobani,

Not exactly. You must choose either Angular Js or Angular 2+. However, cannot mix up.
Angular 2+ is bit different. This requires angular app concept unlike Angularjs.
Angular 2+ works as a separate app and not recommended to use with cshtml page. You will face issues in long run.

Regards
+2
Guest User5y ago
Rijwan

Ok if i am understanding, must this Angular 2 be used on my js file not on index.cshtml?
+1
Rijwan Ansari5y ago
Hi

I think you are mixing up AngularJs (1.x) and Angular 2+ together.
This will not work.
import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-content',
template: `
class="modal-header">
class="modal-title">Hi there!
"button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
"true">×
class="modal-body">
Hello, {{name}}!

class="modal-footer">

"button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close

})

This above type of code is used in angular 2+ and cannot be used in Angular Js version.

Guest User5y ago

Hi Rijwan

Have a look at the current logic;

// Angular js

import { Component, Input } from '@angular/core';

import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({

selector: 'ngbd-modal-content',

template: `

Hello, {{name}}!

})

// index.cshtml

Incident	dateTime	Begin	End	Duration
{{e.Incident}}	{{e.FromDateTime \| date : "yyyy/MM/dd"}}	{{e.FromDateTime \| date : "HH:mm:ss"}}	{{e.ToDate \| date : "HH:mm:ss"}}	{{TimeDiff(e.FromDateTime,e.ToDate)}} Hours

// There still an issue, please assist

Rijwan Ansari5y ago

Add type="module" in your index page scripts.

Guest User5y ago

_Layout.cshtml

I still get that error, what am i missing?

Sachin Singh5y ago

Inside the Layout or Index page change this

Uncaught Syntax Error

Hi there!

Hi there!