未捕获的语法错误：无法在模块外使用 import 语句。 将 typescript 文件导入 JavaScript 文件

Question

I am working on angular 10. I need to use typescript angular service in jQuery file. When I am importing TypeScript service file in jquery it gives me the error:

Uncaught SyntaxError: Cannot use import statement outside a module

I am using below import statment in jQuery file:

import { priceFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/price-filtered-by-service";

priceFilteredByService is Angular typescript file. I need to access its function from a javascript file.

You find below javascript file:

import { laptopsFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/laptops-filtered-by-service";
import { priceFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/price-filtered-by-service";

!(function ($) {
    laptopFilteredByService: laptopsFilteredByService;
    priceFilteredByService: priceFilteredByService;
    
    $(document).ready(function () {
      "use strict";
    
    $('#price-range-submit').hide();

    $("#min_price,#max_price").on('change', function () {

      var min_price_range = parseInt($("#min_price").val());

      var max_price_range = parseInt($("#max_price").val());

      this.priceFilteredByService.getPriceMinMaxFilter()
      this.priceFilteredByService.setMinAED(min_price_range);
      this.priceFilteredByService.setMaxAED(max_price_range);
      this.laptopFilteredByService.getSelectedFilters()  
      
    });
});

Answer 1

Looks like your javascript compiler does not consider this file a module. If you don't have already, you need to add compiler / bundler step to you workflow-