从typescript类中的javascript文件导入代码

Question

我有app.js文件：

var app = angular.module('app', ['kendo.directives', 'ui.router', 'app.sysSettings', 'app.globalConstants',
    'pascalprecht.translate', 'ngTouch', 'ngDialog', 'ngCookies']);

我想在我的ts文件中重用这个变量（“app”）。我的app.components.ts：

import { Component, Inject } from '@angular/core';
import { UpgradeModule } from "@angular/upgrade/static";
import { app } from  '../../apps/login/app';

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

export class AppComponent {
  constructor(private upgrade: UpgradeModule,
              private app_private: app.name) { }

  ngOnInit() {
    this.upgrade.bootstrap(document.body, [this.app_private]);
  }
}

我从'../../apps/login/app'导入了导入{app}; ，然后将“app”添加到构造函数并尝试在ngOnInit函数中使用它但得到错误：

compiler.js:486 Uncaught Error: Can't resolve all parameters for AppComponent: ([object Object], ?).
    at syntaxError (compiler.js:486)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:15706)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:15541)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15026)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15854)
    at compiler.js:15335
    at Array.map (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15335)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34374)

有没有人有建议如何在typescript类中访问javascript文件中的属性？提前谢谢，伙计们......

Answer 1

要从文件导入对象，必须使用export关键字导出该对象。但是，您的angularjs应用程序是在typescript之外的普通javascript文件中定义的，因此使用export不是一个选项。因此，要从typescript访问它，首先必须将它带到打字稿级别，然后您就可以从组件中导入它。

因此，您可以创建以下ts文件以将应用程序导入到typescript：

我-angularjs-app.ts

let angular = window['angular'];  // to avoid typescript syntax error

export const app = angular.module('app');

app.component.ts

然后你可以在你的模块上使用它，如下所示：

import { app } from  'my-angularjs-app';

// ...

export class AppComponent {
  constructor(private upgrade: UpgradeModule) { }

  ngOnInit() {
    this.upgrade.bootstrap(document.body, [app.name]);
  }
}

注意，您不必将它注入构造函数，值已经存在。

Answer 2

请在app.js export { app };中使用它

---

我很抱歉上面的回答。我认为app.ts不是.js

export关键字在js文件中不起作用

---

无法删除答案。