如何将 Angular 7 应用程序包含在现有的 html 文件和网站中?

2024-06-25

我一方面有一个现有网站,另一方面有一个 Angular 7 应用程序组件。

我想编辑现有的someusecase.html并重用我的 Angular 7 应用程序,例如

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>How to import Angular 7 App?</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

我需要在 html 中包含什么才能使其工作?我正在追寻例如相当于:

<script src="/ui/node_modules/angular/angular.min.js"></script>
<script src="/ui/components/Application.js"></script>

换句话说,是否可以在 Angular 7 应用程序中重用和激活 Angular 7 应用程序?<div>范围在现有网页内?


1) Run

ng build

2)进入dist folder

3)将所有文件复制并粘贴到您的原始应用程序中,except为了index.html file.

4)打开未复制的index.html file

5) 复制全部<script>该文件中的标签,进入您的someusecase.html file, 在同一个地点.

6) 在您希望显示角度应用程序的任何地方使用您的应用程序组件选择器。

请注意,这只是信息性的:在现实生活中,这应该是自动化的,因为您必须执行此操作在每个构建上.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Angular 7 应用程序包含在现有的 html 文件和网站中? 的相关文章

  • 通过标记或JS强制下载

    假设我在 CDN 来自 Rackspace 的云文件 上有一个文件 以及一个包含该文件链接的静态 html 页面 有什么方法可以强制下载此文件 以防止它在浏览器中打开 例如 mp3 我们可以让我们的服务器读取该文件并将相应的标头设置为 he
  • 为什么 jQuery 对损坏标记的解释与浏览器不同?

    我之前已经回答过这个问题 https stackoverflow com a 19101905 1253312 但我并不完全理解why答案是正确的 答案的要点 p p function jqrender html a href http w
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • PHP、MySQL 验证故障且搜索不起作用?

    我创建了一个小的注册粘性表格 一切工作正常 但如果我输入任何错误的值 例如姓名中的数字 年龄中的字母甚至错误的电子邮件格式 那么数据仍然保存在数据库中 我无法找出验证问题 另外一个是搜索选项 每当我在搜索框中输入任何名字或姓氏时 它都应该显
  • CSS @import 及其顺序

    是否可以使用 importone像这样的 css 文件 import file1 some css here import file2 chrome 无法识别上述第二个导入 但这可以工作 import file1 import file2
  • 如何在 Angular 4 autoComplete 材料中调用 closePanel

    import MdAutocomplete from angular material Component template
  • 在 Javascript 中实现 Zobrist 哈希

    我需要在 Javascript 中为国际象棋引擎实现 Zobrist 哈希 我想知道实现此目的的最佳方法是什么 现在 我不是计算机科学家 也从未上过正式的算法和数据结构课程 所以如果我在这方面有点偏离 我很抱歉 据我了解 我需要一个 64
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • mat-table 自动调整列宽以适应更大的内容

    我有一个垫表 我想自动调整列宽 任何人都将与最长的列内容一样长
  • 如何转义 onClick 处理程序内 JavaScript 代码中的字符串?

    也许我只是想得太难了 但我在弄清楚链接的 onClick 处理程序内的某些 JavaScript 代码中的字符串上使用什么转义时遇到了问题 例子 a href Select a The and 是发生模板替换的地方 我的问题是项目名称可以包
  • Lighthouse 多个 URL

    我需要对一个网站进行全面审核 但我想知道是否有任何方法可以让 Lighthouse 做到这一点 我知道他们不支持完整的站点审核或多个 URL 但我发现可以使用 bash 脚本来完成 因此 我将不胜感激对此案的任何帮助 或者您可能会推荐任何灯
  • 如何使用javascript将数据存储在xml文件中?

    我是 javascript 新手 并在我的项目中使用它 因为我需要读取 xml 文件 然后在操作后我想将更新后的值存储回 xml 文件中 我成功从 xml 文件获取值 但无法存储值返回到 xml 文件 这是我尝试过的代码
  • Google Maps API - 调整大小会生成空白区域

    我正在研究一个看起来非常简单的功能 但却引起了一些头痛 我使用 GIS 并将其与 Google 地图集成 其中一位客户要求能够打开一个仅显示地图的单独弹出窗口 打开窗口不是问题 但当我尝试扩展包含地图的 IFrame 的宽度时 为了适应窗口
  • execCommand 的替代品

    我希望创建一个所见即所得编辑器 使用 jQuery 作为框架 我可以使用不同的方法来简化生产 我现在确实有一个正在工作的编辑 而且运作良好 我使用 iFrame 并将其设计模式设置为打开并从那里开始 然而 有一些事情困扰着我 以更改所选文本
  • 如何从 Instagram 的 media_preview 原始数据重新创建预览?

    如果您从 Instagram 的 API 获取 JSON 数据 您会发现media previewkey 其值是一些 Base64 编码的数据 它看起来确实像一些非常小的预览二进制数据 也许是压缩的 Take 这个帖子 https www
  • Promise链基本问题

    我正在尝试理解 Promise 我创建了一些有效的承诺链 而另一些则无效 我已经取得了进步 但显然缺乏基本概念 例如 以下承诺链不起作用 这是一个愚蠢的例子 但说明了问题 我正在尝试在链中使用 Node 的函数 randomBytes 两次
  • 单击即可切换背景颜色和过渡

    这看起来应该很容易 但我真的找不到办法做到这一点 动画 http doir ir css gif http doir ir css gif 当您单击这些相应的链接时 我需要更改和过渡页面的背景颜色 我见过的最接近触发这种类型转换的事情是 仅
  • 在用户单击之前图像不会绘制在画布上?

    我使用执行类似以下操作的函数绘制几张图像 context drawImage img width 2 1 height 2 1 width height 我读过 我需要等待图像加载后才能绘制它 如下所示 img onload functio
  • 如何将国家/地区代码与电话号码分开?

    我的数据库中有很多电话号码 例如 1 123 456 7890 我要做的是将国家 地区拨号代码 在本例中为美国 加拿大的 1 与电话号码分开 我尝试创建所有国家 地区的 JSON 列表 并在加载页面时将电话号码和国家 地区代码分开 它工作正
  • 如何在流体宽度表中使用省略号而不使每列大小相同?

    假设我的表中的列是id name description and phone The description列的长度为 1 255 个字符 但 id 最多只有 3 个字符 我希望列的大小适当 而不是每列的大小相同 我想要descriptio

