如何使用Angular CLI将Angular框架加载到应用程序中？

Question

我正在将现有的AngularJS应用程序转换为混合应用程序,开始逐步将其升级到Angular 4.我想了解Angular 4如何在现有的AngularJS中引用.在现有的AngularJS应用程序中,很清楚如何加载AngularJS框架 - 它只是一个包含的脚本文件:

<script src="/angular/angular.js"></script>

为了熟悉最新的Angular版本,我使用https://angular.io/guide/quickstart上的Angular快速入门指南创建了一个单独的"快速入门"Angular 5应用程序,我可以使用以下命令运行它:

ng serve --open

当我查看项目文件时,我没有看到角度框架实际加载的位置.该应用程序的src/index.html文件中没有任何脚本,它只是声明一个组件(app.component.ts)的指令,如下所示:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test Angular 5 app';
}

导入实际从哪里导入？Angular文档说明了它的index.html文件:

有人访问您的网站时提供的主HTML页面.大多数情况下,您永远不需要编辑它.在构建应用程序时,CLI会自动添加所有js和css文件,因此您无需手动添加任何或标记.

那么这里发生了什么？@ angular/core实际上是如何被引用的？

Answer 1

使用 Angular CLI 时，我们有很多移动部件。为了真正了解正在发生的事情，我们应该回顾一下 Angular CLI 中使用的一些核心技术，因为它们与输出文件和模块解析相关：

• TypeScript——将你的 TypeScript 代码转换为 ES5 或 ES6（最常见的是 ES5）。如果目标是 ES5，则转译的代码将默认使用CommonJS模块。如果目标是 ES6，则将使用ES6 模块。
• Webpack - 将获取您的转译 TypeScript 代码，并根据中定义的入口点构建导入/导出的依赖关系图。该依赖关系图将包含您的所有模块，并且根据配置将这些模块打包成 1+ 个包。这是Webpack 处理依赖项（位于 中）并将其添加到可以在运行时访问的包中的步骤。webpack.config.js@angular/corenode_modules/@angular/core

您可以通过将生成的文件包含在 HTML 中来将生成的包加载到页面中。对于 JS 文件，您可以使用script标签加载它们，就像使用 AngularJS 一样。

因为我们使用的是 Angular CLI，所以 Webpack 中有很多默认设置的配置，所以我们将有多个生成的包。

我刚刚创建了一个空的 Angular CLI 项目并检查了 HTML 以查看 5 个生成的包：

将 Angular 项目文件与 AngularJS 文件进行比较时，复杂性的核心在于 Angular 代码是通过多个构建步骤进行转换的，而 AngularJS 代码通常与 ES5 一起开箱即用。如果您要将 Webpack 和 TypeScript 添加到 AngularJS 构建中，您会看到与 Angular 输出非常相似的内容。

Webpack 在 Angular CLI 中的哪里配置？

在底层，Angular CLI 使用 Webpack 来构建您的项目并捆绑您的文件。

Angular 团队选择不公开 Angular CLI 的可配置 Webpack 配置文件，但他们添加了ng eject，这会生成webpack.config.js与项目的 Webpack 版本匹配的文件。弹出的缺点是您将不再使用它ng serve来为您的项目提供服务。相反，您将使用npm run build && npm run start（弹出后您将看到这些脚本添加到您的项目中package.json），它将根据生成的webpack.config.js文件构建和服务您的项目。

如果您需要对默认 Webpack 构建进​​行自定义修改，则此功能至关重要。

阅读更多有关ng eject 此处的信息。

生成的包在哪里？

如果您使用的是ng serve，您将看不到任何生成的文件，因为这些文件是从内存而不是从磁盘提供的（以在文件不断更改时加快开发速度），因此您生成的文件不位于任何文件夹中。

如果您想查看生成的文件，可以运行ng build，这将创建一个包含相关资产/包的dist文件夹index.html。

请注意，默认情况下，构建或服务项目的所有命令都将删除您的dist文件夹，除非您在构建/服务时传递了--no-delete-output-path。