开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular:开发工具源文件(.ts)不显示

Angular是一种流行的前端开发框架，用于构建现代化的Web应用程序。它采用TypeScript作为开发语言，并提供了丰富的工具和功能来简化开发过程。

对于问题中的情况，当开发工具源文件（.ts）在Angular项目中不显示时，可能有以下几个原因和解决方法：

缺少依赖项：确保在项目根目录中执行了npm install或yarn install命令，以安装所需的依赖项。如果缺少必要的依赖，可能会导致源文件不显示。
IDE或编辑器问题：确保您正在使用支持Angular开发的IDE或编辑器，如Visual Studio Code、WebStorm等。这些工具通常会提供对TypeScript和Angular的内置支持，以确保源文件能够正确显示。
代码编译问题：运行ng build命令来编译您的Angular项目。这将会生成编译后的JavaScript文件（.js），以及对应的源文件（.ts）。如果编译过程中出现错误，可能会导致源文件不显示。
文件路径问题：检查您的文件路径是否正确。确保您的源文件位于Angular项目的正确位置，并且在Angular组件中正确地引用了这些源文件。
版本兼容性问题：确保您正在使用与Angular版本兼容的开发工具和相关库。某些不兼容的版本可能会导致源文件不显示或无法正确编译。

针对Angular开发工具源文件不显示的问题，腾讯云提供了丰富的云原生产品和服务，以帮助开发人员快速构建和部署基于Angular的Web应用程序。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云数据库（CDB）：https://cloud.tencent.com/product/cdb

请注意，以上产品仅作为示例，您可以根据具体需求选择适合的腾讯云产品。

相关搜索:Angular 6异步自动完成不工作，但它显示项目而不改变值 angular cli和Internet Explorer，不注释polyfills.ts的缺点是什么？Angular hide显示不工作 Angular JS ng-显示不工作 Angular ui引导转盘不工作-显示静态图像 Angular Universal与Safari不兼容，无法显示视频 Angular不显示从component.ts到html的数据升级到Angular v9后程序不包含main.server.ngfactory.ts 如何在angular 7中显示从.ts类到.html的日期格式？如果不是真的，如何跳过打印而不显示项目？Vanilla JS/TS和angular 9

相关搜索:

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

有帮助

没帮助

相关·内容

如何使用WijmoJS 纯前端设计器，快速生成 Angular 应用

如果您已经下载了WijmoJS，则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...在我们的示例中，操作是在单独的选项卡中打开设计图面，并使用 Angular标记提供的上下文，以及源文件中该标记的位置。现在单击链接以在相邻选项卡中打开设计器。...但是，您应该知道扩展会记住调用它的Angular标记的文档范围。如果随后修改了原始源文件，则应重新访问CodeLens链接以刷新关联的设计器选项卡。...随着趋势线添加到图表中，设计界面现在看起来像这样：在独立模式下，没有要更新的源文件，但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。...单击设计器左侧的“源视图”图标以显示生成的Angular标记。从那里，突出显示要复制的文本，并使用快捷键（在Windows上，Ctrl + C）将文本复制到剪贴板。

5.4K4 0

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

一、Overview angular 入坑记录的笔记第一篇，完成开发环境的搭建，以及如何通过 angular cli 来创建第一个 angular 应用。...e2e - 端到端测试文件 src - 单元测试源代码路径 app.e2e-spec.ts - 针对当前应用的端到端单元测试文件 app.po.ts - 单元测试源文件 protractor.conf.js...- 项目的根组件单元测试文件 app.component.ts - 项目的根组件逻辑 app.module.ts - 应用的根模块 assets - 系统需要使用的静态资源文件 environments...- 针对不同环境的构建配置选项 favicon.ico - 网站图标 index.html - 应用的主页面 main.ts - 应用的入口程序 polyfills.ts -...cli 和开发工具使用的配置信息 browserslist - 项目所针对的目标浏览器 3 karma.conf.js - 基于 node.js 的 javascript 测试执行过程管理工具

2K2 0

Angular 2 + 折腾记：(1)初识Angular-cli及脱坑要点

，已经迁移,之前npm install angular-cli不推荐；目前最新的是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次，每次升级各种酸爽； rc2开始基本变化不大，可以直接拿来用了...支持一下国产，挺好用哈～～～～ sudo apt-get update && sudo apt-get install yarn复制代码 开发工具这些就不扯了，我选择VSCODE ---- 安装 npm...ng serve：启动脚手架服务，默认端口4200；自定义什么看帮助额 ---- 打包 ng build: 开发模式打包，调用的环境文件是/src/environments/environments.ts...prod: 以前调用aot打包还需要带上--aot,从beta31开始，--prod模式下自动调用aot打包，调用的环境文件是/src/environments/environments.prod.ts...有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了 ---- 生成的目录树小解释 ? ---- 总结这个脚手架支持sass和less，手动改下.angular-cli.json就可以了。

1.8K1 0

Angular 英雄编辑器

