开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我运行命令"ng build“时，我不能从浏览器输入路径，只能通过内部导航

当你运行命令 "ng build" 时，它会使用 Angular CLI (Command Line Interface) 构建你的应用程序。该命令用于将 Angular 项目编译为可在浏览器中运行的静态文件。执行该命令后，你无法直接通过浏览器输入路径来访问应用程序，而是需要通过内部导航机制来导航到不同的页面。

内部导航是指在单页应用（Single-Page Application，SPA）中，通过在前端路由中定义路由器和路由来管理应用程序的页面切换和导航。它使用 HTML5 的 History API 或哈希路由（Hash Routing）来实现。通过内部导航，你可以在应用程序中的不同页面之间进行导航，而无需每次都向服务器发送请求。

下面是一些相关概念和技术：

单页应用（Single-Page Application，SPA）：一种基于 Web 的应用程序类型，它通过动态加载页面内容，使用前端路由来实现页面切换，无需每次刷新整个页面。
前端路由（Front-end Routing）：一种管理单页应用页面切换和导航的技术，通过在前端定义路由器和路由，实现在不同页面间的无刷新导航。
HTML5 的 History API：一组浏览器 API，允许 JavaScript 通过修改浏览器历史记录来改变页面 URL，实现无刷新的页面导航。
哈希路由（Hash Routing）：一种旧的前端路由技术，通过在 URL 中使用哈希符号（#）和哈希值来模拟不同页面的导航。

在 Angular 中，你可以使用 Angular 的路由模块来实现内部导航。你需要定义路由器和路由配置，然后在组件中使用 routerLink 指令或编程式导航来触发导航操作。

以下是一些腾讯云相关产品和产品介绍链接，可以帮助你构建和部署 Angular 应用：

腾讯云云服务器（CVM）：提供可扩展的虚拟云服务器，用于托管和运行应用程序。了解更多：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全可靠的云存储服务，用于存储和管理静态文件（如编译后的 Angular 应用）。了解更多：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：加速静态资源的传输，提高用户访问应用程序的速度和性能。了解更多：https://cloud.tencent.com/product/cdn

请注意，这里只提供了腾讯云作为一个例子，也许还有其他云计算品牌商可以提供类似的产品和服务。

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

有帮助

没帮助

相关·内容

Angular CLI 使用教程指南参考

项目,默认在当前所在目录下参数描述 --dry-run -d 只输出要创建的文件和执行的操作，实际上并没有创建项目 --verbose -v 输出详细信息 --skip-npm 在项目第一次创建时不执行任何...在当前所在目录下初始化一个新的 Angular 项目参数描述 --dry-run -d 只输出要创建的文件和执行的操作，实际上并没有创建项目 --verbose -v 输出详细信息 --skip-npm 在项目第一次创建时不执行任何... 在浏览器中打开Angular文档并搜索当前关键字 ng e2e 命令描述 ng e2e 使用protractor在当前应用中运行e2e测试 ng format 命令描述 ng...只能用于路由命令。 --default 指定路由应为默认路由。 --lazy 指定路由是延迟的。默认为true。...CLI配置中设置值默认情况下，如果在项目内部运行，则设置项目配置中的值，如果不在项目内部，则失败。

3K5 0

用uniapp开发跨端应用开发打包发布完整指南

”和“发行”的菜单，直接点击：运行 —— 运行到内置浏览器，可以直接像在浏览器里一样调试。...运行项目运行项目通过HBuilderX顶部菜单：运行 - 运行到...，开发阶段可先选择：运行到内置浏览器，如果有报错缺少xx插件，直接根据提示去安装对应插件，再重新运行就可以了。...上传到应用市场供用户下载也可以自己开发一个发布页，将安卓apk放到项目里，用户点击直接下载到手机里，如果设备是ios还可以直接判断让跳转到appstore下载地址 4、IOS ① 正式版本 ios正式应用只能从.../java/javase/downloads/index.html（记住安装的路径，后面生成证书的时候要用到）打开命令行（cmd），可以先切换到要生成的目录下，我直接在D盘根目录下生成输入： d: 3...，我这里刚开始路径里 Programs 就少了个s，后面就一直报错：keytool不是内部或外部命令，也不是可运行的程序 4、使用keytool -genkey命令生成证书 keytool -gen key

