Question

我使用 angular2 与 angular cli 。在构建我的分发包时，我正在使用 http-server 测试为我构建的包。作为参考，我使用以下命令构建包：

ng build --prod --aot

加载构建的软件包后，我收到以下错误：

ReferenceError：未定义addToHomescreen

此函数位于我已包含在 angular-cli.json 配置文件中的外部js文件中：

"scripts": [
    "js/addtohomescreen.js"
],

（物理js文件位于 src / js / 目录内）

在index.html文件中，我使用以下代码调用 addtohomescreen（）函数：

<script>addToHomescreen();</script>

我没有对外部js文件的任何引用，因为它被捆绑并且无法找到。至于外部js文件中的函数，它存在并且工作很精细，因为我之前在普通的html页面中使用过这个脚本。

我是一个相当新的角度，这是我的第一个包，以建立我可能会失踪的任何帮助将非常感激。感谢。

Answer 1

这是错误的做法。你永远不应该在你的html文件中包含任何内容。现在的问题是，脚本尚未加载，稍后将使用webpack加载它。

如果要调用此方法，则需要在角度应用程序中执行此操作。

因此，要解决此问题，您需要从 AppComponent 或其他任何方式调用您的函数。

但是再次你不能简单地调用它，因为它的打字稿所以你需要在 typings.d.ts 里面定义类型，它位于src文件夹中（如果不是只是创建它），如下所示： / p>

declare function addToHomescreen();

最后一个选项，如果您仍想在html中使用它，然后将脚本放到 assets 文件夹中（并且不包括在angular-cli中）。将其包含在html中

  <script src="/assets/addtohomescreen.js"></script>

打电话给你。

Answer 2

如果您使用的是模块和模块加载器，则可以在模块中定义功能，并将其导入到您需要的位置。无需包含脚本标记即可加载它。

addtohomescreen.ts

export function addToHomeScreen(){
    ...
}

main.ts

import { addToHomeScreen } from './addtohomescreen';

addToHomeScreen();