开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

包装angular元素时，angular production build不能引导

在包装Angular元素时，Angular的生产构建（production build）不能引导（bootstrap）。

Angular是一个流行的前端开发框架，它使用一种称为模块化开发的方式来构建应用程序。在Angular中，一个应用程序通常由一个或多个模块组成，每个模块都有一个根模块，也称为引导模块（bootstrap module）。引导模块负责启动应用程序，并将根组件（root component）渲染到浏览器中。

然而，在包装Angular元素时，由于元素不是Angular应用程序的一部分，因此无法使用Angular的生产构建来引导它。生产构建是为了构建整个Angular应用程序而设计的，它会生成一个用于引导应用程序的JavaScript文件。但是，对于单独的元素，我们需要使用其他方法来引导它们。

一种常见的方法是使用自定义元素（custom elements）来包装Angular元素。自定义元素是一种浏览器原生的Web组件，可以在任何Web框架中使用。通过将Angular元素包装在自定义元素中，我们可以将其作为独立的组件在其他应用程序中使用，而无需使用Angular的生产构建来引导它。

在Angular中，我们可以使用Angular Elements来创建自定义元素。Angular Elements是一个官方提供的库，它允许我们将Angular组件打包为自定义元素，并在任何支持自定义元素的环境中使用它们。使用Angular Elements，我们可以将Angular元素包装为自定义元素，并在其他应用程序中使用它们。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云函数计算（SCF）：https://cloud.tencent.com/product/scf
腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云原生应用引擎（Cloud Native App Engine）：https://cloud.tencent.com/product/cnae

相关搜索:AOT导致堆栈超出的Angular production build Team City中的Angular Production Build错误：Angular 9 production build不创建命名块文件 Angular Production Build找不到插件“proposal-numeric separator”Angular 4 production build抛出HTTP do()和map()函数错误 Angular production build上的无效或意外标记中出错 Angular CLI，ng build命令不能正确编译 angular ui-ace production build在jhipster项目中不起作用 Angular mat卡片不会包装ngx-charts元素引导转盘不能与angular一起使用 angular 2不能动态创建选择器(引导)使用ng serve时出现Angular8错误:找不到模块“@angular-devkit/build-angular”Angular设置config中的build命令行参数(--host / --disable-host-check for --configuration=production)当我更新"@angular-devkit/build-angular“时，样式加载器停止工作。引导转盘不能与angular6一起使用 Angular元素不能正确包含材料主题css 单击时，在angular 8上不显示引导模式在angular 4中打开引导模式时获取ExpressionChangedAfterItHasBeenCheckedError Angular APP_INITIALIZER在成功时不会延迟引导使用引导网格时，输入元素具有意外的包装行为

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

玩转 Angular 环境变量

/build-angular:browser", //......--build-optimizer Enables @angular-devkit/build-optimizer optimizations when using the 'aot' option...可能有的同学已经注意到了 --configuration 这个参数，通常参数说明，我们知道这个参数用于指定构建时所使用的配置文件。没错，要达到我们预期的结果，就要利用该参数。...不过与 ng build 命令一样，我们也需要配置一下 angular.json 文件： "serve": { "builder": "@angular-devkit/build-angular:...": { "production": { "browserTarget": "angular-storybook-demo:build:production"

3.2K2 0

Angular 应用是怎么工作的？

"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist.../environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic...应用通过 bootstrapModule 引导启动。入口已确定，那什么是引导(What's bootstrapping) 每个应用至少有一个 Angular 模块。...root 根模块引导你启动引用，被称为启动模块。因此，bootstrapping 就像是一种装置或说一种加载的技术，启动 Angular 应用。当我们加载组件或者模块的时候，它将被渲染。...[], bootstrap: [AppComponent] }) export class AppModule { } 在这个 AppModule 中，在 @NgModule 装饰器中，我们有一个引导

1.4K3 0

Angular 实现类似微服务的效果

": { "builder": "@angular-devkit/build-angular:browser", "options": {..."configurations": { "production": { "browserTarget": "18002:build:production.../build-angular:extract-i18n", "options": { "browserTarget": "18002:build"..."configurations": { "production": { "browserTarget": "80000:build:production.../build-angular:extract-i18n", "options": { "browserTarget": "80000:build"

851 0

手工将项目升级至 Angular 9 记录