接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。创建英雄组件使用 Angular CLI 创建一个名为 heroes 的新组件。...管道（Pipes）是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，当然你还可以创建自己的管道。...打开浏览器的开发工具，就会在控制台中看到如下信息： Uncaught Error: Template parse errors:Can't bind to 'ngModel' since it isn't...src/app/app.module.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/...master/src/app/app.module.ts src/app/app.component.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

2.6K7 0

Angular 英雄编辑器

接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。创建英雄组件使用 Angular CLI 创建一个名为 heroes 的新组件。...管道（Pipes）是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，当然你还可以创建自己的管道。...打开浏览器的开发工具，就会在控制台中看到如下信息： Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't...src/app/app.module.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/...master/src/app/app.module.ts src/app/app.component.ts https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

2.5K5 0

Angular 应用的外壳

运行 CLI 命令 ng new 然后提供空间的名字 angular-tour-of-heroes，完整的命令如下显示： ng new angular-tour-of-heroes ng new ...cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。...Components（组件）是 Angular 应用中的基本构造块。它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。...下面是本页所提到的源代码： src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector...你学会了使用 Angular 组件来显示数据。你使用双花括号插值表达式显示了应用标题。

1.1K3 0

HTML5手机APP开发入门(2)

HTML5手机APP开发入门(2) 课程内容使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作，有三个页面: ListPage，DetailPage，AddItemPage...blank –v2 --ts ?...修改源文件 Home.html，修改成 List.html ? ?...，联系人使用list来显示信息 ?...修改detail-item.ts ? 修改list.ts 添加导航 ? OK 试运行一下 ? ? ?

1.1K8 0

Angular 应用的外壳原

运行 CLI 命令 ng new 然后提供空间的名字 angular-tour-of-heroes，完整的命令如下显示： ng new angular-tour-of-heroes ng new...cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。...Components（组件）是 Angular 应用中的基本构造块。它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。...下面是本页所提到的源代码： src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector...你学会了使用 Angular 组件来显示数据。你使用双花括号插值表达式显示了应用标题。

9551 0

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

第四步：编辑你的第一个 Angular 组件组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。...除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。...test.ts 单元测试的主入口点，带有一些 Angular 特有的配置。你通常不需要编辑这个文件。...它也显示他们的gzipped大小！...并且，由于Angular单页面应用的入口文件为main.ts 所以！

4.9K2 0

HTML5手机APP开发入门(1)

HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net...http://developer.android.com/sdk/index.html 安装完android studio后需要下载 Android SDK Google的东西都必须FQ，不FQ...javase/downloads/index.html 安装完成后，配置一下环境变量 Java Path Android Path 启动android虚拟设备的时候需要用到 开发工具...环境参考 https://angular.io/docs/ts/latest/quickstart.html 以上这些都完成后就可以开始做开发了 First APP 参考 http...ionicframework.com/docs/v2/getting-started/tutorial/ 任务：完成一个todo List APP $ionic start todoapp blank --v2 –ts

1.6K8 0

Angular：构建现代Web应用的终极选择

强大的CLI工具: Angular提供了强大的命令行界面（CLI）工具，能够快速生成项目结构、组件、服务等，提供了一系列便捷的开发工具和命令，简化了开发流程。...Angular 的应用场景企业级应用: 对于需要复杂业务逻辑和丰富交互的企业级应用，Angular是一个理想的选择，能够满足大规模、高性能的需求。...increment()">Increment Decrement app.component.ts...解读： app.component.html 文件中定义了应用的结构，包括标题、计数显示和两个按钮，通过 Angular 的双向绑定语法 {{ count }} 将 count 变量绑定到页面中，并使用...app.component.ts 文件中定义了组件的行为逻辑，包括 count 变量和两个方法 increment 和 decrement，用于实现计数器的增加和减少功能。

3171 0

Angular 2.x折腾记：(1)初识Angular-cli及脱坑要点

cli beta18开始用的，截止beta28.3,这个分支已经废弃，已经迁移,之前npm install angular-cli不推荐；目前最新的是v1.0.0正式版【2017-3-24】，从旧版本到...正式版的配置稍微有些改动，我比较了下基本不大，放心使用系统环境配置 window 安装lts版本的nodejs v6.10.0 ， Angular-cli中的node-sass不支持7.x，装不上的...启动 ng serve：启动脚手架服务，默认端口4200；自定义什么看帮助额打包 ng build: 开发模式打包，调用的环境文件是/src/environments/environments.ts...prod: 以前调用aot打包还需要带上--aot,从beta31开始，--prod模式下自动调用aot打包，调用的环境文件是/src/environments/environments.prod.ts...有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了生成的目录树小解释总结这个脚手架支持sass和less，手动改下.angular-cli.json就可以了。

1391 0

Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）

脚手架 npm install -g @angular/cli 安装失败可以尝试下面方法，先卸载清楚缓存，再安装 npm uninstall -g @angular/cli npm cache clean...npm install -g @angular/cli@latest 官方文档：https://github.com/angular/angular-cli 官方提供了一些指令 ?...ng build 开发项目用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他 ? 这里写图片描述和vue-cli构建的vue2项目很类似。...其中spec.ts 文件是测试文件，可以删除。...count-year ng g component count\count-month 每个组建默认都有四个文件，图中已经把测试文件删除了，剩下一看后缀就知道，.css里是放样式的，.html里是页面布局的，.ts

1K3 0

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

您可以通过在命令提示符中运行以下命令来确保系统上安装了 Node，该命令应显示已安装的 Node 版本： $ node -v 接下来，运行以下命令来安装 Angular CLI： $ npm install...：autoprefixer 需要 CSS 支持 favicon.ico：网站图标 index.html：主要的 HTML 文件 karma.conf.js：Karma（测试工具）的配置文件 main.ts...：AppModule 引导的主启动文件 polyfills.ts：Angular 所需的 polyfill styles.css：项目的全局样式表文件 test.ts：这是 Karma 的配置文件 tsconfig...如果您更改任何源文件，该页面将自动实时重新加载。...Angular CLI 将自动在 src/app.module.ts 文件中添加对组件、指令和管道的引用。

3630 0

同样做前端，为何差距越来越大？

曾经 React 和 Angular 是两个很难调和的框架，开发中浪费了我们大量的人力。...过去一年，我们从部分使用 TS 变为全面切换到 TS，包括我们自己开发的工具库等。 TS 最大的优势是它提供了强大的静态分析能力，结合 TSLint 能对代码做到更加严格的检查约束。...Pont 实现的效果有：根据方法名自动匹配 url、method，并且对应到 prams、response 类型完美，并能自动提示；后端 API 接口变更后，前端相关联的请求会自动报错，再也不担心后端悄悄改接口前端不知晓...依赖管理不彻底。借助 webpack 的 css-loader，已够用。 JS 和 CSS 变量共享。关于 JS 和 Sass/Less 变量共享，我们摸索出了自己的解法： ?...四、开发工具覆盖全链路 2019 年，你几乎不可能再开发出 React/Angular/Vue 级别的框架，也没必要再造 Ant-Design/Fusion-Design/Ng-Zorro 这样的轮子。

1.2K2 0

给2019前端开发的你5个进阶建议～

曾经 React 和 Angular 是两个很难调和的框架，开发中浪费了我们大量的人力。...过去一年，我们从部分使用 TS 变为全面切换到 TS，包括我们自己开发的工具库等。 TS 最大的优势是它提供了强大的静态分析能力，结合 TSLint 能对代码做到更加严格的检查约束。...Pont 实现的效果有：根据方法名自动匹配 url、method，并且对应到 prams、response 类型完美，并能自动提示后端 API 接口变更后，前端相关联的请求会自动报错，再也不担心后端悄悄改接口前端不知晓...依赖管理不彻底。借助 webpack 的 css-loader，已够用。 JS 和 CSS 变量共享。....map(key => `\ 在 scss 文件中，可以直接引用变量 // page.scss.button { background: $primary-color;} 四、开发工具覆盖全链路

1K1 0

angular采用注释进行文档编写

--disableProtected 不要在生成的文档中显示受保护 --disableInternal 不要在生成的文档中显示...@internal --disableLifeCycleHooks 不要在生成的文档中显示Angular生命周期钩子 --disableRoutesGraph...因此，适当过滤一些不必要显示的文档类型非常重要。...tags.find(d => d.tagName == 'docs-private') : false; } 分类处理器虽然 Angular 是 Typescript 文件，但相对于 ts 而言本身对装饰器的依赖非常重...我这里采用跟源文件相同目录结构分法。

1.8K2 0

angular工程目录结构说明

整体结构说明文件名称文件说明 node_modules npm 安装的第三方依赖 src 存放业务源码 angular.json angular 配置文件 karma.conf.js 测试配置文件（...测试文件，不用管 header.component.ts 写 js 事件的文件 // header.component.ts文件 // 页面使用header组件只需要在html顶部引入<app-header...app.component.ts app.module.ts 挂在文件，所有安装的依赖、组件都要在这里面挂载 import { NgModule } from "@angular/core"; import...AppRoutingModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} assets 静态资源文件...入口文件 import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular

1061 0

Angular 路由配置（预加载配置，懒加载配置）

管道等是否可以使用，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，也就是说，如果你定义的 NgModule 不...文件（需要在app-routing.module.ts中的providers注入，然后在路由中定义的data通过附加参数来设置是否预加载） import { Injectable } from '@angular...main.module.ts main-routing.module.ts main.service.ts 目录A A.component.html A.component.scss...（以下我都先讲思路，再放关键代码，其他不赘述）下面的区域是另一个路由出口复制代码 (1)在main-routing.module.ts里面配置文件夹main下的路由，需要引用各组件的component

3.2K3 0

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过..."root": "src", // 源码根目录 "outDir": "dist", // 编译后的输出目录，默认是dist/ "assets": [ // 记录资源文件夹...", // 指定应用的入门文件 "polyfills": "polyfills.ts", // 指定polyfill文件 "test": "test.ts", // 指定测试入门文件...serve --host (self) 指定本地Server绑定的域名，默认值：localhost.如果希望使用self来访问你的站点，须加入以上参数 2.ng serve --hmr 注意开启之后，只是在angular-cli...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