开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在Linux中停止angular项目的目录列表

在Linux中停止Angular项目的目录列表，通常意味着你想要禁用Angular开发服务器的目录浏览功能。这可以通过修改Angular项目的配置文件来实现。以下是具体步骤：

基础概念

Angular开发服务器（通常是使用ng serve命令启动的）默认情况下会显示项目目录的列表，这在生产环境中是不安全的。禁用目录列表可以提高安全性。

相关优势

安全性：防止未经授权的用户浏览服务器上的文件。
专业性：符合生产环境的安全标准。

类型

这是一个配置更改的问题，涉及到Angular项目的angular.json文件。

应用场景

当你部署Angular应用到生产环境或者希望提高开发服务器的安全性时。

解决方法

修改angular.json文件：打开你的Angular项目的根目录下的angular.json文件，找到projects -> [your-project-name] -> architect -> build -> options，添加或修改assets配置：
修改angular.json文件：打开你的Angular项目的根目录下的angular.json文件，找到projects -> [your-project-name] -> architect -> build -> options，添加或修改assets配置：
这里的disableIndexHtml选项可以防止Angular开发服务器显示目录列表。
使用--no-open选项：在启动开发服务器时，可以使用--no-open选项来防止浏览器自动打开，并且通常也会禁用目录列表：
使用--no-open选项：在启动开发服务器时，可以使用--no-open选项来防止浏览器自动打开，并且通常也会禁用目录列表：
使用--live-reload选项：确保你没有使用--live-reload选项，因为它可能会导致目录列表重新出现：
使用--live-reload选项：确保你没有使用--live-reload选项，因为它可能会导致目录列表重新出现：

示例代码

假设你的angular.json文件如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project-name": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/your-project-name",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-project-name:build"
          }
        }
      }
    }
  }
}

修改后的angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project-name": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/your-project-name",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "disableIndexHtml": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-project-name:build"
          }
        }
      }
    }
  }
}

参考链接

Angular CLI Configuration

通过以上步骤，你应该能够成功禁用Angular项目的目录列表。

相关搜索:如何在angular中默认选择mat列表中的第一项如何在Python中创建在输入空格时停止并移除重复项的列表如何在Angular中使用ngFor设置select下拉列表中的第一项如何在angular中从多个复选框列表中获取多个选中的复选框项如何在Angular4 / Ionic中使用*ngFor时从列表中获取点击项目的详细信息 js定义静态变量 js add方法 js url重写 dw新建js文件 js本地图片路径

相关搜索:

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

有帮助

没帮助

相关·内容

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架，注意我们的前端代码的编写全部都是在VS Code上面编写。

02

该文章大约分这几部分:

最近使用vscode比较多. 学习了一下如何在mac上使用vscode开发asp.netcore项目.

02

Nginx+Varnish+Angular universal实现服务端页面渲染缓存

项目使用angular universal实现服务端渲染，为了减轻服务器的压力，需要将用户频繁访问的页面进行缓存，这样就不必每次都去渲染相同的页面（例如首页），angular universal在features中有提到考虑加入缓存，但就目前来说，varnish是个不错的选择，但是varnish不支持https，所以还需要用nginx进行端口的转发

02

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

本文翻译自How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools，作者为Ahmed Bouchefra

00

在Ubuntu 18.04上安装Angular图文详解

在这篇文章中，我将向您展示如何在Ubuntu 18.04上安装Angular。 Angular是一个用于制作令人敬畏的网站的前端Web开发框架。

00

Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

STEP 1：设置开发环境与 Yeoman 的所有交互都是通过命令行。Mac 系统使用 terminal.app，Linux 系统使用 shell，windows 系统可以使用 cmder/Powe

07

IntelliJ IDEA 2022.2.2汉化版免登陆账号「win/mac」

IntelliJ IDEA是Mac端最好用的Java开发工具！IntelliJ IDEA分析您的代码，在所有项目文件和语言中查找符号之间的连接。利用这些信息，它提供了深入的编码协助，快速导航，巧妙的错误分析，当然还有重构，功能强大！

