Angular AOT 和 Rollup - 未捕获的 ReferenceError:未定义导出

2024-03-01

我正在尝试实现 Angular 的 AOT 教程:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

使用 ngc 部分可以工作并生成 aot 文件夹。但是,当我运行该应用程序时,出现以下错误

bundle.js:1 Uncaught ReferenceError: exports is not defined

我的代码如下:-

tsconfig-aot.json

    {
      "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
      },

    "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

      "angularCompilerOptions": {
       "genDir": "aot",
       "skipMetadataEmit" : true
     },
     "exclude": [
            "node_modules",
            "bower_components",
            "typings/main",
            "typings/main.d.ts"
        ]
    }

执行node_modules/.bin/ngc -p tsconfig-aot.json后,成功生成aot文件夹。

main.ts

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

我在其中一个 SO 链接中读到“您需要将这些 ts 文件编译为 es2015 模块,以便从“tree-shaking”中受益。这意味着必须还有一个配置文件(tsconfig-compile-aot.json)只指向 main-aot.ts 文件。”

tsconfig-编译-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

   "files": [
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 },
 "exclude": [
        "node_modules",
        "bower_components",
        "typings/main",
        "typings/main.d.ts"
    ]
}

使用 tsc 和 tsconfig-compile-aot.json 编译 main-aot.ts 文件,再次作为 es2015 模块并生成 js 文件。编译时我得到了我的js文件 我执行了命令
tsc src/main.ts

rollup-config.js

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: 'src/main.js',
  dest: 'bundle.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings
    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

之后我执行了以下命令 node_modules/.bin/rollup -c rollup-config.js

然后在执行 npm run lite 时,出现错误。


您需要在母版页中添加以下代码:

window.module = {
    id: 'foo',
    exports: []
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular AOT 和 Rollup - 未捕获的 ReferenceError:未定义导出 的相关文章

随机推荐

  • Rails 3.1 上的 Capistrano 部署/资产失败

    我添加了这一行load deploy assets 到我的 Capfile 以使用 Rails 3 1 部署资产 卡皮斯特拉诺到达这条线 executing cd home deploy armonia stage releases 201
  • pitest无法找到junit测试

    我的 gradlepitest 无法给我正确的结果 看起来它无法找到我的测试文件 我有以下 build gradle 文件 apply plugin java apply plugin maven apply plugin info sol
  • 将 lambda 函数作为参数传递 C++

    我正在努力将 lambda 函数 R1 和 R2 传递给我的模板函数 F 但是 我不确定我是否正确执行此操作 函数 F 应该使用主函数中的所有参数并执行相关计算 牛顿近似根法 我是使用模板函数的新手 因此 任何帮助将不胜感激 main cp
  • C++ 的手册页在哪里? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 Linux 中是否存在 C 文档 我想要类似 C 的手册页之类的东西 例如 string stl ios
  • 我可以在 Kafka Broker 所在的同一台机器上运行 Kafka Streams 应用程序吗?

    我有一个 Kafka Streams 应用程序 它从几个主题获取数据并连接数据并将其放入另一个主题中 卡夫卡配置 5 kafka brokers Kafka Topics 15 partitions and 3 replication fa
  • 单击 jPanel (Java) 时如何调用函数?

    我正在使用 Java 中的 Netbeans IDE 我有一个带有一个 JPanel 的表单 每个 JPanel 都有一个 3x3 的 gridLayout 每个地方都有一个代表数字 0 1 2 3 4 5 6 7 8 的图像 该图像是使用
  • 角度材料日期选择器未在模式对话框中打开

    我有一个以引导模式形式实现的 Angular Material 2 日期选择器 div class modal dialog modal lg div class modal content div class modal header h
  • Android:检测软键盘打开

    当软键盘打开时 我想要一个滚动视图向下滚动到底部 为此我可以使用 fullScroll View FOCUS DOWN 但是 在软键盘打开事件触发后如何触发该命令 这是我的解决方案 1 简单的界面 public interface Keyb
  • 无法使用 MFMailComposeViewController 在应用程序中发送电子邮件

    我有一个应用程序使用MFMailComposeViewController通过电子邮件发送文档 我在某处读到我需要启用至少一封电子邮件 以便该方法 MFMailComposeViewController canSendEmail 将返回 Y
  • 在 BeautifulSoup 中处理无限滚动 UI

    我正在研究如何抓取 Linkedin 源代码 https www linkedin com mynetwork invite connect connections https www linkedin com mynetwork invi
  • 当“使用其他帐户”登录时,Google Sign in 不会返回任何结果

    这似乎是一个基本功能 但遵循登录教程 https developers google com identity sign in android sign in 仅当我选择设备上已注册的帐户时 它才有效 选择后 使用另一个帐户 并完成一些步骤
  • 使用 jQuery fadeIn 和 fadeOut 的 Google Maps API V3 InfoBox

    我在网上到处搜索 但找不到使用 jQuery 淡出 Google 地图中的 InfoBox InfoWindow 的教程或示例 而不是实际框 窗口的内容 这是我的代码 我不确定我做错了什么 但有些东西似乎也不正确 google maps e
  • 通过 Windows Scheduler 运行 python 脚本不起作用

    我正在尝试通过 Windows 任务计划程序自动执行 python 脚本 但它不起作用 在我的 python 脚本的末尾 应该创建两个 CSV 文件 但没有创建 我尝试了以下方法 1 将我的python exe的地址复制到Program S
  • 将 Tensorflow 数据集 API 创建的数据集拆分为训练和测试?

    有谁知道如何将 Tensorflow 中的数据集 API tf data Dataset 创建的数据集拆分为测试和训练 假设你有all dataset的变量tf data Dataset type test dataset all data
  • 使用缓存文件还是一个以上的 HTTP 请求?

    在所有 加速你的网站 网站和书籍上 他们总是告诉我们不惜一切代价尽量减少 HTTP 请求 这很好 但如果这意味着在每个页面上你都必须一次又一次地重新加载 120kb 因为用户缓存是空的怎么办 如果我在网站的每个页面上使用 5 个 js 文件
  • Chrome 调试器 - 如何关闭 console.log 消息分组?

    比如说 在我的 Google Chrome 扩展中我这样做 console log msg Chrome 调试器将类似的消息分组如下 有没有什么办法可以将其关闭并让消息按原样发布 它只会折叠相同的连续行 我不认为这有什么问题 但是通过控制台
  • Powershell 5 中的哪些变化改变了块大括号的含义

    我们最近将构建服务器上的 Powershell 版本从 4 0 更新到了 5 0 这一更改导致我们的一个构建脚本开始以意外的方式失败 该代码用于确定我们的产品中应包含哪些用户指南 该代码处理一个 xml 节点列表 这些节点描述了所有可用文档
  • Java 中包私有类的改进

    根据我的经验 Java 中类的包私有可见性被证明是多余的 包私有可见性似乎基于这样一个前提 几乎被另一个类私有使用的类很可能保存在同一个包中 通常情况并非如此 有人正在探索改进的访问修饰符 替代机制吗 尝试使用包私有可见性时出现问题 我们很
  • 在 apache 模块中转换 PHP 类

    我在 php5 中编写了一个复杂的系统 许多类使用静态方法并包含其他文件 现在我想分发 ant 我会选择模块方式 所以我喜欢创建一个像 myFramework so 这样的模块并将其包含在 Apache 中 也许 之后 当我编写一些 php
  • Angular AOT 和 Rollup - 未捕获的 ReferenceError:未定义导出

    我正在尝试实现 Angular 的 AOT 教程 https angular io docs ts latest cookbook aot compiler html https angular io docs ts latest cook