使用ng serve或npm start时，Angular 4将无法识别位于资源/图像文件夹中的某些图像

Angular 4在使用ng serve或npm start时，无法识别位于资源/图像文件夹中的某些图像的原因是，Angular默认只会处理src/assets文件夹中的资源文件，而资源/图像文件夹并不在默认的资源文件夹中。

要解决这个问题，可以按照以下步骤进行操作：

在Angular项目的根目录下，创建一个新的文件夹，命名为"assets"（如果还没有该文件夹的话）。
将资源/图像文件夹中的图像文件复制到新创建的assets文件夹中。
在Angular项目的根目录下的angular.json文件中，找到"assets"属性，将新创建的assets文件夹添加到该属性的数组中。示例代码如下：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

保存angular.json文件。
重新运行ng serve或npm start命令，Angular 4应该能够正确识别并加载位于资源/图像文件夹中的图像文件了。

这样做的好处是，通过将图像文件放置在assets文件夹中，Angular会将这些文件打包到最终的构建文件中，使得这些图像文件可以在应用程序中正确地被引用和加载。

对于腾讯云相关产品的推荐，可以使用腾讯云对象存储（COS）来存储和托管这些图像文件。腾讯云对象存储（COS）是一种高可用、高可靠、低成本的云存储服务，适用于存储大量非结构化数据，如图像、音视频、文档等。您可以通过以下链接了解更多关于腾讯云对象存储（COS）的信息：

腾讯云对象存储（COS）产品介绍：https://cloud.tencent.com/product/cos

希望以上信息对您有所帮助！

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

有帮助

没帮助

相关·内容

Angular10配置webpack打包「详细教程」

添加ngx-build-plus： ng add ngx-build-plus npm 包管理器 Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能，它们都是...ng serve --open 1 ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。...除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。...其子文件夹中包含应用源代码和应用的专属配置。应用支持文件目的 app/ 包含定义应用逻辑和数据的组件文件。 assets/ 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。...test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。 priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。

4.8K2 0

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

build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...我们看看各个文件的作用： /e2e/：包含网站的端到端（模拟用户行为）测试 /node_modules/：使用 npm install 将所有 3rd 方库安装到此文件夹 /src/：包含应用程序的源代码...大部分工作将在这里完成 /app/：包含模块和组件 /assets/：包含图像、图标和样式等静态资源 /environments/：包含环境（生产和开发）特定的配置文件 browserslist：autoprefixer...因此，您不需要安装本地服务器来为您的项目提供服务 —您可以简单地从终端使用 ng serve 命令在本地为您的项目提供服务。...首先导航到项目的文件夹中并运行以下命令： $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序。

1510 0

怎样切换不同版本的 Node

安装程序会将 NVM 放在计算机上相应的文件夹中，并更新系统环境变量，以便可以在命令行使用 nvm 和将来要安装的 node。...install 24... 25D:\application1>npm start 26> application1@0.0.0 start D:\application1 27> ng serve...例如，如果在一个版本的 Node 上全局安装软件包，则该软件包将无法在其他版本的 Node 上使用。...如果你还没有安装 Node 或 npm，可以用 GitHub 中的 bash 脚本安装 n。这是它的样子：提示：你必须安装 Git 才能使用 bash 脚本安装 n。...install 11... 12~/application1$ npm start 13> application1@0.0.0 start ~/application1 14> ng serve 15

4.1K3 0

Angular CLI 简介

看看整个的项目结构, 以及package.json: scripts下面是一些预定义的项目命令: start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以. npm...因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的. 这时看一下文件目录, 并没有dist目录: 那么这些文件是怎么被serve的呢?...--proxy-config -pc 代理配置 --prod 在内存中serve 生产模式build的文件试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod...可以对项目更深入的配置.... 这时运行程序就是 npm start了. 我还是把reject恢复回去吧, 使用git来恢复吧....可以看一下spec list: 这时因为运行测试的时候, admin模块是独立运行的, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?

6K11 0

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

要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令： npm install -g @angular/cli 第二步：创建一个工作区和初始化应用 Angular 工作区就是你开发应用的上下文环境...每个工作区包含一些供一个或多个项目使用的文件。每个项目都是一组由应用、库或端到端（e2e）测试构成的文件。...使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。...cd my-app ng serve --open ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。...如果因为某些原因，你计算机中的 4200 端口被占用了，你可能希望你的这个应用在不同的端口上被启动。

1.1K4 0

Angular CLI命令

ng 基础命令 npm install –g @angular/cli npm install -g @angular/cli@latest ng serve –prot –aot 启动项目并压缩项目文件...ng build 项目打包命令，也可以加上–prot –aot 新建项目 ng new 项目名称它将运行一段时间，进行npm依赖的安装，安装成功后我们将看到 Installed packages...使用vs code打开刚刚创建项目的文件夹 ? 运行应用 ng serve 编译并运行应用，如果一切正常会出现以下信息 ? 如果出现 ?...端口被占用错误，请使用 ng serve --port 4211 //4211为替换默认4200的端口出现以下消息表示运行成功： ?.../ 4.OnInit能帮我们在组件的初始话阶段运行某些代码。

