angular - 如何修复无限加载的 Angular 9 网站？

Question

我正在处理的所有 Angular 9 项目都有问题。当我在运行后尝试在本地浏览器中加载它们中的任何一个时，ng serve我只会得到一个永远不会停止加载的白页。如果我让它运行足够长的时间，浏览器最终会告诉我有一个长时间运行的脚本。

我在编译时和运行时都没有在angular cli中收到任何错误或警告。浏览器也不会报告任何错误。

如果我将项目移动到另一台计算机，它们可以正常工作。

当我在做一个项目时，这个问题突然出现了。我已经尝试删除每个非必要的文件/文件夹（如node_modules）并重新初始化它们，但这似乎没有帮助。

如果我暂停脚本执行，它主要会_updateTaskCount在文件中的函数内暂停zone-evergreen.js。它确实在其他地方也暂停了，但 10 次中有 9 次是_updateTaskCount.

我注意到的另一件事，我不知道这是相关的还是预期的行为，但在网络选项卡中，我看到请求的状态sockjs.js一直处于待处理状态。

如果我在我的代码中设置断点，那么唯一被命中的是来自文件的ngOnInit和构造函数的断点app.component.ts。

我不知道这是否相关，但这是在该函数内暂停时的调用堆栈：

_updateTaskCount (zone-evergreen.js:263)
scheduleTask (zone-evergreen.js:222)
scheduleMicroTask (zone-evergreen.js:230)
scheduleResolveOrReject (zone-evergreen.js:847)
resolvePromise (zone-evergreen.js:785)
(anonymous) (zone-evergreen.js:705)
(anonymous) (router.js:7275)
unsubscribe (Subscription.js:34)
unsubscribe (Subscription.js:47)
unsubscribe (Subscriber.js:69)
unsubscribe (Subscription.js:47)
unsubscribe (Subscriber.js:69)
unsubscribe (Subscription.js:47)
unsubscribe (Subscriber.js:69)
_innerSub (switchMap.js:41)
_next (switchMap.js:36)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (filter.js:33)
next (Subscriber.js:49)
next (Subject.js:39)
next (BehaviorSubject.js:30)
setTransition (router.js:7379)
scheduleNavigation (router.js:7765)
navigateByUrl (router.js:7589)
navigate (router.js:7623)
canActivate (auth-external.guard.ts:16)
(anonymous) (router.js:5556)
(anonymous) (defer.js:8)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (take.js:22)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (mergeMap.js:21)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_complete (combineLatest.js:52)
complete (Subscriber.js:61)
(anonymous) (subscribeToArray.js:5)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (combineLatest.js:26)
subscribe (Observable.js:23)
call (scan.js:18)
subscribe (Observable.js:23)
call (filter.js:13)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
call (take.js:22)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (switchMap.js:46)
_next (switchMap.js:36)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (switchMap.js:17)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (mergeMap.js:21)
subscribe (Observable.js:23)
call (filter.js:13)
subscribe (Observable.js:23)
call (take.js:22)
subscribe (Observable.js:23)
call (defaultIfEmpty.js:10)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (mergeMap.js:21)
subscribe (Observable.js:23)
call (filter.js:13)
subscribe (Observable.js:23)
call (take.js:22)
subscribe (Observable.js:23)
call (defaultIfEmpty.js:10)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
_complete (defaultIfEmpty.js:25)
complete (Subscriber.js:61)
_complete (Subscriber.js:79)
complete (Subscriber.js:61)
_complete (Subscriber.js:79)
complete (Subscriber.js:61)
_complete (mergeMap.js:67)
complete (Subscriber.js:61)
(anonymous) (subscribeToArray.js:5)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (mergeMap.js:21)
subscribe (Observable.js:23)
call (filter.js:13)
subscribe (Observable.js:23)
call (take.js:22)
subscribe (Observable.js:23)
call (defaultIfEmpty.js:10)
subscribe (Observable.js:23)
call (mergeMap.js:21)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (tap.js:46)
next (Subscriber.js:49)
notifyNext (switchMap.js:70)
_next (InnerSubscriber.js:11)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (map.js:16)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (switchMap.js:46)
_next (switchMap.js:36)
next (Subscriber.js:49)
notifyNext (switchMap.js:70)
_next (InnerSubscriber.js:11)
next (Subscriber.js:49)
_next (tap.js:46)
next (Subscriber.js:49)
_next (tap.js:46)
next (Subscriber.js:49)
notifyNext (mergeMap.js:72)
_next (InnerSubscriber.js:11)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
(anonymous) (subscribeToArray.js:3)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (map.js:16)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (mergeMap.js:59)
_tryNext (mergeMap.js:53)
_next (mergeMap.js:36)
next (Subscriber.js:49)
_next (tap.js:46)
next (Subscriber.js:49)
notifyNext (switchMap.js:70)
_next (InnerSubscriber.js:11)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (Subscriber.js:72)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (map.js:35)
next (Subscriber.js:49)
_next (throwIfEmpty.js:24)
next (Subscriber.js:49)
_complete (takeLast.js:52)
complete (Subscriber.js:61)
_complete (mergeMap.js:67)
complete (Subscriber.js:61)
(anonymous) (subscribeToArray.js:5)
_trySubscribe (Observable.js:42)
subscribe (Observable.js:28)
call (mergeMap.js:21)
subscribe (Observable.js:23)
call (takeLast.js:22)
subscribe (Observable.js:23)
call (throwIfEmpty.js:13)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
call (catchError.js:16)
subscribe (Observable.js:23)
call (map.js:16)
subscribe (Observable.js:23)
subscribeToResult (subscribeToResult.js:9)
_innerSub (switchMap.js:46)
_next (switchMap.js:36)
next (Subscriber.js:49)
notifyNext (switchMap.js:70)
_next (InnerSubscriber.js:11)
next (Subscriber.js:49)
(anonymous) (subscribeToPromise.js:5)
invoke (zone-evergreen.js:364)
onInvoke (core.js:41836)
invoke (zone-evergreen.js:363)
run (zone-evergreen.js:123)
(anonymous) (zone-evergreen.js:857)
invokeTask (zone-evergreen.js:399)
onInvokeTask (core.js:41814)
invokeTask (zone-evergreen.js:398)
runTask (zone-evergreen.js:167)
drainMicroTaskQueue (zone-evergreen.js:569)
Promise.then (async)
scheduleMicroTask (zone-evergreen.js:552)
scheduleTask (zone-evergreen.js:388)
onScheduleTask (zone-evergreen.js:272)
scheduleTask (zone-evergreen.js:378)
scheduleTask (zone-evergreen.js:210)
scheduleMicroTask (zone-evergreen.js:230)
scheduleResolveOrReject (zone-evergreen.js:847)
resolvePromise (zone-evergreen.js:785)
(anonymous) (zone-evergreen.js:705)
webpackJsonpCallback (bootstrap:25)
(anonymous) (modules-external-view-external-view-module.js:1)

