Angular2 - 使用angular-cli时未定义系统

Question

我一直在使用angular-cli创建一个示例项目，理解该工具仅用于编译和生成用于测试的嵌入式服务器。 但是当我在没有任何服务器而不是浏览器的情况下打开dist文件夹内的文件时，我遇到了很多问题，因为它可以获取文件，特别是这条消息：

  

ReferenceError：未定义系统

如果我尝试使用tomcat打开项目，例如我看到：

然后我尝试手动重写目录以获取这些文件然后我得到了这个：

在index.html内部

    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

我可以继续重写......但是出于同样的原因，我遇到了越来越多的错误。 所以我不知道如何解决这个问题，我找不到一个很好的例子。

我不能依赖Node服务器，因为这只是侧客户端的JavaScript代码，即使没有任何服务器也应该可以工作。

我会赞美任何建议或想法。

编辑：我尝试了ng serve，这就是我知道应用程序的工作方式，但我需要在tomcat等其他服务器中使用它。

Answer 1

这与他们给出命令的原因完全相同

ng serve

使用它，它会为您提供类似于＆＃39; http://localhost:port/＆＃39;的地址。一旦你访问它，它将运行你的示例应用程序。

当你将它视为文件系统并打开它自己的index.html时，

angular 2不能正常工作。也许将来你可以，但截至目前，我还不知道其他任何方式。

修改：我使用的另一种方式是在IIS中创建一个网站，并提供 dist 文件夹的物理路径，并且无论何时进行 ng构建 您可以打开该应用。

Answer 2

Angular-cli是一种有效采用所有配置和设置步骤的工具，将其压缩为一个快速行ng new project_name。因此，它为您提供了可扩展的项目结构，而不是为您提供开箱即用的所有常见繁琐任务。

真的很酷的是，CLI允许我们做的是在浏览器中提供我们的应用程序。以前，我们必须使用lite-server创建服务器或创建我们自己的Node（或其他）服务器.Angular CLI通过一个简单的命令执行此操作：

ng build 

上面的命令将在/ dist文件夹中构建你的项目，它默认输出3个不同的文件和资产。

• vendor.js（连锁的第三方图书馆）。
• vendor.css（连接的第三方css文件）。
• app.js（控制器，指令和其他实体的连接版本。）
• app.css（样式的连接版本）。 index.html（您的主要html文件）。

并在浏览器中打开它 -

ng serve

它与build命令一样，另外它运行带有livereload的本地服务器。

Angular-cli基于ember-cli。 Ember CLI的运行时可通过名为.ember-cli的文件进行配置。 JSON格式的文件必须放在主目录中，可以包含任何命令行选项。这就是我们能够在浏览器中运行angular-cli项目的原因

注意此目录结构以及文件所在的位置非常重要，因为Angular CLI生成的应用程序遵循推荐的应用程序结构和样式指南。

Answer 3

最后，我正如我所料，使用CDN解决了这个问题。 我从Angular文档中作为基础示例：
http://plnkr.co/edit/?p=preview

var  map = {
'app':                        'app',
'@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
'@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript':                 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js'
};

这是来自系统配置文件。
现在，我可以使用tomcat或其他应用程序服务器甚至只是从Web浏览器打开我的项目。谢谢你提出的所有好主意。