随机推荐

  • 为什么我的 JavaScript 构造函数返回默认属性值而不是修改后的值?

    我正在使用 Material Steppers 开发一个小型 AngularJS 应用程序 我必须从页面的两个部分中选择项目并返回true only if的物品来自两个部分属于 id 为 categoryID 1 class Control
  • SciChart 更新到最新版本后变成了 Maximum Plaid

    我已将 SciChart 从版本 3 31 更新到最新版本 4 2 2 9777 由于某种原因 它导致我的应用程序中 SciChart 表面的每个实例都具有这种奇怪的格子背景 请参阅附图 虽然是节日 但我想顾客不会同意 我不知道是什么原因造
  • C#:监视器 - 等待、脉冲、PulseAll

    我很难理解Wait Pulse PulseAll 他们都能避免僵局吗 如果您解释一下如何使用它们 我将不胜感激 简洁版本 lock obj 是简写Monitor Enter Monitor Exit 异常处理等 如果没有其他人拥有锁 您可以
  • 使用 powershell 获取 Azure DevOps 服务连接服务主体 ID

    我正在致力于自动化 Azure Active Directory 应用程序注册和 Azure Devops 服务连接 但遇到了困难 我想通过服务主体 ID 查询 Azure DevOps 服务连接 服务端点 或至少获取 ID 使用 Azur
  • java中的“字符串...”是什么? [复制]

    这个问题在这里已经有答案了 可能的重复 可变参数和 参数 https stackoverflow com questions 1656901 varargs and the argument Java 参数中3个点 https stacko
  • AFNetworking 同步调用(类似/不同)

    我需要实施喜欢 不喜欢应用程序中的功能 所有 API 调用均通过AFNetworking和成功 错误处理程序 iOS 块 问题是 当用户在短时间内多次单击某个按钮时 服务器会以错误的顺序接收某些请求 然后一切都会变得错误 例如发生双重喜欢或
  • 您可以在 Mac 上安装并运行基于 .NET 框架构建的应用程序吗?

    我需要在我的 Mac 上使用 继续开发使用 NET 开发的桌面应用程序 有适用于 Mac 的 NET Framework 4 0 吗 这是否允许在 Mac 上运行和开发基于 NET 的应用程序 我正在考虑的另一个选择是在 Mac 上使用 W
  • 在Python中切片列表而不生成副本

    我有以下问题 给定一个整数列表L 我需要生成所有子列表L k for k in 0 len L 1 不生成副本 我如何在 Python 中完成这个任务 以某种方式使用缓冲区对象 简短的回答 对列表进行切片不会生成列表中对象的副本 它只是复制
  • 詹金斯更改链接

    Jenkins UI 中 更改 链接的用途是什么 谁能指出描述 更改 链接的 Jenkins 文档 当 Jenkins 拉取源代码时 它会获得新的 SVN 修订版或新的 Git SHA1 此链接显示自上次构建以来 SCM 的更改
  • Filebeat 日期字段映射为类型关键字

    Filebeat正在从文件中读取日志 其中日志的格式如下 logTimestamp 2019 11 29T16 39 43 027Z version 1 message Hello world logger name se lolotron
  • 究竟要消化什么并在 XMLDSIG 上签名以及如何进行? (或者,OSX 本机客户端与服务器上计算的 XMLDSIG 不匹配)

    我正在尝试使用封装签名 sha1 摘要和 rss sha1 签名按照 XMLDSIG 规范对 xml 文档进行签名 并且服务器不断返回 297 拒绝 签名与计算的 结果 不匹配 297 Rejeicao Assinatura difere
  • mediaelement.js - 具有固定最大尺寸的响应式视频

    我该如何设置媒体元素 js questions tagged mediaelement js缩小视频以适应小屏幕尺寸 但不将其放大到超出其实际尺寸 除了将其包装在正确大小的 div 中之外 如果我找不到更好的解决方案 我会回退到这个位置 我
  • 为什么linkedhashmap维护双向链表进行迭代

    因为任何线程都没有内部合理的解释 请给我确切的理由 对于插入顺序 用单链表维护就足够了 但为什么不呢 在这种情况下 双向链表如何提高性能 所有方法都是从 hashmap xpt 4 方法继承的 那么 hashmap 的迭代器不维护顺序 而
  • “真正的”多维数组的定义是什么以及哪些语言支持它们?

    我读过的大多数编程书籍都有以下几行 X 语言不支持真正的多维数组 但您可以使用数组的数组来模拟 近似 它们 由于我的大部分经验都是基于 C 的语言 即 C Java JavaScript php 等 因此我不确定什么是 真正的 多维数组 a
  • Guzzle 获取文件并转发

    我有一个网络服务 可以获取文件并将其返回给用户 基于 Symfony 自从我使用curl 来做到这一点 我刚刚发现 guzzlehttp 看起来很棒 但是 我不知道如何使用 guzzle 执行此操作 而不将下载的文件 xml 或 txt 保
  • 如何将表中的表单数据 POST 到 PHP

    我目前正在为工作中的员工创建一个时间表表单 但我一直致力于正确发布输入值 我已经设置了一个数据库 但现在我什至无法获取要在 php 页面中显示的值 这是我当前表中的示例
  • Raspberry pi 3 B+ 中的串行通信

    我想在 Raspberry pi 3 B 和 GSM GPRS A6 之间进行通信 我尝试过 但无法从 Raspberry pi 向 GPRS 模块发送数据 现在 我知道在较新的操作系统 在我的例子中是 Raspbian Stretch 中
  • Haskell 中的随机枢轴快速排序

    是否有可能在 Haskell 中实现快速排序 使用 RANDOM PIVOT 但仍然有一个简单的Ord a gt a gt a 签名 我开始了解 Monad 目前 我将 monad 解释为某种 命令模式 这对于 IO 非常有用 所以 我知道
  • Roslyn:将 C# 转换为 VB

    我有这样的情况 我需要将 C 项目转换为 VB NET 项目 我想自动化这个 所以我不能使用在线工具或类似的东西 有 粘贴为 C VB 示例 Visual Studio 扩展 https github com akimboyko MetaP
  • 如何将 Angular 7 应用程序包含在现有的 html 文件和网站中?

    我一方面有一个现有网站 另一方面有一个 Angular 7 应用程序组件 我想编辑现有的someusecase html并重用我的 Angular 7 应用程序 例如