9102 0

Angular CLI 常用终端操作命令

关于CLI生成路由 ---- CLI以多种方式支持路由：初始化创建项目时，自动添加了 @angular/router ，自动添加到package.json 文件中生成模块路由的时候可以使用指令...该--routing选项还会生成与模块名称相同的默认组件。您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些..." 属性然后修改为 ng serve --proxy-config loca.conf.json "scripts": { "start": "ng serve --proxy-config...loca.conf.json", }, 然后我们运行我们的项目 npm start 这样我们所有http://localhost:8080/api 下面的请求都可以通过

2.1K4 0

Angular开发实践（一）：环境准备及框架搭建

引言在工作中引入Angular框架将近一年了，在这一年中不断的踩坑和填坑，当然也学习和积累了很多的知识，包括MVVM框架、前后端分离、前端工程化、SPA优化等等。...angular-cli npm install -g @angular/cli IDE推荐使用WebStorm 框架搭建 angular-start是我在GitHub上维护的一个起步项目，你可以直接下载作为基础开发框架来使用...你可以通过以下几步快速启动并进行开发： git clone https://github.com/laixiangran/angular-start.git cd angular-start npm install...（等待依赖包安装完成，再进行下一步） npm start 为了启动方便，在package.json的scripts配置了"start": "ng serve --hmr -o --proxy-config...可能你还想了解下该项目中的文件都是干什么用的，那么我们就来了解下。项目文件概览 src文件夹应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及应用所需的任何东西都在这里。

1.3K7 0

Angular 从入坑到挖坑 - Angular 使用入门

对应官方文档地址：搭建本地开发环境和工作空间 ng new ng serve 工作区和项目文件结构配套代码地址：angular-practice/src/getting-started 二、Contents...验证是否安装成功 ## 查看 angular cli 版本 ng v ## 查看 angular cli 中的各种命令解释 ng help ?...解释 --force 强制覆盖现有文件 --skipInstall 创建项目时跳过 npm install 命令 --strict 在代码中使用更严格的 typescript 编译选项 ?...- 基于 node.js 的 javascript 测试执行过程管理工具 package-lock.json - 针对当前工作空间使用到 npm 包，安装到 node_modules 时的版本信息...↩ 2 现代浏览器支持的某些原生 API，当用户使用老版本的浏览器或某些浏览器时并不支持，只要使用了 polyfills 这个库，即可对于这些无法使用的浏览器添加支持，使用方法也无需更改（PS：针对的是原生的

1.9K2 0

Angular-Cli脚手架介绍、安装并搭建项目

如果你刚开始学习前端或者 Angular ，将框架作为你的第一步可能不是最好的主意 —— 掌握好基础知识再来吧！...执行以下命令，@angular/cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。...$ ng serve --port 0 --open image.png 使用web工具打开项目我这里使用HBuilder来打开项目,其他工具也行 image.png ng serve 命令会启动开发服务器...安装组件# $ npm install ng-zorro-antd --save 引入样式# 使用全部组件样式# 该配置将包含组件库的全部样式，如果只想使用某些组件请查看使用特定组件样式配置。...使用特定组件样式时前需要先引入基本样式(所有组件的共用样式)。

1.9K3 0

Angular UI框架 Ng-alain @delon的脚手架的生成开发模板

cd my-project # 安装依赖包 npm install # 启动 npm start # 使用HMR启动 npm run serve:hmr 效果图成功运行了是吧，但是有个问题？...rxjs npm install -g @angular/cli @delon/cli 允许你全局安装或只针对本地项目，对于全局后期所有命令都无需填写 --collection 选项。...全局安装： npm install -g @delon/cli 我们先是使用@AngularCli工具生成一个项目。 ng new my-dream-app 默认进行npm包的下载。...npm start 然后我们干一个事情，然后设置 .angular-cli.json 的默认 collection： "defaults": { "schematics": { "collection...": "@delon/cli" } } 进入到my-dream文件夹中然后我们删除其他不需要的文件。

1.7K11 0

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

Angular CLI是Angular框架的命令行界面，用于在开发过程中在本地创建，构建和运行应用程序。它旨在在开发服务器上构建和测试Angular项目。...在本文中，我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...$ 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

Angular CLI 使用教程指南参考

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本....安装要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持...输出详细信息 --skip-npm 在项目第一次创建时不执行任何npm命令 --name 指定创建项目的名称 ng serve ng new PROJECT_NAME cd PROJECT_NAME...将自动完成功能添加到ng命令的shell中 ng doc 命令描述 ng doc 在浏览器中打开Angular文档并搜索当前关键字 ng e2e 命令描述 ng e2e 使用...这也使ng set可以在项目之外工作。 ng build 构建工件将存储在/dist目录中。

3K5 0

Angular中environments的神奇之处