03

2018 年前端开发五大趋势

对于开发者而言，2017出奇的高效，不过2018年有望为IT领域带来更多发展。本文中，为了处理项目时紧跟潮流，我们会描述出每个前端编程人都需要关注的2018年JavaScript的五种主要发展趋势。

04

用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)

这篇文章写的是使用mac(linux)/win10开发一个基于asp.net core 2.0 web api, angular 5, bootstrap 4, sql server linux(使用到docker)的小项目. 该文章大约分这几部分: 开发环境的搭建建立和配置asp.net core 2.0 web api 建立和配置angular5项目开发基本的CRUD功能基于Unit Of Work和Repository等Pattern对项目重构其他业务功能的实现, 例如文件上传等授权和验证

05

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（新手入门篇）

在之前的一篇文章已经介绍过了，公司正在使用NG-ZORRO组件库开发后台应用，并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。

01

如何优雅的玩转 Git

Git 和其它版本控制系统（包括 Subversion 和近似工具）的主要差别在于 Git 对待数据的方式。从概念上来说，其它大部分系统以文件变更列表的方式存储信息，而 Git 是把数据看作是对小型文件系统的一系列快照。

03

如何使用Pycharm编写项目「使用教程」

创建新项目 step1：双击打开 PyCharm，点击 Create New Project：

02

如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

Bower是前端模块的包管理器，通常由JavaScript和/或CSS组成。它使我们可以轻松搜索，安装，更新或删除这些前端依赖项。

00

ANCWEB - 基于 ASP.NET CORE 2.0 的 WEB 开发

VS code 中使用终端，并执行dotnet new webapi 指令创建 ASP.NET CORE WEB API 项目。

01

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

Angular CLI是Angular框架的命令行界面，用于在开发过程中在本地创建，构建和运行应用程序。

04

前端面试题angular_Vue前端面试题

1，ng-if 跟 ng-show/hide 的区别有哪些？第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

02

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

官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。

01

Nginx安装部署之反向代理配置与负载均衡

最近我们的angular项目部署，我们采用的的是Nginx，下面对Nginx做一个简单的介绍。

01

NVM管理多版本Node.js教程

Node Version Manager（NVM）是一个用于管理多个Node.js版本的工具。它允许用户在同一台机器上安装和使用多个Node.js版本，非常适合需要同时进行多个项目的开发者。NVM是开源的，支持MacOS、Windows和Linux操作系统。

03

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在？Webpack 开发中间件模块热拔插（HMR）

多个月以来，我和多个Github上的社区贡献者一起建立支持库、包，我们最终的目的是希望完成这样一个作为起点的模板，也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中，这个模板包含一下这些方面：服务端预加载（预渲染）：这样你的UI可以快速的显示，甚至在浏览器下载Javascript之前。 Webpack中间件集成：在开发期间，你不需要一直重新编译你的客户端项目，或者你可以用一个watcher工具在后台帮你做这些事。模块热拔插：在开发期间，一旦你编辑了一个Typesc

06

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.

05

【腾讯云的1001种玩法】centos 7 部署 dotnetcore + Angular2 实践

01

小白如何用Angular开发一个简单的Web应用

最近开始学习 Angular，所以想分享下从个人小白的角度如何去开发一款简单的 Web 应用。

05

使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CI/CD

过去五年中的变化，如迁移到公有云以及从虚拟机向容器的转变，已经彻底改变了构建和部署软件的意义。

01

【ASP.NET Core 基础知识】--前端开发--集成前端框架

创建 ASP.NET Core 项目可以通过 Visual Studio 或者使用 .NET CLI（命令行界面）来完成。下面我将为展示如何使用 .NET CLI 在命令行中创建一个 ASP.NET Core 项目：

00

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

过去几年来，Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的，但它在 Angular 2 基础之上添加了对更多语言的支持，比如 Dart 和 Typescript。

