Angular App (PWA)在ng服务器中运行，但不使用http-server

Angular App (PWA)是一种使用Angular框架开发的渐进式Web应用程序（Progressive Web App）。它结合了Web应用程序和原生应用程序的优点，可以在各种设备上提供类似原生应用程序的体验。

在ng服务器中运行Angular App (PWA)时，可以选择不使用http-server。相反，可以使用Angular CLI（Command Line Interface）提供的内置开发服务器来运行应用程序。Angular CLI是一个命令行工具，用于创建、构建和管理Angular项目。

使用Angular CLI运行Angular App (PWA)的步骤如下：

确保已经安装了Node.js和Angular CLI。可以通过运行以下命令来检查它们的安装情况：
确保已经安装了Node.js和Angular CLI。可以通过运行以下命令来检查它们的安装情况：
在命令行中进入Angular App (PWA)的根目录。
运行以下命令来启动开发服务器：
运行以下命令来启动开发服务器：
这将启动内置的开发服务器，并将应用程序运行在默认的本地开发环境中。
可以通过访问http://localhost:4200来查看应用程序运行的效果。

使用Angular CLI的内置开发服务器有以下优势：

方便快捷：无需安装额外的服务器软件，只需使用Angular CLI提供的命令即可启动开发服务器。
自动刷新：开发服务器会监视文件的更改，并在保存文件后自动重新加载应用程序，提高开发效率。
开发工具支持：开发服务器与Angular CLI紧密集成，可以使用CLI提供的其他功能，如代码生成、测试等。

Angular App (PWA)的应用场景包括但不限于：

响应式Web应用程序：Angular App (PWA)可以根据不同设备的屏幕大小和分辨率进行自适应布局，提供良好的用户体验。
离线访问：通过使用Service Worker技术，Angular App (PWA)可以在离线状态下继续运行，并提供基本的功能和内容。
桌面应用程序：借助Electron等工具，可以将Angular App (PWA)打包成桌面应用程序，使其具备更多的原生应用程序功能。

腾讯云提供了一系列与Angular App (PWA)开发和部署相关的产品和服务，包括：

腾讯云云服务器（CVM）：提供可靠的虚拟服务器实例，用于托管和运行Angular App (PWA)。
腾讯云对象存储（COS）：提供安全、可扩展的对象存储服务，用于存储Angular App (PWA)的静态资源文件。
腾讯云内容分发网络（CDN）：加速静态资源的传输，提供更快的访问速度和更好的用户体验。
腾讯云域名服务（DNSPod）：提供域名注册和管理服务，用于将域名与Angular App (PWA)关联起来。

更多关于腾讯云相关产品和服务的详细信息，请访问腾讯云官方网站：腾讯云。

相关·内容

Angular 多项目管理

今天，我们谈谈，怎么使用 Angular 来管理多个项目呢？...在平常的开发中，我们一个项目建立一个仓库，不仅维护起来难，而且那个"无穷大"的 node_modules 也太尴尬了吧，多个项目多份 node_modules，要是同类型的项目，使用同份 node_modules...angular.json 就是默认导出了该项目： "defaultProject": "jimmy-demo" 很好，现在我们知道了，我们运行 ng serve 是运行导出的默认的文件。...调整后的 jimmy-demo 目录如下：然后我们更改下 app01 在 angular.json 中文件，完整的文件见 app01 项目的 angular.json 文件然后更改下 app01/...最后，我们模拟下发布查看： http-server -p 8081 dist/app01 http-server -p 8082 dist/app02 效果如下动图：参考 NG-ZORRO http-server

2483 0

Angular 工具篇之npx及angular-cli-ghpages

这是构建工具（如 Create React App 或 webpack CLI）所使用的方式。它确保你始终使用最新版本的生成器或构建工具，而无需在每次使用它时进行升级。...另一个示例是在当前目录下启动一个 http-server 服务器： $ npx http-server 运行不同版本的包假设我们需要使用最新版的 uglify-js： $ npx uglify-js.../dist/main.js angular-cli-ghpages 在使用 angular-cli-ghpages 前，请确保本地已经安装了 Node.js 及 Angular CLI。...首先你需要运行一下命令安装 angular-cli-ghpages： $ npm i angular-cli-ghpages --save-dev 假设你已经完成项目的开发，在发布到 Github Pages...或者使用以下命令： $ ng build --prod --base-href "/REPOSITORY_NAME/" 在项目构建完成后，就可以通过以下的命令自动地把本地项目发布到 Github Pages