6111 0

用uniapp开发跨端应用开发打包发布完整指南

四、新建和运行项目先安装一些常用的插件：内置浏览器uni-app（Vue2）编译uni-app（Vue3）编译App调试App真机运行App云打包scss/sass编译stylus编译通过HBuilderX...上传到应用市场供用户下载 * 也可以自己开发一个发布页，将安卓apk放到项目里，用户点击直接下载到手机里，如果设备是ios还可以直接判断让跳转到appstore下载地址4、IOS① 正式版本ios正式应用只能从.../java/javase/downloads/index.html（记住安装的路径，后面生成证书的时候要用到）打开命令行（cmd），可以先切换到要生成的目录下，我直接在D盘根目录下生成输入：d:3、将JRE...安装路径添加到系统环境变量我的JRE装在D盘下 "D:\Programs\jre\bin"set PATH=%PATH%;"D:\Programs\jre\bin"注意这里安装路径不要写错了，我这里刚开始路径里...Programs 就少了个s，后面就一直报错：keytool不是内部或外部命令，也不是可运行的程序4、使用keytool -genkey命令生成证书keytool -genkey -alias testalias

2.4K5 1

Angular CLI 简介

下面我生成一个项目, 并且执行npm install: 命令执行完, 可以看到如下的项目结构; 里面有node_modules目录了, 也就是所有的包都安装好了, 接下来我可以运行该项目了: ng...前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set 来配置cli....: ng g c admin ng g c admin/email -m admin ng g c admin/user -m admin 实际上后两个命令的-m参数可以去掉, 因为已经指定了路径 admin...所以执行ng e2e: 测试通过, 但是浏览器闪了一下就关闭了....如果我想debug e2e, 那么执行这个命令: ng e2e -ee 由于我使用的是mac, 当前这个命令在mac上貌似确实有一个bug: 如果可以正常运行这个命令的话, 终端窗口会出现“Debugger

6.1K11 0

使用 Github Actions 自动部署 Angular 应用到 Github Pages

整个项目中所涉及的 npm 命令，我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...当 build 命令执行完成后，项目根路径下 dist 文件夹中以项目名称命名的文件夹就是我们需要部署的文件。...此时，如果是部署到自己的服务器上，只需要把这个文件夹拷贝到服务器上，通过 nginx 之类的服务器指向文件所在路径即可同样的，当我们想要部署到 github page 时，我们也只需要将文件提交到 github...而当我们将程序部署到 github page 时，实际对应的网站地址是 https://.github.io/，因此，这里如果不指定 href 的话，...以后当我们需要更新网站时，再使用上面的命令即可发布到 github page 上 ?

1.4K1 0

Angular学习（02）--Angular-CLI命令

还有一些没用过，也不大清楚的命令，后续再补充常见命令其实，这么多命令中，我最常使用的，就只有 ng g 命令，也就是 generate 命令，用来生成各种类型的文件代码，比如生成组件、生成服务等。...还有，运行项目时，会使用 build 或 server 命令。所以，下面就只介绍这三个命令，其他命令，等到后续有接触，深入了解后再补充。...ng g component ng g component xxx 是用来创建组件的，直接使用该命令，会默认在当前目录下创建一个 xxx 文件夹，并在内部创建以下几个文件： xxx.component.css...ng build 该命令用来将 Angular 项目编译、打包输出到指定目录下，最终输出的文件就是些 HTML，CSS，JavaScript 这些浏览器能够识别、运行的文件。...那么，这种时候就不能用 ng server 命令了，只能使用 ng build 命令，但该命令，默认只是编译项目，那么岂不是每次代码发生修改，都得重新跑一次 ng build 命令？