01

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

Angular CLI是Angular框架的命令行界面，用于在开发过程中在本地创建，构建和运行应用程序。

03

干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架

因此，您应该考虑将Angular JavaScript框架添加为开发工具包的一部分。

02

玩转服务器---基本工具的使用

首先，自行安装FileZilla，傻瓜式安装即可。打开FileZilla

01

如何将 Angular 项目部署到云开发静态网站托管

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持

03

Angular CLI 简介

如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文.

Linux: FirewallD和Iptables防火墙使用

防火墙是一种软件，充当用户系统和外部网络之间的屏障，允许某些数据包通过，同时丢弃其他数据包。防火墙通常在网络层上运行，即在 Ipv4 和 Ipv6 的 IP 数据包上运行。

03

Angular 工具篇之VSCode调试

今天是 “教师节”，借用我女儿小班 QQ 群内家长们发的祝福语，献给各行各业辛勤而伟大的老师们：

01

Angular 2.x折腾记：(1)初识Angular-cli[官方脚手架]及脱坑要点

这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！

01

Angular 2 + 折腾记：(1)初识Angular-cli[官方脚手架]及脱坑要点

这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！

01

如何使用docker搭建一天全家桶开发环境

DNMP（Docker + Nginx + MySQL + PHP8/7/5 + Redis）是一款全功能的LNMP一键安装程序。

02

GitHub 上的顶级项目都是做什么的？

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。

01

AngularJS7那些不得不说的事故

最近简直要忙死，所以停更了很久，你们会不会以为我人间蒸发了？正文之前，请允许我先跑个题，就是关于忙的问题。做了Freelance，每天过的比上班还累，这完全不是我想要的生活啊？所以痛定思痛，需要检讨一下自己：

01

前端练级攻略(第二部分)

在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如何向界面添加交互性，JavaScript 设计和架构模式，以及如何构建网络应用程序。

00

如何在 ASP.NET MVC 中集成 AngularJS（2）

在如何在 ASP.NET MVC 中集成 AngularJS(1)中，我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分。 ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一。捆绑和压缩降低了 HTTP 请求和有效载荷的大小，结果是可以更快和更好的执行 ASP.NET MVC 的网站。有许多可以减少 CSS 和 Ja

【推荐】git commit 规范和如何在 commit 里使用 emoji

大家好，我是桃翁，今天给大家带来的是关于 git commit 那些事儿，希望大家喜欢。

04

IntelliJ IDEA 2021.2 正式发布

更多详情请查看：https://blog.jetbrains.com/idea/2021/07/intellij-idea-2021-2/

03

GitHub 上的顶级项目都是做什么的？（一）

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。震惊之余，感觉有必要把 GitHub 上常用工具捋一遍，以避免以后发生重复造轮子的情况。计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个，数据来源是这里：https://gitstar-ranking.com/repositories。

02

本文来深入学习Nginx/OpenResty详解，Nginx到底是个什么鬼

Nginx（或OpenResty）在生产场景中使用的广泛程度已经到了令人咂舌的地步。无论其实际的市场占用率如何，以笔者这些年所经历的项目来看，其使用率为100%。

01

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。 NgModule 的元数据会做这些：声明某些组件、指令和管道属于这个模块。公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。导入其它带有组件、指令和管道的模块，这些模块中的元件都是本模块所需的。提供一些供应用中的其它组件使用的服务。每个 Angular 应用都至少有一个模块，也就是根模块。你可以引导那个模块，以启动该应用。

02

前端项目实践之“道”：用对了方法，效率翻番

现在前端非常火热，相关的技术更是层出不穷，前端人也在不停地学学学。那么有没有什么“偷懒”的方式，帮助我们更加有效地完成编码的KPI呢？本人从事前端开发工作多年，负责公司多个大型项目前端架构设计与落地实践，本文就和大家聊一聊前端的“项目实践之道”与“变化之道”。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