1.9K2 0

AngularDart4.0 高级-部署顶

4.6K1 0

Angular 6正式版发布，都有哪些新功能

在Angular 5发布半年之后，Angular 6在昨天正式发布，那么在这个版本有哪些新功能呢？新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。...例如，命令ng update @angular/core将会更新所有的 Angular 包以及 RxJS、FTypeScript，它还将在这些包中运行可用的 schematics 以保证版本是最新的。...你可在新的ng new应用程序中尝试以下动作： ng add @angular/pwa：添加一个 app manifest 和 service worker，将你的应用程序变成 PWA。...创建ng add的示例如下：Angular Metarial 的 ng add schemetic Angular Elements Angular Elements 的第一个版本专注于在现有的 Angular...Angular Material 初始组件一旦运行ng add @angular/material并添加材料到现有的应用程序中，就能够生成 3 个新的初始组件。

4.2K2 0

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

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案，它就是 Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。...你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用，并且在一个 Web 服务器上运行这个 Universal 应用。...renderModuleFactory 在模板中的标记中渲染出哪个视图，并为客户端创建一个完成的 HTML 页面。最后，服务器就会把渲染好的页面返回给客户端。...在实践中，你可能要使用一个着陆页的静态版本来保持用户的注意力。同时，你也会在幕后加载完整的 Angular 应用。...它是在这个服务器上运行时才需要的一些可选的 Angular 依赖注入提供商。当你的应用需要那些只有当运行在服务器实例中才需要的信息时，就要提供 extraProviders 参数。

4.7K10 0

Angular 5 快速入门与提高

在5这个新的版本中，Angular团队将改进重点放在以下特性方面：更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp 使用构建优化器剔除无用代码，以获得更小的应用...为了区别于JavaScript语言本身的模块概念，在本课程中将使用__NG模块__来表示一个Angular模块。类似于组件，NG模块就是一个应用了NgModule装饰器的类。...NG模块，要么是已经在declarations元数据中声明的本地组件。...Angular希望让应用可以跨越浏览器、服务器等多个平台（基本）直接运行。因此免不了抽象一个中间层出来，我们需要在应用中显式地选择相应的平台实现模块： ?...在早期，Angular 只有即时编译（JIT：Just In Time），也就是说应用代码是在运行时编译的。

1.8K2 0

【AngularJS】—— 13 服务Service

本篇文章会介绍一下的内容：　　1 $http这种Angular提供的服务的使用　　2 如何自定义服务，并总结服务需要注意的几个小点。　　...这样就需要使用web容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同： ...在js中，创建一个模板，在模板上创建控制器。...nodejs的http-server，启动后在网页中输入相应的URL查看结果： ? 　　...：由于可以在服务中抽取公共调用的方法，因此可以把多个控制器中相同的功能抽取出来，形成一个服务。

1.4K5 0

在使用angular2中使用nodejs创建服务器,并成功获取参数