2.6K1 0

如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

您可以通过在命令提示符中运行以下命令来确保系统上安装了 Node，该命令应显示已安装的 Node 版本： $ node -v 接下来，运行以下命令来安装 Angular CLI： $ npm install...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...生成项目您可以使用 Angular CLI 通过在命令行界面中运行以下命令来快速生成 Angular 项目： $ ng new frontend 注意：frontend是项目的名称。...，您可以通过输入 y（是）或 n（否）来回答，这是默认选项。它还会询问您要使用的样式表格式（例如 CSS）。选择您的选项并按 Enter 键继续。...首先导航到项目的文件夹中并运行以下命令： $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序。

4760 0

如何在 Ubuntu 20.04 上安装 Go

首先，通过ssh以下方式连接到您的 Ubuntu 服务器： ssh sammy@your_server_ip 接下来，导航到Web 浏览器中的官方 Go 下载页面。...如果您已完成代码并希望在不每次编译的情况下运行它，您可以使用go build将代码转换为可执行的二进制文件。...在出现提示时成功打印，您无需再次编译该程序。试一试并运行go build。确保从hello.go存储文件的同一目录运行它： go build 接下来，运行....但是，您只能从该目录中调用此二进制文件。如果您想从服务器上的不同位置运行此程序，则需要指定二进制文件的完整文件路径才能执行它。键入二进制文件的完整文件路径很快就会变得乏味。...但是，您只能从该目录中调用此二进制文件。如果您想从服务器上的不同位置运行此程序，则需要指定二进制文件的完整文件路径才能执行它。键入二进制文件的完整文件路径很快就会变得乏味。

1.4K2 0

教程|在 Angular 4 中加载功能模块（上）

前提条件要掌握本教程，需要在开发机器上安装两个工具： Node Angular CLI 输入命令 ng -v，以便找到您当前使用的 Angular CLI 和 Node 的版本。...我的目录名为 …/fm。 3. 转到 …/fm 目录并输入命令 npm i。这会在 …/fm 文件夹中创建 node_modules 目录，即 …/fm/node_modules。 4....运行命令 ng serve。您会看到应用程序在默认端口 4200 中成功运行，以及一条与此消息类似的消息：图 1....应用程序运行在端口 4200 ng 是一条 Angular CLI 命令，您将使用它构建和处理应用程序代码。打开 Chrome 浏览器并输入 URL http://localhost:4200。...如果未指定路径，数组中的第一项会重定向到 /markets 路径。要确认目前实现的应用程序功能，可在浏览器中返回到 http://localhost:4200。

2.2K1 0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

一旦安装了它们，我们将通过运行以下命令来安装Angular CLI： npm install -g @angular/cli 安装成功后，我们可以通过运行以下ng new命令来生成一个新项目： ng new...如果我们将浏览器导航到该链接，它将如图所示显示： ? 那么，这里究竟发生了什么？...为此，我们通过运行以下命令来使用Angular CLI： ng generate component Card create src/app/card/card.component.scss (0...每次用户向我们的输入和浏览器输出中输入数据时input $event，我们都会将其分配newCard.text给输入值。在我们实现它之前还有一件事：这个输入看起来有点多，不是吗？...准备生产因此，让我们构建我们的应用程序供生产使用为此，我们运行build命令： ng build --aot -prod 65% building modules 465/466 modules

42.6K1 0

为了实践微前端，重构了自己的导航网站

笔者早期开发了一个导航网站，一直想要重构，因为懒拖了好几年，终于，在了解到微前端大法后下了决心，因为工作上一直没有机会实践，没办法，只能用自己的网站试试，思来想去，访问量最高的也就是这个破导航网站了，于是用最快的时间完成了基本功能的重构...效果如下：优化 1.返回按钮如上面的效果所示，微应用内部页面跳转后，如果要回到上一个页面只能通过浏览器的返回按钮，显然不是很方便，可以在标题栏上添加一个返回按钮： <div class="backBtn...<em>build</em><em>命令</em>，可以<em>通过</em>选项来修改打包行为： vue-cli-service <em>build</em> --target lib --dest dist_applets/stopwatch --name stopwatch...但是我们的组件是不定的，数量可能会越来越多，所以直接在<em>命令</em>行<em>输入</em><em>命令</em>打包会非常的麻烦，我们可以<em>通过</em>脚本来完成，在/applets/目录下新增<em>build</em>.js： // <em>build</em>.js const { exec.../src/applets/<em>build</em>.js" } } 运行命令npm run buildApplets，可以看到打包结果如下：我们使用其中css文件和umd类型的js文件，打开.umd.js文件看看

