Question

我有一个角度2应用程序，我使用角度cli生成器：https://github.com/EdmundMai/angular-2-playing

这是生成器：https://github.com/angular/angular-cli

我跑了ng serve，现在我有一个页面，当我访问http://localhost:4002时，我可以看到

angular 2应用程序中的dist / index.html文件如下所示：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularTwo</title>
  <base href="/">

  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="http://carbon.ec2.crowdtap.com/component_importer.js"></script>
</head>
<body>
  <angular-two-app>Loading...</angular-two-app>



    <script src="vendor/es6-shim/es6-shim.js"></script><script src="vendor/reflect-metadata/Reflect.js"></script><script src="vendor/systemjs/dist/system.src.js"></script><script src="vendor/zone.js/dist/zone.js"></script>
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>





</body>
<script>
  window.carbon.importComponents({ components: ['ct-button', 'ct-button/ct-button-link', 'ct-dialog', 'ct-progress'] });
</script>
</html>

在我的rails视图中，我试图包含这些JS文件：

<script src="http://localhost:4200/vendor/es6-shim/es6-shim.js"></script>
<script src="http://localhost:4200/vendor/reflect-metadata/Reflect.js"></script>
<script src="http://localhost:4200/vendor/systemjs/dist/system.src.js"></script>
<script src="http://localhost:4200/vendor/zone.js/dist/zone.js"></script>
<script src="http://localhost:4200/system-config.js"></script>
<script src="http://localhost:4200/main.js"></script>

然而，它不起作用并抱怨main.ts:1Uncaught ReferenceError: require is not defined

有没有正确的方法呢？

Answer 1

您需要更改生成的

中的<base href="/">标记（第6行）

DIST / index.html中

到<script>document.write('<base href="' + document.location + '" />');</script>

Rails：如何在视图中加载我的本地Angular 2应用程序？

1 个答案: