首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用这种文件夹结构在Angular 2中引用node_modules?

在Angular 2中,可以使用以下步骤来使用文件夹结构引用node_modules:

  1. 首先,在你的Angular项目的根目录下创建一个名为assets的文件夹(如果还没有)。
  2. 打开angular.json文件,找到architect -> build -> options -> assets属性,将assets文件夹添加到该属性的数组中。例如:
代码语言:json
复制
"assets": [
  "src/favicon.ico",
  "src/assets"
]
  1. assets文件夹下创建一个名为vendor的文件夹。
  2. node_modules文件夹中需要引用的库的文件夹复制到vendor文件夹中。例如,如果你想引用lodash库,可以将node_modules/lodash文件夹复制到vendor文件夹中。
  3. 在你的Angular组件中,使用相对路径引用vendor文件夹中的库。例如,如果你想在app.component.ts文件中引用lodash库,可以这样写:
代码语言:typescript
复制
import * as _ from '../../assets/vendor/lodash/lodash.js';

这样,你就可以在Angular 2中使用文件夹结构引用node_modules中的库了。

请注意,以上步骤是一种常见的做法,但并不是唯一的方法。在实际开发中,你可以根据自己的需求和项目结构进行调整和优化。

推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款支持前后端一体化开发的云原生应用托管平台。你可以使用腾讯云云开发来快速搭建和部署Angular项目,并且无需关心服务器运维、数据库等底层细节。

更多关于腾讯云云开发的信息,请访问:腾讯云云开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularJS7那些不得不说的事故

这在大公司中通常不是问题,大公司大多都使用自己的包镜像服务器,因此这种情况出现的少。但在中、小型公司,这是个很烦心的问题。...我建议对于一些复杂的项目,尽可能的保留下来原有的node_modules 文件夹,毕竟跟硬盘容量比起来,这一点空间不算啥了,能让你将来项目的维护轻松许多。   ...库的引用,则使用引用结构化js的方法,重点是引用“”也就是所有内容,然后用“as $”命名成平常我们喜欢的样子。.../jslib/lists';   使用的时候,跟原来js中引用也完全一致。通常说,比上面介绍的引用JQuery.js之类的引用会更容易。.../some_angular_dir/jslib   这会编译jslib中的所有文件,文件夹结构也会保留,所以编译完成,直接用生成的jslib替换原来的文件夹

1.5K10

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

接下来教大家如何使用,具体详情可以去github上找文档。虽然官方文档上只标注到了可用版本为9,但是Angular10也是可以使用的。 1....当工作空间文件结构到位时,可以命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你创建其它应用之后更改了默认值)。...除了命令行中使用 CLI 之外,你还可以使用Angular Console 这样的交互式开发环境,或直接在应用的源文件夹和配置文件中操作这些文件。...对于多项目的工作空间,projects/ 文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。 应用源文件 顶层文件 src/ 为测试并运行你的应用提供支持。... src/ 文件夹里面,app/ 文件夹中包含此项目的逻辑和数据。Angular 组件、模板和样式也都在这里。

