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

在Angular 10中实现- CSS正在应用,但JS没有执行

在Angular 10中实现CSS正在应用,但JS没有执行的情况可能是由于以下几个原因导致的:

  1. 语法错误:检查你的JavaScript代码是否存在语法错误,例如拼写错误、缺少分号等。语法错误可能会导致JavaScript代码无法执行。
  2. 引入错误:确保你正确引入了JavaScript文件。在Angular中,你可以在index.html文件中使用<script>标签引入JavaScript文件,或者在组件中使用import语句引入JavaScript模块。
  3. 依赖问题:检查你的项目是否正确安装了所需的依赖。在Angular中,你可以使用npm或yarn来管理项目的依赖。确保你安装了所需的JavaScript库,并在代码中正确引入。
  4. 生命周期钩子问题:Angular组件有一系列的生命周期钩子函数,用于在组件的不同阶段执行特定的操作。如果你的JavaScript代码位于一个生命周期钩子函数之外,它可能不会被执行。确保你将代码放在正确的生命周期钩子函数中,例如ngOnInit()。
  5. Angular编译问题:在开发过程中,Angular会将TypeScript代码编译成JavaScript代码。如果编译过程中出现了错误,可能会导致JavaScript代码无法正确执行。检查你的TypeScript代码是否存在错误,并确保编译过程顺利完成。

如果以上方法都无法解决问题,你可以尝试以下步骤来进一步排查:

  1. 使用浏览器开发者工具:在浏览器中打开开发者工具,查看控制台是否有任何错误信息。这些错误信息可能会提供有关为什么JavaScript代码没有执行的线索。
  2. 检查网络请求:使用浏览器开发者工具的网络选项卡,检查是否有任何JavaScript文件加载失败或返回错误状态码。确保你的JavaScript文件能够成功加载。
  3. 逐步调试:将你的JavaScript代码分解为较小的部分,并逐步测试每个部分。这样可以帮助你确定哪一部分代码导致了问题。

总结起来,当在Angular 10中遇到CSS正在应用但JS没有执行的情况时,你应该检查语法错误、引入错误、依赖问题、生命周期钩子问题、Angular编译问题等可能导致JavaScript代码无法执行的原因。如果问题仍然存在,可以使用浏览器开发者工具进行进一步排查,并尝试逐步调试代码。

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

相关·内容

2017年前端开发手册一-2016前端技术回顾

组件是由单个文件构成, 一个文件可能包含HTML,CSS,JS!--这不再是亵渎主流开发的一句话。...开发人员意识到,大多数情况下通过HTML5和webview实现混合移动开发在构建应用程序时并不能让人满意。 5....10. jQuery还在,人们使用的兴趣下降了。jQuery 3的上线,就像森林中的一棵树倒下,没有人听到。 11. Vue.js继续得到支持。理应如此! 12....大多数人正在学习接受JSX,现在他们已经无法想象不适用JSX是什么样子的。 24.一个可行的CSS模块模式(CSS封装)是现行和可用的,因此CSS in JS将成为一个可行的解决方案。 25....强制执行CSS和JavaScript的风格习惯变得越来越重要(考虑到ES3 到 ES6代码和CSS预处理程序语法变化) 32. 不多数量明显的JavaScript开发人员开始选择Elm。 33.

1.3K50

6种技术将使您成为理想的前端开发人员

Javascript用于Web应用程序上创建和控制动态内容。Jquery用于加速Javascript任务。所有前端都从这些技能开始。 仅有这些是还不能够设计出引人入胜网站的。...这些流行的框架具有预构建的脚本和功能,并且只需单击即可执行各种功能。这些是Javascript的一些先进框架。 1. Angular.js Angular是一个完整的开源客户端框架。...以系统方式工作,这就是Angular.js比其他JavaScript平台更好的原因。 要创建单个页面或中型Web应用程序,Angular.js会很有帮助。 2....Vue.js是初学者的最佳框架。 3. React.js 快速,简单,可扩展,用于构建用户界面。React.js用于增量实现。它灵活且具有说服力。React可以用作开发单页或移动应用程序的基础。...如果你正在寻找高增长和丰厚的收入的前端开发岗位,那么学习这些。