首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...; 安装nodemon 可以让服务器自动重启, 方法:npm install nodemon; 在启动服务器的时候用:nodemon build/...js; 这样服务器就算启动完成了. /** *...("/api/products",(req,res)=>{ res.json(products) }) app.get("/api/products/:id",(req,res)=>{ //在命令行中打印...中引入过了,这里需要声明在构造函数里头,并引入Http from "@angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务器上的数据: 接下来还有配置: 在根目录新建一个文件:proxy.conf.json... 内容为: { "/api":{ "target":"http://localhost:8000" } } 然后在package.json文件中,修改一行 "start": "ng serve

4.3K7 0

electron 运行 dist 文件

electron 中整合打包的 dist 文件我们运行 dist 文件，其实就是起一个本地服务就行了。这里，我们使用 http-server 来运行。...PS：当然，我们也可以使用 koa，express 等假设我们已经安装好了 http-server 依赖，那么，我们进入项目根目录，直接执行 http-server -p 8082 dist/ 就可以在浏览器...那么，我们怎么在 electron 中运行它呢？...在 electron 应用 ready 之后，我们开启服务： const { createServer } = require('http-server'); app.whenReady().then...我们 npm run start 运行之后，项目的效果如下图：参考 Ant Design of Angular 创建您的第一个 electron 应用程序 http-server

5422 0

AngularJS应用页面切换优化方案

葡萄城的一款尚在研发中的产品，对外名称暂定为X项目。其中使用了已经上市的Wijmo中SpreadJS产品，另外，在研发过程中整理了一些研发总结分享给大家。...有一种非常常见的场景：在切换至新页面后，需要通过AJAX调用从服务器请求一些数据，然后根据这些数据来展示页面。...场景让我们以Angular官方给出的 PhoneCat Tutorial App来说明这个问题。...我们可以对ng-view应用AngularJS动画，在phone-cat项目中，animation.css中的下列代码实现了切换页面的淡入淡出动画： .view-frame.ng-enter, .view-frame.ng-leave...应用中，为了获得良好的用户体验，就要在界面上使用一些技巧让用户不会感觉到突兀。

1.9K10 0

使用 vue 创建你的第一个 PWA 应用

但是相对于桌面的 APP 来说，普通的网站没有独立的入口和离线使用的能力，PWA 技术的出现刚好弥补了这些差距，甚至在某些方面做到了比 APP 更好，毕竟 Web 可以很方便的更新。.../src", import.meta.url)), }, }, }); App_icon192.png 这些文件可以自己放不同大小的图片 Logo ，会不同的平台使用，图片我们放在项目中中的.../zh-CN/docs/Web/Manifest 打包测试 npm run build npx http-server dist 通过打包和启动 http-server 服务器我们就可以在本地访问我们的...其他相关经过几番摸索和尝试也发现了一些实际使用中的情况，或许随着时间的推移或因个体差异会有些出入，还请指正，这里就分享出来大家可以做个参考。...1.在微信中打开 PWA 也是可以缓存的，可以离线使用，但是大概40分钟左右就没有了。

1.4K2 1

Angular8稳定版修改概述

它不是完全正常运行（选择预览），正如Igor Minar在ngConf 2019中建议的那样，视图引擎仍然推荐用于新应用。...”： {“enableIvy”：true} 您也可以使用新引擎创建新应用程序 ng new my-app --enable-ivy Ivy将提供以下优势，Angular 9中预计前3个功能：编译速度更快...ng new my-app --colection = @ angular / bazel Builders API 新版本允许我们使用Builders API，也称为Architect API。...运行以下命令以使用Angular CLI生成新的Web worker： ng g webWorker Service Worker 随着PWA的使用日益增长，对Service Worker...您可以运行ng update @angular/core以迁移现有代码。 Angular Material Angular Material工程重命名为Angular Components。

4.5K2 0

5-2 PWA 的打包配置

简介 PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。 2....image.png 进入 dist 文件，开启一个服务： cd dist http-server -p 8080 打开网页后如图： ? image.png 然后我们关闭服务器，刷新页面，如图： ?...image.png 此时我们无法在访问页面资源。 3. PWA 如何保证网页在离线时仍然能正常展示呢？...image.png 停掉服务器后，刷新页面如下： ? image.png 发现依然能够访问。 4....参考 GitChat · 前端 | Webpack 工程的 PWA 实战 Workbox 3.0 – Web 站点轻松做到离线可访问 webpack 中使用 workbox 实现 PWA 2019

1.3K1 0

@vuecli-plugin-pwa 中文翻译

使用此插件添加的Service Worker仅在生产环境中启用（例如，仅当您运行“npm run build”或“yarn build”时）。...相反，在开发模式中noopServiceWorker.js会包括在内。...如果需要在本地测试service worker，请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性，推荐新打开一个窗口。...field in package.json. pwa插件的配置是通过在vue.config.js文件或者package.json文件"vue"字段里修改pwa属性 ---- pwa.workboxPluginMode...在生成的HTML中的manifest链接标记中为’ crossorigin '属性的值。如果您的PWA位于经过身份验证的代理之后，您可能需要设置此选项。请参阅跨源值了解更多细节。

1.3K3 0

第214天:Angular 基础概念

）使用 CDN 上的 Angular.js + http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js （3）使用 Bower 安装 ...angular的库下载到当前文件夹中 6、angular的优势 Angular 最大程度的减少了页面上的 DOM 操作；让 JavaScript 中专注业务逻辑的代码；通过简单的指令结合页面结构与逻辑数据...） - ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系 8、运行官方文档由于众所周知的原因，Angular 官网打不开我们需要本地运行...Angular 文档下载最新的 Angular 包解压后有一个 docs 文件夹必须通过 http 服务器访问该文件夹可以通过 SublimeServer 或者 http-server 运行...比较：表达式作用类似于ng-bind指令建议更多的使用指令 AngularJS表达式很像JavaScript表达式它们可以包含文字、运算符和变量如 {{ 5 + 5 }} 或 {{ firstName

1.9K3 0

Angular CLI 创建你的第一个 Angular 示例程序

希望创建工作区和初始化应用项目：运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：ng new my-app ng new 会提示你要把哪些特性包含在初始的应用项目中。...第三步：启动开发服务器 Angular 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。进入工作区目录（my-app）。...使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。...看，你的应用正在使用一条消息欢迎你：第四步：编辑你的第一个 Angular 组件组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。...比如说在整理示例的代码中，你需要修改的文件名字为 app.component.css，但是在你的文件系统中，你可能只能知道 app.component.styl 这个文件。

1.1K4 0

PWA 入门: 写个非常简单的 PWA 页面

随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。...完整代码访问GitHub地址： https://github.com/minimal-xyz/minimal-pwa 准备工作建议安装 http-server 和 ngrok 以便调试和查看。...然后在 HTML 文件当中引入配置: 添加 Service Worker Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。...: 在新安装的 Service Worker 中通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。...注意: Demo 当中如果直接启动 http-server 而不使用 -c-1 关闭缓存, sw.js 可能被缓存住, 导致更新方案失败。

2.7K5 0

它比微信小程序早出现半年，却不曾引爆技术圈｜TW洞见

Alex写道：在昨天的晚餐上，我和Frances列举出了新型应用的几个特征：响应式：适应任何形态因素不依赖网络：在Service Worker（H5中的新技术，appcache的升级版）的支持下能够离线使用...2 PWA怎么用？一个PWA的使用过程大概是这样的：这货开始就是一个普通网页：然后，这是什么鬼？这网站看着还不错，那就接受吧！它出现在手机的首屏了，以后随叫随到！...本地应用可以推送通知，而Web应用只有在浏览器打开状态下才行本地应用可以离线使用，只要做适当的设计就可以不受网络环境的影响本地应用可以访问更加丰富的功能，比如更大的本地存储空间那么，它们能否合二为一呢...特别是得益于Angular等SPA应用的普及，SPA不但响应更加快速，更加接近原生应用的操作体验，而且让我们可以完全不依赖服务器工作。...这是一个更强大的AppCache，它不仅能存储HTML/JS等静态文件，而且还让你能够在客户设备上运行起一个仿真的超轻量级Web服务器，你在里面已经几乎可以写Node程序了！

1.1K8 0

Angular CLI 常用终端操作命令

关于CLI生成路由 ---- CLI以多种方式支持路由：初始化创建项目时，自动添加了 @angular/router ，自动添加到package.json 文件中生成模块路由的时候可以使用指令... ng g module my-module --routing ，在 src/app/my-module/ 目录下创建名叫 my-module...您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件中配置映射编译环境路径 //angular-cli.json...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些

2.1K4 0

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLI是Angular框架的命令行界面，用于在开发过程中在本地创建，构建和运行应用程序。它旨在在开发服务器上构建和测试Angular项目。...#install PM2 第3步：使用Angular CLI创建Angular项目现在进入服务器的webroot目录，然后使用Angular CLI创建，构建和提供Angular应用程序（称为sysmon-app...$ cd sysmon-app $ sudo ng serve 使用Angular CLI提供Angular App 从ng serve命令的输出中，您可以看到Angular应用程序未在后台运行，您无法再访问命令提示符...终止正在运行的Angular App 第4步：使用PM2永远运行Angular项目要使新应用程序在后台运行，请释放命令提示符，使用PM2为其提供服务，如图所示。...$ pm2 start "ng serve" --name sysmon-app 永远运行Angular App 接下来，要访问应用程序的Web界面，请打开浏览器并使用地址http://localhost

2.9K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云