Question

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

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

为了熟悉最新的Angular版本，我使用https://angular.io/guide/quickstart上的Angular快速入门指南创建了一个单独的“quickstart”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 - 将根据webpack.config.js中定义的入口点，获取已转换的TypeScript代码并构建导入/导出的依赖关系图。此依赖关系图将包含所有模块，并将这些模块打包为1 + 捆绑，具体取决于配置。这是@angular/core依赖项（位于node_modules/@angular/core）由Webpack处理并添加到可在运行时访问的包中的步骤。

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

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

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

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

Angular CLI中配置的Webpack在哪里？

在幕后，Angular CLI使用Webpack构建您的项目并捆绑您的文件。

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

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

详细了解ng eject here。

生成的捆绑包在哪里？

如果您使用ng serve，则不会看到任何生成的文件，因为这些文件是从内存而非磁盘（到当文件不断变化时加快开发速度），因此生成的文件不在任何文件夹中。

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

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

Answer 2

您需要了解导入和导出如何在 TypeScript

中工作

来自TypeScript Docs

导出声明

任何声明（例如变量，函数，类，类型别名或可以通过添加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 目录中。

因此，您要从位于 node_modules 目录中的 @ angular / core 导入组件。

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

2 个答案: