Adding Javascript or importing js file into Angular 9 component

Question

I'm new to Angular and creating a project that that uses routing. I'd like to import a js file from src/assets/js/custom.js

I've created a service that imports an injectable like so

test.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
    testFunction() {
      console.log('Test');
    }
}

home.compontents.ts looks like

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TestService } from './test.service';

declare var require: any

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [TestService]

})

export class HomeComponent implements OnInit {

  constructor() {private testService: TestService}

  ngOnInit(): void {
    this.testService.testFunction();

  }

}

But I am getting the following error


17   constructor() {private testService: TestService}
                    ~~~~~~~
src/app/home/home.component.ts:19:13 - error TS1005: ';' expected.

19   ngOnInit(): void {
               ~
src/app/home/home.component.ts:20:9 - error TS1005: ':' expected.

20     this.testService.testFunction();
           ~
src/app/home/home.component.ts:20:36 - error TS1005: ',' expected.

20     this.testService.testFunction();
                                      ~
src/app/home/home.component.ts:24:1 - error TS1128: Declaration or statement expected.

24 }
   ~

I've tried so many different ways from Google searches and not coming up with anything. Can anyone please help?

UPDATE

Thanks for the updates, I've updated the constructor, however I am getting an error

ERROR in src/app/home/home.component.ts:3:29 - error TS2307: Cannot find module './test.service' or its corresponding type declarations.

3 import { TestService } from './test.service';

I'm not sure if I am going the right way with this. Each component I am using has 1 or 2 js files that I need to import. What would be the best way to do this?

Correct way - constructor(private testService: TestService) {} — Armen Stepanyan
– Armen Stepanyan, Commented Aug 6, 2020 at 11:10
Before asking these types of question you should at least google once and get ans on the fly. — Kamran Khatti
– Kamran Khatti, Commented Aug 6, 2020 at 11:23

andsilver · Accepted Answer · 2020-08-06 11:16:17Z

3

A service passed as a parameter in class constructor to be injected as a dependency.

constructor(private testService: TestService) {}

edited Aug 6, 2020 at 11:16

andsilver

6,0323 gold badges22 silver badges50 bronze badges

answered Aug 6, 2020 at 11:14

uiTeam324

1,25515 silver badges34 bronze badges

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

Comments

Surbhi · Accepted Answer · 2020-08-06 11:14:57Z

1

The constructor is written incorrectly. Please write it as given below

 constructor(private testService: TestService) {}

Also, you have given service as @Injectable(),then you have to define the service in app.module.ts file. Alternatively, you can give

@Injectable({
  providedIn: 'root'
})

This will eliminate adding the service in providers.

answered Aug 6, 2020 at 11:14

Surbhi

2136 silver badges12 bronze badges

2 Comments

Paddy Winsley Over a year ago

Ahh thank you! Although it's still not quite right ``` ERROR in ./src/app/home/home.component.ts Module not found: Error: Can't resolve './test.service' in 'root/angular-electron/src/app/home' ERROR in src/app/app.module.ts:53:2 - error TS2304: Cannot find name 'Injectable'. 53 @Injectable({ src/app/home/home.component.ts:3:29 - error TS2307: Cannot find module './test.service' or its corresponding type declarations. 3 import { TestService } from './test.service'; ``` My full app.components looks like this gist.github.com/paddywinc/96e1fa3fb0f2ff9bfdaa5ebeb8787ea6

Surbhi Over a year ago

in your app.module.ts , '@Injectable({ providedIn: 'root'}) ' After removing, it should work. this is not required. The test service should be annotated with that. But as you are adding the provider in the component, so , you don't need it.

Narkhede Tushar · Accepted Answer · 2020-08-06 11:15:23Z

0

home.compontents.ts constructor should be like below:

constructor(private testService: TestService) {}

answered Aug 6, 2020 at 11:15

Narkhede Tushar

6815 silver badges18 bronze badges

Collectives™ on Stack Overflow

Adding Javascript or importing js file into Angular 9 component

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related