5K20
  • Angular Library 快速入门

    新建 Workspace $ ng new sf-lib-app $ cd sf-lib-app $ ng serve 介绍如何创建 Angular Library 之前,让我们来看一下 Angular...文件中添加 sf-lib 项目; package.json 文件中添加 ng-packagr 依赖; tsconfig.json 文件中添加 sf-lib 库的引用项目中的 projects...目录下创建 sf-lib 文件夹。...app.component.ts 组件对应的模板引用 sf-lib 默认创建的组件: 通常情况下,我们会删除默认创建的组件,然后创建自定义组件,下面我们就来介绍如何为...完成新建 ButtonComponent 组件的导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以模板中使用刚创建的

    2.4K10

    Angular CLI 简介

    综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以项目生成以后通过修改angular-cli.json文件来做修改....下面我生成一个项目, 并且执行npm install: 命令执行完, 可以看到如下的项目结构; 里面有node_modules目录了, 也就是所有的包都安装好了, 接下来我可以运行该项目了: ng...看一下目录结构: 生成的directive的结构是没有目录, 也就是flat的....可以看一下spec list: 这时因为运行测试的时候, admin模块是独立运行的, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?...使用ng test -sr或者ng test -w false 执行单次测试  测试代码覆盖率: ng test --cc 的报告默认是生成/coverage文件夹下, 但是可以通过修改.angular-cli.json

    6K110

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

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 本教程中,我们将学习如何在 Windows 中安装 Angular CLI 并使用它来创建...它还会询问您要使用的样式表格式(例如 CSS)。选择您的选项并按 Enter 键继续。 之后,您将使用目录结构和一堆配置和代码文件创建项目。它将主要采用 TypeScript 和 JSON 格式。...我们看看各个文件的作用: /e2e/:包含网站的端到端(模拟用户行为)测试 /node_modules/:使用 npm install 将所有 3rd 方库安装到此文件夹 /src/:包含应用程序的源代码...Angular CLI 将自动 src/app.module.ts 文件中添加对组件、指令和管道的引用。...结论 本教程中,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    42700

    前端开发工程化之angular打造spa应用

    前言碎语 ps:这篇博文是博主公司内部分享的一个流程梳理的文档,仅供参考 soa/微服务架构,前后端分离,前后端通过http通讯json交换数据这个是未来的趋势 后端开发我们都熟悉,今天分享前端开发工程化...然而所谓的spa单页面应用如何工程化开发,他的开放方式如何呢,请继续看下文,使用angular打造spa应用 1.相关的关键字(yeoman,node,npm,bower,grunt,gulp,ruby...等)使用npm install 下载依赖到本地node_modules文件夹下 (4)Gruntfile.js (grunt构建任务描述文件,如,serve,build) 5.angular的常用相关概念...内容远不止这些,而且还有很多第三方扩展,这些都有待我们开发的时候去发现 6.app下scripts文件结构讨论 两种:  1.按业务功能点划分,相关的功能的Controller和service都放一起... 2.按资源服务定义划分,controller和service分开,各自按业务模块组织 7.angular 拓展整理 图表数据展示:angular morris chart https://angular-morris-chart.stpa.co

    16640

    【番外】 使用@arcgiscli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/cli脚手架的开发方式。...概述 今天兴趣使然,翻阅ArcGIS API for JavaScript官网的时候,发现了跟esri-loader方法不同的另外一种可以Vue、React和Angular这种主流框架中使用JS API...如果想了解如何通过esri-loader来Vue、React和Angular这种主流框架中使用JS API的开发,请移步至另外两篇文章: 《【番外】 React中使用ArcGIS JS API...3.3、用编辑器打开项目代码可看到,它的代码组织结构跟基于Vue框架创建的应用模板的代码结构类似,是基于React框架构建的一个应用模板,可通过src目录下的index.tsx文件判断,使用了JSX语法的变体...总结 本篇文章通过介绍如何安装@arcgis/cli脚手架、如何通过脚手架来创建基于Vue和React框架的应用模板来介绍了另外一种主流框架中应用ArcGIS API for JavaScript的开发方式

    2.3K30

    Angular 工具篇之分析包的大小

    本文将介绍如何使用 webpack-bundle-analyzer 和 source-map-explorer 这两款工具来分析 Angular Bundle 的大小。...下面我们将使用 Github 上的 angular6-example-app 这个项目来演示上述两个工具的使用案例,首先我们先来初始化 angular6-example-app 这个项目。...: $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,构建的时候,需要添加相关参数,具体如下: $ ng build...--prod --stats-json 当项目构建完成后,根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:...prod --source-map 构建完成后,根目录下的 dist 文件夹下会生成 main bundle 文件,这时我们可以命令行执行下列命令来查看结果: $ node_modules/.bin

    2.4K40

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...如何Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好的方式维护代码。...如何优化Angular 2应用程序来获得更好的性能? 优化取决于应用程序的类型和大小以及许多其他因素。但一般来说,优化Angular 2应用程序时,我会考虑以下几点: 考虑AOT编译。...如果我们需要扩展外部库的类型定义,一个好的做法是,我们并非对node_modules或现有的typings文件夹进行改动,而是创建一个命名为“自定义类型”的新文件夹,来存储所有的自定义类型。...也欢迎大家文末留言,交流Angular使用经验哦!

    17.3K80

    Angular Schematics 三部曲之 Add

    官网的教程中,已经列出了 schematics 目录的两种风格: 1、你可以 schematics 文件夹中单独安装 node_modules,这样你 package.json 中定义 scripts.../node_modules/.bin/tsc -p tsconfig.json" }, } 使用 Angular CLI 来创建项目的话一般来说就是第一种情况,比如创建一个库或者创建一个 schematics...注意:使用 Angular CLI 的默认目录对于 Generation 命令比较友好,Angular CLI 添加的默认路径为 src/app 或者 src/lib 等,如果我们修改了默认目录,则在使用...除了代码中安装依赖以外,也可以 schematics 的 package.json 中定义 cdk、parse5,只要保证执行 Add 主逻辑的时候已经安装了上述包即可,但是这种方式过于死板,...@angular/material 以及其它库的使用方式。

    1.4K10

    monorepo--依赖

    -- 这是宗旨,目前团队已尝试,但是否全线切换,仍待考量(因为 依赖问题 已解决,提交复杂性也已通过 CLI 统一) 目前诸如 Babel、React、Angular、Ember、Meteor、Jest.../charts、src/components、src/fusion-utils 都是独立的工程,通过 Git Subtree 来关联这些项目,然后每个项目中都有独立的 package.json 文件,宿主项目中使用...代码中对于 fusion-charts 等引用使用 /workspace-a/package.json#name 字段(上述,name 字段为 fusion-charts),而不是文件夹名称 charts...通过将子模块提升到其父项目的node_modules:monorepo/node_modules子项目/程序包之间共享模块。.../cli.js 或在 Windows 中使用 node cli.js 来运行它 package.json bin 是一个让 Yarn 包安装时给包创建 cli 命令(二进制)的映射表。

    2.6K31

    Angular2 初体验

    准备开发环境 Angular2 通过 npm 发布, 因此推荐使用 node/npm 环境, 要开始使用 Angular2 , 先准备一个目录 learning-angular , 在这个目录中初始化项目...npm install 使用 es5 开发 Angular2 应用 Angular2 是个客户端框架, 浏览器中运行, 因此使用 Javascript (es5) 来做开发也是完全可行的。...首先在 HTML 页面中添加 Angular2 的 UMD 版本 js 文件的引用, 代码如下: <script src="<em>node_modules</em>/rxjs/bundles/Rx.umd.min.js...<em>使用</em> TypeScript 开发 <em>Angular</em>2 应用 虽然完全能够<em>使用</em> Javascript es5 来开发, 但是这并不是官方推荐的做法, 官方推荐的是 TypeScript , 默认的教程也都是<em>使用</em>...", ".idea" ] } 现在, HTML 页面中引入 Angular 的 SystemJS 模块版本, 代码如下: <script src="<em>node_modules</em>/systemjs/dist

    1.6K20

    Angular中引入第三方JS库

    -save 2..angular-cli.json文件中配置 "styles": [ "styles.scss", "...../node_modules/layui-laydate/dist/laydate.js" ], Angular在编译的时候会把上述的js引用都打包到scripts.bundle.js文件中 ts编译识别...laydate 第一步完成后如果在TS中使用laydate变量,编译器是会直接报错的,因为其找不到这个变量,因此这一步要做的就是让ts识别该变量.做法很简单,typings.d.ts中加入声明 /*...laydate功能 laydate是需要更改Dom节点的,因此该步骤必须放到Angular对视图渲染之后,也就是生命周期中的AfterViewInit函数中执行.另外该渲染会使得双向绑定失效,需要处理结果则可以...这种虚拟Dom操作会导致绑定失效等各种异常问题,一般情况下不建议混编,尤其是大项目,到后期会出现各种折磨人的小问题.

    6.2K30

    剖析 npm、yarn 与 pnpm 依赖管理逻辑

    来自团队 匡凌熙 同学的内部分享 我们项目开发的过程中会引用到各种不同的库,各种库又依赖了其他不同的库,这些依赖应该如何进行管理,今天这篇文章主要聊的就是这个事情。...可以看到,我们是可以正常使用这两个我们并未声明依赖中的npm包的,因为这两个包存在于我们项目的node_modules下,根据npm包的查找规则,我们是可以找到这两个包的。...所以这种依赖关系就导致了下面两个问题: 我们项目本身的node_modules结构不够直观 依赖不安全,我们可以使用依赖文件中并没有声明的npm包 其实第一点的问题并不是很大,主要是第二点可能会导致一些奇怪的问题...同时,我们对于这种处理方式其实很容易有一个疑问,如果我同时引用了同一个包的多个不同版本,会帮我把哪个包提出来,同时我每次npm i之后提出来的包版本都是一样的吗?...同时自己平时有时候也会直接在node_modules里面调试一些东西..感觉这种处理方式对于这种操作来说也不是很友好。

    1.2K20

    大前端的自动化工厂(1)——Yeoman

    从个人使用者的角度来看,Yeoman的地位有些鸡肋,因为流行框架自带的cli工具都能够自动生成官方推荐的目录结构,而且一个项目持续少则几个月多则几年,而项目的初始化结构目录在此期间只需要生成一次。...为了降低项目的维护成本,将要求的组件结构和必要的使用说明生成组件模板,使用Yeoman工具来直接生成,当项目的体积越来越大时,你就会体会到这种方式的好处。...子模板的使用 如果模板支持子模板功能,用户通过yo XXX:YYY即可生成项目组件,例如yo angular : controller生成一个angularjs项目中控制器的代码骨架)。...3.1 使用方法 你可以通过如下方式使用它: 通过自己的项目中引用yeoman-generator,使用yeoman的API编写定制的模板文件(注意使用此种方法时,如果希望通过yo来调用生成器,则需要按指定的方式编写...实战:tiny-helper工具开发演示 在此演示如何制作一个小工具来生成标准化的Component,示例工具使用generator-generator生成,为方便学习使用,放置本地node_modules

    1.3K40
    领券