虽然它提供了 ng update 命令来升级，但是这个命令会自动调整 package.json 文件依赖项的顺序，导致向其它项目合并时产生不必要的冲突。...{ "devDependencies": { - "@angular-devkit/build-angular": "~0.803.21", + "@angular-devkit/build-angular...": "~0.900.1", - "@angular-devkit/build-ng-packagr": "~0.803.21", + "@angular-devkit/build-ng-packagr...angular.json Angular 9 默认采用 ivy 引擎，所以应用项目 (web) 的 build 选项需要打开 aot 编译。...类库项目 (app-shared) 也增加了 production 配置 { "$schema": ".

1.8K0 0

Angular开发实践（六）：服务端渲染

Angular Universal 可以为你生成应用的静态版本，它易搜索、可链接，浏览时也不必借助 JavaScript。它也让站点可以被预览，因为每个 URL 返回的都是一个完全渲染好的页面。...：src/main.server.ts 修改客户端应用的引导程序文件：src/main.ts 创建 TypeScript 的服务端配置：src/tsconfig.server.json 修改 @angular...模块，它包装了应用的根模块 AppModule，以便 Universal 可以在你的应用和服务器之间进行协调。...AppServerModule 还会告诉 Angular 再把你的应用以 Universal 方式运行时，该如何引导它。...它是在这个服务器上运行时才需要的一些可选的 Angular 依赖注入提供商。当你的应用需要那些只有当运行在服务器实例中才需要的信息时，就要提供 extraProviders 参数。

4.7K10 0

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

"component": { "flat": false, // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹） "spec": true, /...开发时为避免ajax跨域，需要指定后台接口的转发地址。...--target 指定构建的目标，默认值是development，如果指定为production，构建时会加入treeshaking、代码压缩混淆等。...下面两条等价： ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments

1.6K3 0

node-sass 埋坑记录

找了下，发现是因为本机没有 VS C++ 的编辑工具，可以借助： npm install -g --production windows.build.tools 来下载安装，试了下，发现是需要联网才行，...毕竟升级了 angular 大版本，随之而来的一些依赖库也需要跟着升级，这无可厚非，可以理解，所以当让我也升级 node-sass 时，我没啥反感。...版本时，请注意这些事项，具体的依赖关系，请到各自的官网中查看说明。...解决方案能联网先升级 angular 版本，再升级 angular-cli 版本构建失败时，会提示请升级 node 版本，按提示升级，可通过 nvm 或手动下载新版本 node 继续构建时，node-sass...不能访问外网最重要的一点就是，windows 的东西没法下载，比如上面的 windows-build-tools 自动去下载 vs c++ 的编译工具就下载不了。

4.3K1 0

Angular CLI 使用教程指南参考

输出详细信息 --skip-npm 在项目第一次创建时不执行任何npm命令 --name 指定创建项目的名称 ng serve ng new PROJECT_NAME cd PROJECT_NAME...项目参数描述 --dry-run -d 只输出要创建的文件和执行的操作，实际上并没有创建项目 --verbose -v 输出详细信息 --skip-npm 在项目第一次创建时不执行任何npm命令...ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment...# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod...默认为“production” --branch= 推送页面的git分支。

3K5 0

Angular Library 快速入门

": { "builder": "@angular-devkit/build-ng-packagr:build", "options": {...project": "projects/sf-lib/ng-package.json" }, "configurations": { "production.../build-angular:tslint", "options": { "tsConfig": [ "projects/sf-lib...库开发后，我们可以通过以下命令进行库的构建： $ ng build --prod sf-lib 小伙伴们，在构建 Library 时，记得始终添加 —prod 标志。.../lib/sf-lib.module'; 这里需要说明的是，对于组件来说：设置 @NgModule 的 exports 属性是为了使得元素可见，而添加到public_api.ts 入口文件是为了使得 Class

2.4K1 0

Angular 结合 Git Commit 版本处理

So，我们接下来用 Angular 实现下效果，React 和 Vue 同理。搭建环境因为这里的重点不是搭建环境，我们直接用 angular-cli 脚手架直接生成一个项目就可以了。...:production": "npm run copyConfigProduction && npm run version", "build:development": "npm run copyConfigDevelopment...结合 Angular 在页面中展示版本信息最后一步，在页面中展示版本信息，这里是跟 angular 结合。...": "ng build", "build:production": "npm run copyConfigProduction && npm run version && npm run build...", "build:development": "npm run copyConfigDevelopment && npm run version && npm run build", "build

1K3 0

Spring Boot 整合 AngularJS

/build-angular:dev-server", "options": { "browserTarget": "angular:build"...}, "configurations": { "production": { "browserTarget": "angular:build...:production" } } }, "extract-i18n": { "builder": "@angular-devkit.../build-angular:extract-i18n", "options": { "browserTarget": "angular:build"..."production": { "devServerTarget": "angular:serve:production" } }

4633 0

Angular CLI 简介

否是(和AOT以及Angular5) --named-chunks 是否 --output-hashing media 所有下面命令都是针对开发时的build, 它们的作用是一样的: ng build...build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap...Build target --dev 表示dev env和target --prod 表示prod env和target Production Build....CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html 第四篇文章时: “使用Angular CLI进行Build (构建) 和 Serve”: http...打开admin.component.spec.ts: 把这句话填上, 然后就没有错误了: NO_ERRORS_SCHEMA告诉angular忽略那些不识别的元素或者元素属性. ng test的常用参数

6K11 0

使用Angular CLI进行Build (构建) 和 Serve

因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的. 这时看一下文件目录, 并没有dist目录: ? 那么这些文件是怎么被serve的呢?...否是(和AOT以及Angular5) --named-chunks 是否 --output-hashing media 所有下面命令都是针对开发时的build, 它们的作用是一样的: ng build...build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap...Build target --dev 表示dev env和target --prod 表示prod env和target Production Build....执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了(可以使用source-map-explorer查看).

2.3K7 0

Angular 2.x折腾记：(2)初步认识angular2，不一样的开发模式

/core'; // app启动引导模块，必须引入 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'.../environments/environment'; if (environment.production) { enableProdMode(); } // 引导程序启动 platformBrowserDynamic.../core'; @Component({ selector: 'app-root', // 自定义元素 templateUrl: '..../platform-browser'; // 这也是一个装饰器，用来定义模块和组件相关的，比如服务，组件元素，指令，导入导出模块的识别 // 每个模块的定义必须有这个才能生效，...ng2的开发模式就是类似一个树，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定

1031 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

/core'; // app启动引导模块，必须引入 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'.../environments/environment'; if (environment.production) { enableProdMode(); } // 引导程序启动 platformBrowserDynamic.../core'; @Component({ selector: 'app-root', // 自定义元素 templateUrl: '..../platform-browser'; // 这也是一个装饰器，用来定义模块和组件相关的，比如服务，组件元素，指令，导入导出模块的识别 // 每个模块的定义必须有这个才能生效，ng2的开发模式就是类似一个树...，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定，不然会报错

6.2K2 0

Angular CLI 常用终端操作命令

代表的热重载的端口号 ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153 关于CLI生成路由 ---- CLI以多种方式支持路由：初始化创建项目时，...您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...=production或--target=development ）和环境文件。...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些...更多angular-cli配置 https://github.com/angular/angular-cli/wiki 组件| ng g component my-new-component 指令|

2.1K4 0

docker学习系列19 容器化Angular项目

-proxy-config=proxy.conf.json --configuration=local --host 0.0.0.0 然后再添加.dockerignore文件，指定构建docker镜像时不希望发送给...node_modules .git 构建镜像 docker build -t angular-demo ....docker-compose相关命令 # build镜像并后台启动 docker-compose up -d --build docker-compose run angular-demo ng test...###### ### production ### ################## # base image FROM nginx:1.13.9-alpine # copy artifact...打包镜像-f表示指定文件，docker build -f Dockerfile-prod -t angular-demo-prod .

1.6K6 0

【17】进大厂必须掌握的面试题-50个Angular面试

Angular支持创建以下内容的自定义指令：元素指令 -当遇到匹配的元素时，指令将激活。属性 -当遇到匹配的属性时，指令将激活。...当您尝试将对象创建的逻辑与使用对象的逻辑分开时，依赖注入的概念会派上用场。“ config”操作使用DI，在加载模块以检索应用程序的元素时，必须预先配置DI。...当Angular找到ng-app指令时，它将加载与其关联的模块，然后编译DOM。手动引导：手动引导为您提供了有关如何以及何时初始化Angular应用程序的更多控制。...它表示Angular应用程序的根元素，通常在或标签附近声明。在HTML文档中可以定义任何数量的ng-app指令，但是只有一个Angular应用程序可以被隐式地正式引导。其余应用程序必须手动引导。...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素，以在单击按钮时隐藏HTML元素。

41.3K5 1

AngularJS入门心得3——HTML的左右手指令

指令就是一些附加在HTML元素上的自定义标记（可以是属性A、元素E、css类C），可以通过AngularJS的HTML编译器（$compile）对这些标记附加指定的行为，或者操作DOM、改变DOM元素等...doctype html> Example - example-example11-production...doctype html> Example - example-example11-production...这样做可以更容易地看出一个元素是跟哪个指令匹配的。举例来说：　　（1）通过元素匹配　　index.html： <!...); 在html中声明元素标签，在js中通过”restrict：‘E’”表示是通过元素来匹配。

3.2K5 0

AngularDart4.0 指南- 显示数据顶

当这些属性改变时，Angular会更新显示。更准确地说，重新显示是在与视图相关的某种异步事件之后发生的，例如按键，计时器完成或对HTTP请求的响应。... 当您使用AppComponent类（在web / main.dart中）引导时，Angular将在index.html中查找，查找它，实例化AppComponent...元素中的* ngFor是Angular“repeater”指令。...Angular ngIf指令根据布尔条件插入或删除一个元素。...当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。如果有三个或更少的项目，Angular会忽略该段落，所以不会显示任何消息。

5.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