如何在浏览器中使用捆绑的Angular 2应用程序?

布赖恩

我试图将所有TypeScript代码编译成一个Javascript文件。但是每当我尝试使用SystemJS导入该文件时,该网页就会停留在loading...

我使用gulp将打字稿文件编译为一个Javascript文件,然后复制到该dist文件夹中。

Gulp任务:

gulp.task("dist:compileTSConcat", function() {
  return gulp.src("./app/**/*.ts")
    .pipe(ts({
      typescript: require('typescript'), // In my package.json I have "typescript": "1.8.2"
      target: 'ES5',
      module: 'system',
      moduleResolution: 'node',
      experimentalDecorators: true,
      emitDecoratorMetadata: true,
      outFile: 'app.js'
    }))
    .pipe(gulp.dest("./dist/"))
})

SystemJS在网页中导入代码:

...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.4/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-register-only.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>

    <script>
      //System.config({});
      System.import('app.js').then(null, console.error.bind(console));
    </script>
...
蒂埃里圣堂武士

您应该在script标签中包含JS文件,然后导入应用程序的入口点模块:

<script src="dist/app.js"></script>
<script>
  System.import('app').then(null, console.error.bind(console));
</script>

如果您将Angular 2应用程序引导到boot.ts位于该app文件夹下的文件中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Java应用程序如何识别特定的浏览器?

来自分类Dev

在Angular应用程序中使用pushState()更改浏览器URL时出现错误

来自分类Dev

同时使用Spark 2应用程序

来自分类Dev

在Windows上的Eclipse RCP应用程序中使用时,如何禁用swt浏览器的点击声?

来自分类Dev

在Java应用程序中使用js和CSS(嵌入式浏览器功能)

来自分类Dev

如何在JavaFx应用程序中等待WebEngine /浏览器初始化?

来自分类Dev

如何在Maven中使用Typescript配置Angular2应用程序?

来自分类Dev

关于发布Angular 2应用程序

来自分类Dev

从浏览器运行应用程序

来自分类Dev

如何在Javascript / ES6的Aurelia浏览器应用程序中使用AWS S3?

来自分类Dev

如何在Angular 2应用程序中使用Phoenix通道/套接字?

来自分类Dev

如何在Angular 2移动应用程序中使用Cordova插件

来自分类Dev

如何在PHP应用程序中使用Angular 2?

来自分类Dev

如何使用“网络浏览器应用程序”?

来自分类Dev

如何在Android应用程序的浏览器中使用Android应用程序打开和显示.html文件的内容

来自分类Dev

我的Angular JS应用程序可在桌面浏览器中使用,但不能在移动浏览器中使用

来自分类Dev

在Windows上的Eclipse RCP应用程序中使用时,如何禁用swt浏览器的点击声?

来自分类Dev

在angular2应用程序中使用Vaadin网格

来自分类Dev

如何在angular 2应用程序中使用php作为后端语言?

来自分类Dev

Web浏览器如何与FastCGI应用程序通信?

来自分类Dev

如何在带有角度cli的angular2应用程序中使用gulp浏览器浏览器同步?

来自分类Dev

Angular 2应用程序的范围

来自分类Dev

如何在angular2-meteor应用程序中使用momentjs npm-package?

来自分类Dev

如何在angular2应用程序中使用html代码

来自分类Dev

如何在angular2应用程序中使用Braintree的嵌入式UI?

来自分类Dev

如何在 angular2 应用程序中使用第二个路由器插座?

来自分类Dev

Angular 2 应用程序在 android 4.4.2 默认浏览器中不起作用

来自分类Dev

Ping Angular 2 应用程序

来自分类Dev

如何运行angular 2应用程序?

Related 相关文章

  1. 1

    Java应用程序如何识别特定的浏览器?

  2. 2

    在Angular应用程序中使用pushState()更改浏览器URL时出现错误

  3. 3

    同时使用Spark 2应用程序

  4. 4

    在Windows上的Eclipse RCP应用程序中使用时,如何禁用swt浏览器的点击声?

  5. 5

    在Java应用程序中使用js和CSS(嵌入式浏览器功能)

  6. 6

    如何在JavaFx应用程序中等待WebEngine /浏览器初始化?

  7. 7

    如何在Maven中使用Typescript配置Angular2应用程序?

  8. 8

    关于发布Angular 2应用程序

  9. 9

    从浏览器运行应用程序

  10. 10

    如何在Javascript / ES6的Aurelia浏览器应用程序中使用AWS S3?

  11. 11

    如何在Angular 2应用程序中使用Phoenix通道/套接字?

  12. 12

    如何在Angular 2移动应用程序中使用Cordova插件

  13. 13

    如何在PHP应用程序中使用Angular 2?

  14. 14

    如何使用“网络浏览器应用程序”?

  15. 15

    如何在Android应用程序的浏览器中使用Android应用程序打开和显示.html文件的内容

  16. 16

    我的Angular JS应用程序可在桌面浏览器中使用,但不能在移动浏览器中使用

  17. 17

    在Windows上的Eclipse RCP应用程序中使用时,如何禁用swt浏览器的点击声?

  18. 18

    在angular2应用程序中使用Vaadin网格

  19. 19

    如何在angular 2应用程序中使用php作为后端语言?

  20. 20

    Web浏览器如何与FastCGI应用程序通信?

  21. 21

    如何在带有角度cli的angular2应用程序中使用gulp浏览器浏览器同步?

  22. 22

    Angular 2应用程序的范围

  23. 23

    如何在angular2-meteor应用程序中使用momentjs npm-package?

  24. 24

    如何在angular2应用程序中使用html代码

  25. 25

    如何在angular2应用程序中使用Braintree的嵌入式UI?

  26. 26

    如何在 angular2 应用程序中使用第二个路由器插座?

  27. 27

    Angular 2 应用程序在 android 4.4.2 默认浏览器中不起作用

  28. 28

    Ping Angular 2 应用程序

  29. 29

    如何运行angular 2应用程序?

热门标签

归档