在.net核心角度应用程序中使用外部javascript答案

【问题标题】：Using external javascript in .net core angular application在.net核心角度应用程序中使用外部javascript
【发布时间】：2018-11-26 06:38:42
【问题描述】：

我正在尝试在我的 .net 核心 Angular 应用程序中使用外部 js 库。我只是不知道在角度组件中引用 js 文件的标准方法是什么。在哪里放置它的参考和所有这些。我不想要任何浮动声明。任何帮助。

我看到一些解决方案是指 angular cli 文件。但是解决方案中没有这样的文件。有没有办法生成文件？

【问题讨论】：

在较新版本的 Angular 中，我相信它被称为 angular.json
这还取决于您创建应用程序的方式。您是使用 Angular cli 还是使用 Visual Studio 模板创建了一个新的 .NET Core Web 应用程序？
我用 VS 模板创建了项目..我也看不到 angular.json..
你是如何配置角度的？我建议您使用 Visual Studio 选择“Empty”或“Web API”创建您的 ASP.NET Core 项目，然后使用 angular-cli 在内部创建您的 Angular 应用程序，除非您指的是 angularjs？请提供更多信息，否则我们将无法为您提供帮助。
我使用了基本的 Angular 模板，它支撑了前 5 个组件和视图。

标签： javascript angular asp.net-core

【解决方案1】：

最好的方法是使用 npm/yarn 安装您的外部库，并将其导入您需要的 TypeScript 文件中。例如，如果你想使用“lodash”：

yarn add lodash -S

然后在你需要库的文件中：

import * as lodash from "lodash"

但是，如果您无法在任何文件中导入库（可能是因为您只是使用 jQuery 插件或其他东西），那么您必须在 angular.json/ 中定义“脚本”属性angular-cli.json 文件解释为in here。

【讨论】：

【解决方案2】：

希望以下内容有所帮助。与其直接在任何服务或组件中使用全局变量，我发现如果我们可以挂钩到角度引导，那么维护第三方依赖会更容易。例如。

@NgModule({
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: ThirdPartyFactory,
    deps: [ThirdPartyService],
    multi: true
  }]
})
export class AppCommonModule {}

export function ThirdPartyFactory(service: ThirdPartyService) {
  return () => service.init();
}

由于工厂使用promise，您可以在ThirdPartyService 内编写一个封装第三方全局变量的函数。

此解决方案需要一些时间来实施。但好的一面是它更易于管理和移植到另一个模块或应用程序。我提到APP_INITIALIZER 的原因是您可以在应用程序启动之前完成以上所有操作。否则，ThirdPartyService 服务本身就可以解决问题。

【讨论】：

【解决方案3】：

如果你使用的是 Webpack，你可以定义 externals：

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

然后，您可以在需要时导入外部：

import $ from 'jquery';

$('.my-element').animate(/* ... */);

无论您使用什么外部库，您都需要找出全局导出的符号是什么（例如，对于 jQuery，它只是 'jQuery'。

【讨论】：