1.2K30
  • (1)Angular的开发

    流行的ReactNative、Node.jsAngular.js、RXjs等技术 H5视频直播 ReactNative应用 JavaScript的新语法 高性能服务端框架 Webpack支撑大规模应用开发...Angular2 Vue.js 3D引擎架构 RxJs构建流式前端应用 内容元素content 图像image 音频audio 元信息metadata 编解码器codec 视频video...loadstart 浏览器开始在网上寻找媒体数据 durationchange 播放时长被改变 loadedmetadata 浏览器获取完毕媒体的时间长和字节数 loadeddata 当前帧的数据已经加载,没有足够的数据来播放指定音频.../视频的下一帧,会触发 progress 当浏览器正在下载指定的视频时,会触发 canplay 当浏览器能够开始播放指定的视频时,会触发 canpalythrough 当浏览器预计能够不停下来进行缓冲的情况下持续播放指定的视频时...来实时获取评论并展示 点赞效果是由css3来实现 弹幕文字使用translateX位移 利用css3的transition-duration控制弹幕速度 文字碰撞和重叠检测 websocket实时获取弹幕数据

    1.3K40

    无需框架,就能实现微前端,理解起来通俗易懂

    为什么需要微前端 假设你正在一个项目中使用一个特定的框架或库(比如React.js),你需要切换到另一个框架或库,或者添加另一个另一个框架(比如Angular.js)上编写的模块。...没有一个微前端,你将不得不重写整个项目或模块,这是一个乏味的过程。 另一种情况是,如果你正在处理一个包含多个团队的大型项目,那么协作将成为一项任务。...幸运的是,我们不需要手动实现这些函数,因为Angular和React中,单个SPA可以自己处理这些函数。...一旦这两个子应用程序都被执行,这些函数应该自动一个 window.angularApp 和 window.reactApp中被访问。...它是一个开源资源,正在不断开发,并正在探索和测试以改进它。你可以将较小的应用组合起来,使用微前端创建大型前端应用将其应用于所有类型的应用是不明智的。

    2K20

    2017年前端框架、类库、工具大比拼

    工具帮助实现一个更容易的开发过程。例如,对比于CSS,许多编码者更喜欢Sass,因为它提供了代码分离、嵌套、渲染时变量、循环和函数。...虽然两个类库客户端使用率很低,但是却可以服务器端的Node.js应用程序中使用这两个类库。...优点: 一些大公司正在使用的流行框架 开发现代Web应用程序的解决方案 是标准MEAN栈(MongoDB,Express.JS,AngularJS,NodeJS)的一部分,有许多文章和教程可用 缺点:...任务可以一个可执行包中统一管理。...它还上报测试结果,确保没有错过特定的代码分支。 总结与建议 目前最为流程的框架是React,同时其它的框架也向着流行的趋势发展。

    2.3K10

    「微前端架构」微前端-Angular风格-第2部分

    模块(包括css和html)打包为一个单独的js文件。...从功能模块转移到迷你应用程序 角功能模块以及Webpack捆绑销售给我们我们需要的代码分离,这是不够的,因为Webpack只允许我们创建包作为一个构建过程的一部分,我们希望能够产生一个单独的JS包,这是建立不同的时间...应用程序B中,我们定义angular和lodash不会绑定在一起,而是由命名空间“container-app”指向它们。...例子: 没有什么比示例更好的了,如果您想尝试一下,可以到share-loader repo查看Readme中的示例和example-cli部分。 演示可以回购本身,享受.....本文展示了一个使用Angular作为框架的解决方案,类似的解决方案也可以使用其他框架来实现

    4.9K20

    React 困境与未来,何时迎来自己的“Angular.js 时刻”?

    仅仅两年之后,开发团队又推出了 Angular 2,基于新的范式对原始库进行全面重写。包括我自己在内,不少开发者都不愿修改现有应用来适应新的设计思路。...难道说 Angular.jsAngular 2 的故事又要重演?React 是否正在重蹈前辈的覆辙? 注意:本文主要讨论 React 和 Next.js 团队引入的新功能。... React 偏要力推服务端端加客户端混合渲染,属于没有困难硬是创造困难。这样大家既可以服务端组件中使用客户端组件,又可以客户端组件中使用服务端组件。...这种格式没有任何可读性,纯属具体实现 HTTP、JSON 和 JSX 之所以如此流行,靠的就是良好的可读性。而 React 服务端组件显然破坏了这种优势。...‘ 现有应用不受影响 与 Angular.jsAngular 2 的过渡不同,React 服务端组件的推出并不算是重大变化。

    25210

    Angular、React 和 Vue 三大框架,Web 开发该如何选择?

    从那时起,React 库基本概念和 API 方面就基本保持不变,已经形成并发展出了一整套的知识和最佳实践,越来越多的人在使用它。Angular 因其优点而备受赞誉,并拥有大量的社区支持。...遗憾的是,尽管 Vue.js 有很多好处,但它并没有像它的竞争对手那样被开发者所接受。...谷歌搜索:谷歌搜索中,React 查询请求最多,紧随其后的是 Vue.js。目前最不受欢迎的是 Angular.jsAngular.js 的人气在下降,而 Vue.js 的人气却在上升。...你可以继续使用 Bootstrap 或 Bulma 这样的 CSS 框架,保留为јQuery 或 Backbone 编写的组件,集成你最喜欢的库执行 HTTP 请求,或使用 Promise 对象。...它们有自己的优势和劣势,没有一个通用的公式可以用来决出一个绝对的赢家。选哪个框架好,要看你正在创建的应用程序和你的特定需求。在做决定之前有必要进行全面的研究。

    1.7K30

    Vue.js 首次屈居第二,JavaScript 2020 年度“新起之秀”都有谁?谁是第一呢?

    一种,是像 Next.js 和 Nuxt 这样的全栈框架,将 React 和 Vue.js 带入服务器端时会对如何构建应用有自身的见解;还有一种,是那些只服务器上运行的经典选项,例如 Nest (去年该类别的冠军...与 2018 年一样,该类别由 Next.js 领头。起初,Next.js 作为服务器上呈现 React 应用程序的解决方案而闻名。...另外,一个新的网络构建工具 Vite 也 2020 年问世。该工具由 ES 模块提供支持,是从命令行开始使用 Vue.js 应用程序的最快方法。 ? ?... Webpack 仍是实用的构建工具,其新缓存层可显著提高构建性能。 Monorepos 正在成为主流:Yarn 和 Lerna 被广泛使用,npm 7 也加入了进来。...其余类别部分排名 JavaScript 中的 CSS ? 测试工具 ? 移动应用程序 ? JS 特色/编译器 ? 状态管理 ? GraphQL ? 学习资源 ? ?

    2.2K20

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

    我应该使用Angular吗? 这取决于有些开发人员会告诉你最好使用React并在没有额外代码的情况下构建自己的组件。这也可能是一个问题。...因此,通过使用Angular CLI,我们已经开发环境中工作,无需编写配置或实际执行任何操作。但我们此时刚刚开始...... 组件 我们有我们的空应用程序运行。...如果您在AngularJS中有一些背景知识,那么您知道存在控制器,指令和组件,这些控制器,指令和组件某种程度上类似于指令更简单,允许您升级到Angular 2.对于那些没有那种精彩体验的用户他们并找出什么地方...有些事情是不对的; 我们有我们的卡片阵列,但我们正在获得一个空白页面。 我们AppComponent级别上定义了我们的卡片数组,但是我们没有将它传递给CardList输入。...从我们的日志中可以看出,我们正在明确调度Action,没有服务器请求在这里为我们提供。怎么了?我们忘了将我们的效果加载到我们的AppModule中。

    42.6K10

    前端开发路线图——从小白到前端工程师

    比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知,以及没有重载页面的情况下重载页面的特定部分,这些都是用JavaScript做的。...曾经有一段时间每个人都对jQuery疯狂,也有充分的理由;这是一个强大的库,JavaScript基础上提供了一个封装,让你可以用兼容浏览器的方式执行任何东西。...如果你要考虑它们的市场需求的话,我会选择Bootstrap。 CSS组织 随着你的应用不断膨胀,CSS也开始变得混乱难以维系。...如果你选择Angular,你就得用TypeScript(没有它你也能开发出Angular应用,但是我们还是推荐你使用)和Rx.js,这些除了Angular应用以外在其他地方也能用得上。...一开始你可能会觉得很吓人,总感觉自己没有掌握,这是正常的,慢慢你就会觉得自己变得越来越好。还有,陷入困境时别忘了寻求帮助,你会惊喜地发现有多少人愿意帮助你的,或者至少我愿意。

    1.3K10

    2018年Web开发人员应该学习的12个框架

    传统上,JavaScript被用作客户端脚本语言,它与HTML一起用于客户端提供动态行为。它在Web浏览器上运行,Node.js允许你服务器端运行JavaScript。...Tye Node.js是一个开源的跨平台JavaScript运行时环境,用于执行JavaScript代码服务器端。将它们发送到客户端之前,你可以使用Node.js服务器端创建动态网页。...它就像Angular由Facebook,Instagram以及个人开发者和公司社区维护。它允许Web开发人员创建大型Web应用程序,这些应用程序可以随时更改而无需重新加载页面。...Web开发世界分为Angular和React,由您自己选择。大多数时候,它取决于环境; 例如,如果你正在使用基于React的项目,那么显然,你需要学习React。...如果你已经了解C语言之一并且正在寻找移动应用程序开发的职业,那么我强烈建议你2018年学习Xamarin,以及完整的Xamarin开发人员课程:iOS和Android!是一个很好的课程开始。

    5.5K40

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

    一旦构建了用于生产的应用程序,您将不需要 Node.js,因为最终的捆绑包只是静态 HTML、CSS 和 JavaScript,可以由任何服务器或 CDN 提供服务。...虽这么说,如果您正在使用 Angular 构建全栈 Web 应用程序,并且您喜欢使用 JavaScript 作为前端和后端,则可能需要 Node.js 来创建后端部分。...本例中,Node.js 用于构建应用程序的后端部分,并且可以替换为您想要的任何服务器端技术,例如 PHP、Ruby 或 Python。... Angular 不依赖 Node.js,除了它的 CLI 工具和从 npm 安装包。 NPM 代表Node包管理器。它是托管 Node 包的注册表。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。

    47600

    现代前端开发路线图:从零开始,一步步成为前端工程师

    曾经有一段时间每个人都对jQuery疯狂,也有充分的理由;这是一个强大的库,JavaScript基础上提供了一个封装,让你可以用兼容浏览器的方式执行任何东西。...如果你要考虑它们的市场需求的话,我会选择Bootstrap。 CSS组织 随着你的应用不断膨胀,CSS也开始变得混乱难以维系。...如果你选择Angular,你就得用TypeScript(没有它你也能开发出Angular应用,但是我们还是推荐你使用)和Rx.js,这些除了Angular应用以外在其他地方也能用得上。...比方说如果你决定用React,最值得关注的选项是Next.js 和 After.js。如果是Angular,你可以选Universal。对于Vue.js,我们有 Nuxt.js。...一开始你可能会觉得很吓人,总感觉自己没有掌握,这是正常的,慢慢你就会觉得自己变得越来越好。还有,陷入困境时别忘了寻求帮助,你会惊喜地发现有多少人愿意帮助你的,或者至少我愿意。

    75360

    「Web趋势」JavaScript和Web开发InfoQ趋势报告

    关键的买点 新的JavaScript、CSS、HTML和WebAssembly标准的速度正在加快,以覆盖现代应用程序开发的所有方面。...WebVR/WebXR和机器学习,推动更好的3D渲染和数据可视化 React的采用已经大大增加,新一波的框架正在获得大量使用,其中包括Vue.js 应用程序的广泛选择,从先进的Web应用程序,到Electron...CSS HoudiniCSS领域掀起了一场热潮,PostCSS等工具正在挑战SASS、LESS和Stylus等现有的CSS预处理程序。CSS Houdini是我们继续关注的一个领域。...TypeScript中编写,试图解决Node.js的挑战。这是一个非常早期的项目,显示了重大的前景。...NativeScript为Angular和Vue.js用户提供了本地编译选项,用于部署使用web技术编写的移动应用程序。

    79010

    一次神奇之旅:全栈开发者

    CSS 如今,几乎所有的Web应用都需要美观,无论它们是常规台式机还是移动设备上打开的,您都没有时间自己编写所有必要的CSS代码来实现这一目标。...有许多不同的CSS框架(例如Bootstrap和Tailwind)与著名的Frontend框架(例如Angular,React等)兼容,这将使您的生活变得更加轻松。...前端框架 由于性能优势,单页应用程序如今已成为当今的发展之路。学习前端框架是最实用的方法。三大组件是Angular,React和Vue,当然不是您唯一的选择。...您可以使用任何JavaScript引擎,将其包装在一个应用程序中,该应用程序提供一个干净的界面来获取用户的JavaScript代码并在JavaScript引擎中执行。...您还可以提供API,以执行无法JavaScript引擎上运行的操作,例如文件系统IO,网络等。瑞安·达尔(Ryan Dahl)接受了这个想法,制作了Node.js

    90130

    精读《2021 前端新秀回顾》

    它给出了前端最佳实践,并解决了没有精力持续给项目进行全方位优化,或追逐不上潮流的问题,因为 next.js 本身正在成为前端潮流的发源地。...第四名 angular 笔者已经很久没有关注 angular 框架了,无法给出什么点评。但从 svelte 新增热度超过 angular 来看,可能大部分开发者对 angular 的态度和我一样。...第五名 solid 类似 svelte,提前编译,按需打包,重要的是,其类似 React useEffect 的 API createEffect 依赖变化后,仅该函数会重新执行,而不会导致整个组件重新执行...第四名 Twin 基于 Tailwind CSS 实现CSS-In-JS 版的语法,可以认为是内置了一套最佳实践的 CSS-In-JS 库,也没解决太大的痛点,只是如果你同时喜欢 Tailwind...说到跨端,基于 Flutter 的 kraken 也绝对值得一提,它利用 Flutter 高一执行渲染层能力,并解决了 Dart 生态对前端不友好的问题,做了一个 html+css+js 到 dart

    1.6K40

    2022年React对比Vue

    IE和TS的支持了,前者微软早已宣布2022年6月25日停止支持IE,后者正在被真流行的TSX解决。...TypeScript的支持 本站是Next.js+Node.js+MySQL搭建的CSS方案使用的是styled-jsx(Next.js自带但是并不好用)本站是毕业设计,说是为了React而用React...只是保证使用的技术栈更多,截止到2022/1/3网站已经经历过7次重构基本上是每学习到一个新技术就要应用到其中。...所谓的Vue的功能在React中可通过各种封装实现,说Vue的语法糖太多,糖吃多了,没有糖了就各种不适 (反驳)那你为什么不使用原生JS进行开发呢原生JS没有糖那才是大道至简,并且React中很多时候还需要使用...,因为模板自带的样式隔离无法TSX中使用所以只能使用css-in-js方案 请求:axios/fetch,axios毋庸置疑是目前请求库中最火热的但是很多产品要求极致性能并且本身也会对请求库进行二次封装如果没有低级浏览器兼容需求的话可以考虑封装

    1.9K20
    领券