前言在使用angular脚手架构建angular项目时，都会给我们生成一个名叫environments的文件夹。从字面意识理解像是环境变量的意思。 ?...本地调试的时候 ng s -e=prod 简单解释下， ng：angular脚手架提供的命令操作 s: serve 的简写，运行程序 -e=prod： -env=prod的简写，大概意思就是启用prod...发布的时候，当然用法也是一样，不过通常我们都是把ng命令封装在package.json文件中。如下： ?...简化了我们使用 npm run start就等于使用了ng serve --port 4001 --open这个命令。...场景在angular项目开发中，前后台分离，后台api地址生产环境，测试环境，开发环境的api地址可定都不会是同一个ip地址。

1.9K2 0

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

install 慢可以使用淘宝源 RUN npm config set registry https://registry.npm.taobao.org # install and cache app...dependencies COPY package*.json /usr/src/app/ RUN npm install RUN npm install -g @angular/cli # add.../usr/src/app # start app 根据实际情况修改配置 # CMD ng serve --host 0.0.0.0 CMD ng serve --port=4201 --proxy-config...ng test --watch=false，注意替换下容器名推荐使用docker-compose，好处是把运行参数记录在docker-compose.yml文件中。...，首先利用临时Node镜像生成静态资源，然后将静态资源拷贝到nginx镜像中进行托管。

1.6K6 0

如何管理云原生应用程序的依赖关系

内部依赖是指同一软件系统中两段代码之间的依赖关系，外部依赖是指位于不同软件系统中的两段代码之间的依赖关系。...例如，NPM 要求在部署前将各种依赖关系加载到容器中。许多依赖关系是开源的，各种研究人员都能接触并发现其中的漏洞，这也是它们持续更新的原因之一。...要检查过时的依赖关系，你可以通过导航到 NPM 文件夹打开终端，运行以下命令：你也可以使用一个简单的依赖关系检查脚本，它将检查一个 repo 或软件包的所有依赖关系。..."start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e"...如果有一个较新的版本可用，该工具将更新你的项目以使用它。与依赖关系相关的更新日志通常包括在拉取请求中。

1.7K1 0

Angular Schematics 三部曲之 Add

该系列文章的三部分将分别介绍 Add、Generation 以及 Update，即使分了三部分来讲解 schematics，但我相信依然无法介绍的面面俱到。那遇到问题应该怎么办呢？...ng generate 命令时需要显式的设置 --path 参数。...初始化项目的原始模板文件删除 ng new 生成的重复文件（因为 schematic 无法自动替换文件）把原始项目模板文件拷贝到项目目录调整一下 package.json 和 angular.json...以下是安装 Ng-Matero 时对 ng new 生成的项目文件进行删除的方法。...npm link 其实就是将打包目录的快捷方式拷贝到 node_modules 中。 ng add 的测试比较麻烦，如果将模板安装到项目之后，再次测试需要重新初始化一个 ng 项目。

1.3K1 0

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

Angular CLI是Angular框架的命令行界面，用于在开发过程中在本地创建，构建和运行应用程序。它旨在在开发服务器上构建和测试Angular项目。...在本文中，我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...从ng serve命令的输出中，您可以看到Angular应用程序未在后台运行，您无法再访问命令提示符。因此，在运行时不能执行任何其他命令。...第4步：使用PM2永远运行Angular项目要使新应用程序在后台运行，请释放命令提示符，使用PM2为其提供服务，如图所示。...linuxidc@linuxidc:~/www.linuxidc.com/www/linuxidc-app$ pm2 start "ng serve" --name linuxidc-app

2.2K3 0

Angular 应用的外壳原

继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。...每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。在本教程中，你将创建一个新的工作区。...希望创建一个新工作区并且初始一个应用项目，你需要：确保你现在没有位于 Angular 工作区的文件夹中。...Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。...cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。

9431 0

Angular实战项目（1）

Angular 打造企业级协作平台 image 环境搭建，Material UI，动画，Angular核心概念，RxJS操作符，Angular中的响应式编程，Redux，自动化测试实战驱动，主题，设计模式...image.png 环境搭建安装node node --version node -> npm -> angular CLI 安装node.js的目的是使用npm管理项目依赖的软件包由于网络环境原因...image.png 软件真正运行时的依赖是在dependencies 软件开发过程中devDependencies ng new 项目名新建angular项目建议使用这个命令，可以优化压缩等...ng build -prod 生成环境编译不建议使用ng build ng serve 启动开发服务器 Mock Rest API json-server:用于快速搭建REST API的利器安装...---- 若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用ng serve或npm start时，Angular 4将无法识别位于资源/图像文件夹中的某些图像

相关·内容

Angular10配置webpack打包「详细教程」

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

怎样切换不同版本的 Node

Angular CLI 简介

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

Angular CLI命令

Angular CLI 常用终端操作命令

Angular开发实践（一）：环境准备及框架搭建

Angular 从入坑到挖坑 - Angular 使用入门

Angular-Cli脚手架介绍、安装并搭建项目

Angular UI框架 Ng-alain @delon的脚手架的生成开发模板

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

Angular CLI 使用教程指南参考

Angular中environments的神奇之处

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

如何管理云原生应用程序的依赖关系

Angular Schematics 三部曲之 Add

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

Angular 应用的外壳原

Angular实战项目（1）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