5532 0

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

可以先看帮助: ng build --help 针对开发环境, 就是用命令 ng build....webpack的运行时. main.bundle.js 就是程序代码. pollyfills.bundle.js 就是浏览器的Pollyfills. styles.bundle.js 样式 vendor.bundle.js...下面运行程序: ng serve -o: ? 可以看到在ng serve的时候, 加载了上述的文件. 因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的....是是 --build-optimizer 否是(和AOT以及Angular5) --named-chunks 是否 --output-hashing media 所有下面命令都是针对开发时的...通过文件大小可以看出确实是prod build的. ng eject. 为项目生成webpack配置和脚本. 执行该命令试试: ? 看看有哪些变化: .angular-cli.json: ?

2.3K7 0

Angular SSR 探究

一般来说，普通的 Angular 应用是在 浏览器 中运行，在 DOM 中对页面进行渲染，并与用户进行交互。...创建服务端应用只需要一个命令：ng add @nguniversal/express-engine重要建议在运行该命令之前先提交所有的改动。...- 添加开发、构建 SSR 应用所需要的配置在 package.json 中，会自动添加一些 npm 脚本：dev:ssr 用于在开发环境运行 SSR 版本；serve:ssr 用于直接运行 build...预渲染路径配置需要进行预渲染（预编译 HTML）的网页路径，可以有几种方式进行提供：通过命令行的附加参数:ng run :prerender --routes /product/1...products/555然后在命令行参数指定该文件： ng run :prerender --routes-file routes.txt在项目的 angular.json 文件配置需要的路径

10.3K5 1

Vitepress网站搭建教程

pnpm add -D vitepress初始化在文件夹cmd窗口输入命令，开始初始化vitepresspnpm vitepress init如果没有特殊情况，可以按照我这样来选择图片图片里面的“网站名称...index.js # 主题入口│ │ └─ config.js # 配置文件│ └─ index.md # 主页相关└─ package.json 启动在cmd里面输入下面命令就可以运行...export default { themeConfig: { siteTitle: '网站名称' }}如果站点有图标，则可以通过传递图片路径来显示它。...net' }, { text: '链接三', link: 'https://github.com/...' } ] }}text 是 nav 中显示的实际文本，而 link 是单击文本时将导航到的链接...首先在本地cmd窗口输入命令，build 生成一个静态网站pnpm run docs:build运行完成之后是这样子的然后在 .vitepress 目录会生成一个 dist 文件夹打开就会发现熟悉的 html

3711 0

想要成为前端Star 吗？一首歌时间将React Vue 应用Docker 化

以下的Dockerfile不参杂其它依赖，争取做到都能看懂： # 指定Node版本 FROM node:12.18.3 # 容器中应用程序的路径。...为应用构建Docker镜像首先确认你的Dcoker 正在运行。 ? 运行以下命令来构建Docker映像。react-docker 可以替换为你要为镜像命名的任何值。...运行Docker + React/Vue 现在，使用以下docker run命令, 通过Docker在端口3000上运行React应用。...-t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用。 --rm:在容器退出时自动清理容器内部的文件系统，不懂可忽略 -p: 指定端口。成功运行： ?...在浏览器中导航到http://localhost:3000 以查看该应用程序。

