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

我正在将现有的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文件：

The main HTML page that is served when someone visits your site. Most
of the time you’ll never need to edit it. The CLI automatically adds
all js and css files when building your app so you never need to add
any or tags here manually.

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

解决方法:

使用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处理并添加到可在运行时访问的bundle的步骤.

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

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

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

将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服务来为您的项目服务.相反,你将使用npm run build&& npm run start(弹出后你会看到这些脚本被添加到你的package.json中),它将根据生成的webpack.config.js文件构建和服务你的项目.

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

了解更多关于ng eject here的信息.

生成的捆绑包在哪里？

如果您正在使用ng服务,您将看不到任何生成的文件,因为这些文件是从内存而不是从磁盘提供的(以便在文件不断变化时加快开发速度),因此生成的文件不在任何文件夹中.

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

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

标签：javascript,angular,angular-cli
来源： https://codeday.me/bug/20190522/1153435.html