如何使用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 -将你的transpiled打字稿代码和生成基于定义的入口点的进口/出口的依赖关系图 webpack.config.js 。 此依赖关系图将包含所有模块，并将根据配置将这些模块打包为1个以上的包 。 这是@angular/core依赖项（位于node_modules/@angular/core ）由Webpack处理并添加到可在运行时访问的bundle的步骤。

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

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

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

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

---

在Angular CLI中配置Webpack在哪里？

在引擎盖下，Angular CLI使用Webpack构建您的项目并捆绑您的文件。

该角团队选择不暴露的折角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 ，这将创建一个包含index.html和相关资产/包的dist文件夹。

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

Answer 2

您需要了解TypeScript中 导入和导出的工作原理

来自TypeScript文档

导出声明

可以通过添加export关键字来导出任何声明（例如变量，函数，类，类型别名或接口）。

Validation.ts

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

ZipCodeValidator.ts

export const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

出口报表

当需要为消费者重命名导出时，导出语句很方便，因此上面的示例可以写成：

ZipCodeValidator.ts

class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };

进口

导入就像从模块导出一样简单。 通过使用以下导入表单之一导入导出的声明：

从模块导入单个导出

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

也可以重命名导入

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

将整个模块导入单个变量，并使用它来访问模块导出

import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

由于您遵循了Angular快速入门指南，因此必须使用npm来安装模块和依赖项。

如果您阅读angular.io/npm

@angular / core：每个应用程序所需的框架的关键运行时部分。 包括所有元数据装饰器，组件，指令，依赖项注入和组件生命周期挂钩。

默认情况下，npm将所有依赖项存储在node_modules目录中。

因此，您要从@ angular / core导入Component ，它位于node_modules目录中。