9562 0

Angular2 ：从 beta 到 release4.0 版本升级总结

运行npm run build --prod命令失败原因：basically the problem is in AOT and Angular analyzer....解决办法：1) -prod => --prod --aot=false 2) -prod => --env=prod（可查看ng build -prod Module not found: Error:.../$$_gendir/app/app.module.ngfactory’ #4551） PS：运行代码可通过：即时JIT编译器动态引导、使用预编译器（ AoT - Ahead-Of-Time ）两种方式...在webstorm里，更改文件不能在浏览器中更新输出。原因：webstorm里面默认启用”safe write”，将保存先存到临时文件。...原因：angular-cli内部封装了webpack配置，若手动改动node_modules不方便。

8.2K0 0

Angular CLI 常用终端操作命令

CLI常用命令 ---- ng new project-name - 创建一个新项目，置为默认设置 ng build - 构建/编译应用 ng test - 运行单元测试 ng e2e - 运行端到端（...您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...关CLI构建编译项目 ---- 输入命令 ng build 来编译项目，生成编译后的文件存放目录在项目根目录下 dist/ 目录下面关于...//cmd命令 //编译 angular-cli.json 文件配置传的参数来编译不同服务端的文件如执行下面命令编译的是json文件中 envuronments.loca 配置的文件路径...我们通过传递一个文件来做到这一点 --proxy-config 比如说我们有一台服务器正在运行 http://localhost:8080/api ，我们希望所有的请求都到

2.1K4 0

新手入门系列之-React Vue 应用持续集成Docker 化

以下的Dockerfile不参杂其它依赖，争取做到都能看懂： # 指定Node版本 FROM node:12.18.3 # 容器中应用程序的路径。...为应用构建Docker镜像首先确认你的Dcoker 正在运行。 ? 运行以下命令来构建Docker映像。react-docker 可以替换为你要为镜像命名的任何值。...运行Docker + React/Vue 现在，使用以下docker run命令, 通过Docker在端口3000上运行React应用。...-t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用。 --rm:在容器退出时自动清理容器内部的文件系统，不懂可忽略 -p: 指定端口。成功运行： ?...在浏览器中导航到http://localhost:3000 以查看该应用程序。

1.6K2 0

使用Angular CLI生成 Angular 5项目

scripts下面是一些预定义的项目命令: start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以. npm build / ng build 是执行构建......里面有node_modules目录了, 也就是所有的包都安装好了, 接下来我可以运行该项目了: ng serve -o 其中的-o(--open)参数表示运行项目的时候打开默认浏览器. ?...前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set 来配置cli....但是如果新生成的项目不指定ng new的参数情况下, 默认就会采用全局的配置: ? Lint: 使用命令ng lint. 首先可以查看一下帮助: ng lint --help ?...首先我针对上面的my-app6执行ng lint: ? 没有问题. 然后我故意弄出来几处错误/不规范的写法: ? 然后再执行ng lint: ? 可以看到这些错误都被详细的列了出来.

1.9K3 0

挖了一条网络隧道，差点被公司激活

隧道本地转发当开发机的Mysql只能从跳板机连上，我怎么才能跳过跳板机来访问远程Mysql呢？...root@跳板机解释为，当访问本机的9527的端口时，被加密后转发到跳板机的ssh服务，服务器的3306端口注意的点 SSH 端口转发是通过 SSH 连接建立起来的，我们必须保持这个...嗯，比如说用浏览器，比如说 MSN 等等。同时当我们在一个不安全的 WiFi 环境下上网，用 SSH 动态转发来保护我们的网页浏览及 MSN 信息无疑是十分必要的。...switchyOmega 如果是普通命令行应用，使用proxychains-ng，参考命令如下： brew install proxychains-ng vim /usr/local/etc...-N 不执行远程命令.用于转发端口.

3.2K18 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