简体   繁体   中英

Angular import a class from an external js not work

i'm very new to angular and javasrcipt, I'm trying to import a class from an external js file in angular but im getting errors in the import

//this is my responsive.service.js file

import { Injectable } from '@angular/core';
import { Subject } from "rxjs/Subject";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";


@Injectable()
export class responsiveService {
    private isMobile = new Subject();
    public screenWidth: string;


    constructor() {
        this.checkWidth();
    }

    onMobileChange(status: boolean) {
        this.isMobile.next(status);
    }

    getMobileStatus(): Observable<any> {
        return this.isMobile.asObservable();
    }

    public checkWidth() {
        var width = window.innerWidth;
        if (width <= 768) {
            this.screenWidth = 'sm';
            this.onMobileChange(true);
        } else if (width > 768 && width <= 992) {
            this.screenWidth = 'md';
            this.onMobileChange(false);
        } else {
            this.screenWidth = 'lg';
            this.onMobileChange(false);
        }
    }

//this is on my app compnent.ts file

import { Component,OnInit } from '@angular/core';
import {responsiveService} from 'src/assets/myjs/responsive.service.js';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title='HudumaHealth';
  constructor(private responsiveService:ResponsiveService){
  }

  ngOnInit(){
    this.responsiveService.getMobileStatus().subscribe( isMobile =>{
      if(isMobile){
        console.log('Mobile device detected')
      }
      else{
        console.log('Desktop detected')
      }
    });
    this.onResize();    
  }

  onResize(){
    this.responsiveService.checkWidth();
  }
}

// this is how i called it my html file

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sema Pre Diagnostic</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/sema.png">
  <script src="./assets/myjs/responsive.service.js" type="module"></script>
</head>

<body>
  <div class="app-body" (window:resize)="onResize($event)">
    <app-root></app-root>
  </div>

</body>

// i dont understand why response class cannot be imported . //this is the error

ERROR in src/app/app.component.ts(14,41): error TS2304: Cannot find name 'ResponsiveService'.

Change the following things:

class names generally start with a capital letter so

export class responsiveService 

should be

export class ResponsiveService

and in your component.ts the import should be like this:

import { ResponsiveService } from 'src/assets/myjs/responsive.service.js';

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM