Instantiating a JS class in another JS file for an Angular Based Web App

Question

I am new to Angular and our team is developing a new web app with Angular as the base technology. I am having trouble just including a js class into the project. I have a js class Script.js which instantiates classes as below :

Script.prototype.createText = function () {
    let text = new mText(this.mEngine);
    this.addIntoAssetList(text);
    text.addParent(this.rootElement);
    //this.rootElement.addChild(text);
    return text;
};

The mText.js file is in the same directory as the Script.js file

I am now trying to add a date class object in the Script.js file as below :

Script.prototype.createDate = function () {
    let date = new mDate(this.maEngine);
    console.log("date added");
    this.addIntoAssetList(date);
    this.addParent(this.rootElement);
    return date;
};

the mDate.js is also in the same directory and is modeled like the mText.js file.

This much code isn't sufficient and the browser dev tools tell me that the mDate object doesnt exist.

I see there is an angular.json file which has list of all the scripts in the project, where the mText.js and other .js files are listed. I added the mDate.js file into this document, but once I do that, upon running the application, I get an error on the first line of the ngAfterViewInit from one of the .ts files which initiates the views :

ngAfterViewInit() {
    window.ContentEditor.init();
    window.ContentSave.init();
    window.DataTable.init();
    window.ExpressionEditor.init();
  }

TypeError occured due to Cannot read property 'init' of undefined in the function ContentCreatorComponent

I'm not sure what needs to be done for something as simple as this. Pretty sure its a silly explanation!

dotnetdev4president · Accepted Answer · 2020-02-11 22:19:13Z

1

Export your class in a separate file (Script.ts) like:

export class Foo {
  someFunction() {
    // your code
  }
}

Import, instantiate & use it in another file's class:

 import { Foo } from './Script';

 class Bar {

  constructor() {
    let foo = new Foo();
    foo.someFunction();
  }

}

edited Feb 11, 2020 at 22:19

answered Feb 11, 2020 at 22:06

dotnetdev4president

5524 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

s_om Over a year ago

Same error unfortunately, the Content-creator,component.ts has some issues with adding new imports, but I don't know where the acceptable imports are configured.

dotnetdev4president Over a year ago

^^This is how you should export & import. If you're getting the same error as before then your initial code is wrong, which said that window.ContentEditor is undefined.

Collectives™ on Stack Overflow

Instantiating a JS class in another JS file for an Angular Based Web App

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related