javascript - 不能在模块外使用 import 语句——角度 8

Question

我试图在 javascript 函数内的我的应用程序组件中订阅一个 observable，它返回一个 observable，但是当我尝试在应用程序组件之前加载页面时出现下一个错误。

我需要这样做，因为我的应用程序的一部分是移动的，另一部分是网络的，因此用户有时会单击应用程序中的返回按钮

当用户点击后按时，我调用 javascript

class WebViewActivity : BaseActivity() {
  
    lateinit var webView : WebView
    @SuppressLint("SetJavaScriptEnabled", "MissingSuperCall")
    override fun onCreate(savedInstanceState: Bundle?) {
        setTheme(R.style.AppTheme_NotView)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)
        webView = findViewById<WebView>(R.id.webview)
        loadPage()
    }

    private fun loadPage() {
        webView.clearCache(true)
        webView.webViewClient = ActivityWebView(this)
        webView.webChromeClient = ActivityWebViewChrome(this)
        webView.addJavascriptInterface(BridgeJavaScript(this, webView), "Test")
        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.loadUrl("http://localhost:9000/test")
    }

    override fun onBackPressed() {
        webView.url?.let {
         this.webView.evaluateJavascript("javascript:bacKPressed()",null);
        }
    }
}

当用户单击 backpressed 时，我调用了 javascript 函数，因此我需要 typescript 在事件被调用时一直在监听它。

this.webView.evaluateJavascript("javascript:bacKPressed()",null);

Angular 版本是 8

assets 函数是下一个 .js

import {of} from "rxjs";


function bacKPressed() {
   return of(true)
}

angular.json 是下一个

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/test",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/functions.js"
            ],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "app"
}

如果我删除了 javascript 函数中的 observable，没关系，页面也加载了。

function bacKPressed() {
   return  true
}

打字稿代码是下一个

import { Observable, Subscription } from 'rxjs';
declare function bacKPressed(): Observable<boolean>;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

/**
 * Clase inicial de la aplicación
 *
 * *Initial app class*
 *
 */
export class AppComponent implements OnInit {
  ngOnInit() {
    bacKPressed().subscribe(()=> {
      console.log('The onBackPressed was called');
    });
  }
}

错误是下一个

未捕获的语法错误：无法在模块 main.0dd98e5cd968fc0f00c4.js:2 之外使用 import 语句致命。未找到外部上下文。应用程序不可用。

如果我将导入更改为必需，它将显示下一个

const {of} = require("rxjs");

function bacKPressed() {
   return of(true)
}

未捕获的 ReferenceError：在 scripts.13f7030c5c675b4edf74.js:1 中未定义要求

标签： javascriptnode.jsangulartypescriptrxjs