我不知道该怎么做。

编辑：这是运行后的输出ng serve：

16% building 51/52 modules 1 active ...-loader\src\index.js??embedded!node_modules\sass-loader\dist\cjs.js??ref--13-3!src\styles.scssDEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Since this assignment is at the root of the stylesheet,
the !global flag is unnecessary and can safely be removed.

chunk {common} common.js, common.js.map (common) 3.25 kB  [rendered]
chunk {main} main.js, main.js.map (main) 129 kB [initial] [rendered]
chunk {modules-external-view-external-view-module} modules-external-view-external-view-module.js, modules-external-view-external-view-module.js.map (modules-external-view-external-view-module) 29.8 kB  [rendered]
chunk {modules-internal-view-internal-view-module} modules-internal-view-internal-view-module.js, modules-internal-view-internal-view-module.js.map (modules-internal-view-internal-view-module) 49.8 kB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 150 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.16 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 725 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.89 MB [initial] [rendered]
Date: 2020-07-09T09:29:02.896Z - Hash: c8002f2bc2cc70210c50 - Time: 38856ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

标签： angulartypescriptloading

Answer 1

首先，使用以下命令检查任何过时的节点模块，

npm outdated

过时的命令将列出所有不是最新的包

是否有任何过时的然后使用命令升级这些，

npm update --save/--save-dev