如何提高Angular2应用程序的加载性能?
angular2应用程序加载缓慢,如何改善负载的性能? i使用html5的Angular2,Typescript. 当前我的应用程序需要4秒钟才能加载. 我托管firebase并使用cloudflare. 我正在做的事情/信息: 我已经压缩了图像. i缩小CSS i缩小JS. 我在脚本上使用异步. 我的脚本在我的 中 脚本约为700kb 我使用Google速度测试并获得65% 我使用了我使用的libs的缩小版本. Bootstrap等. 使用Systemjs. 这是种子应用程序使用: https://github.com/mgechev/mgechev/angular-seed 流: 应用程序加载时,它显示一个蓝屏(这是Bootstrap CSS),然后4秒钟后,应用程序加载并工作得非常快.但是要加载4秒钟.似乎Systemjs的App.js文件正在减慢整个应用程序,并且不够快地显示视图. 这是我的网站速度测试: 这是我的网站
4 2023-05-23
编程技术问答社区
如何在Angular 2中重新加载具有分页功能的页面?
如何在Angular 2上重新加载当前页面? 如果第2页(分页)中的IAM并刷新页面将显示第1页(url pageload) 但是我希望我刷新第2页,它将出现在第2页 中 解决方案 这应该在技术上使用window.location.reload(): 来实现 html: Refresh ts: refresh(): void { window.location.reload(); } 更新: 这是一个基本 Stackblitz 示例显示了刷新的作用.请注意,执行window.location.reload()时,请保留"/hello"路径上的URL.
2 2023-05-16
编程技术问答社区
angular2卫士在页面刷新时不工作
在每个请求之前,我想确保有一个用户配置文件可用.我使用Canactivatechild Guard来做到这一点. 根据Angular2的文档,可以返回可观察的: https://angular.io/api/router/canactivatechild app.routes.ts export const routes: Routes = [ { path: '', canActivateChild: [ProfileGuard], children: [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, { path: 'login', component: LoginComponent, canActivate: [G
在Resolve中使用BehaviorSubject观察器的Angular 2 Router
我正在尝试使用Resolve设置路由器配置,该解决方案可以从行为主体返回可观察到的.我已经在Angular 4.0.0-Beta8和Angular 2.4.8+路由器3.4.8 中尝试了一下. 这是我的服务: @Injectable() export class MyService { private _data: BehaviorSubject> = new BehaviorSubject(undefined); constructor() {} public getData(): Observable> { this._data.next(['test1', 'test2', 'test3']); let asObservable = this._data.asObservable().delay(1000); asObservable.s
0 2023-05-07
编程技术问答社区
在Angular 2中调用组件刷新
我正在尝试实现一个基于用户是否登录的链接. 我正在使用提供tokenNotExpired()函数的angular2-jwt库. 我有2条路线,/home和/login.我有一个Navbar组件,该组件在之外,这意味着它仅初始化一次,也不是每次路线更改时. 成功登录后,我正在调用router.navigate(['/home]).房屋和登录都有检查用户是否在其各自的ngOnInit()功能中登录的检查.因此,家庭组件能够检测到已登录的用户. 但是,我无法更新Navbar,因为它没有被告知登录. 任何人都可以告诉我正确实施此更改检测的正确方法吗? 谢谢. 解决方案 通过服务公开登录状态 @Injectable() export class UserAuthService{ userLoggedIn : bool = false; //call this function when login s
4 2023-05-07
编程技术问答社区
获取路线查询参数
我试图从rc1迁移到rc4,并且难以获得查询字符串参数. ActivatedRoute对象始终为空. hero.component.ts import {Component, OnInit} from "@angular/core"; import {Control} from "@angular/common"; import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router'; @Component({ template: '../partials/main.html', directives: [ROUTER_DIRECTIVES] }) export class HeroComponent implements OnInit { constructor(private _activatedRoute: activatedRoute) { } ngOnIn
0 2023-05-07
编程技术问答社区
如何在Angular2 rc3路由中处理oauth重定向urls的哈希片段
我正在尝试找到一种方法来处理设置Angular2打字途径(使用3.0.0-Alpha.8路由器),该路由将处理以哈希片段开头的路由. 我正在使用的应用程序通过使用OAuth2的轨道后端来处理所有外部登录(我无法控制的).将用户重定向到外部登录页面工作正常,但是当重定向URL时,始终将某种形式的http://localhost:4200#access_token=TOKEN(令牌是一系列数字和字母)发送回去,但我不知道如何设置该路由可以处理#标志,以便我可以捕获并重定向到适当的组件. 在以前的Angular1应用中,ui-router能够在以下路线中使用: .state('accessToken', { url: '/access_token=:token', controller: 'LoginController', params: { token: null } }) ,这没有问题接受回复的重定向URL,然后将所有内容传递给LoginControll
0 2023-05-02
编程技术问答社区
为什么我在node_modules里有@angular/core,但还是得到这个错误?
我从这里下载了一个示例项目 cliquickstart.zip 和ran npm安装在根文件夹中,如本教程 中 https://wwwww.youtube.com/watch?v 和某些原因,尽管我在node_modules和package中都有相应的角包装. Hash: faeff28da7a6ba00851d Time: 8547ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 171 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 5.41 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles)
2 2023-04-28
编程技术问答社区
在新的@angular/router 3.0.0-alpha.3^中没有发现provideRouter和RouterConfig。
我正在将Angular2应用迁移到RC2并尝试使用路由器的版本3 alpha. 我遵循了 plunker angular docs 用于路由 但是我一直遇到以下错误: /@angular/router/index''没有导出成员'Providerouter' /@angular/router/index''没有导出的成员'routerconfig' 尝试在我的app.router.ts文件中使用以下导入时: import { provideRouter, RouterConfig } from '@angular/router'; 我正在使用CommonJS模块格式的Visual Studio中使用Typescript. 这是我套餐的依赖.JSON "@angular/common": "2.0.0-rc.2", "@angular/compiler": "2.0.0-rc.2", "@angular/core": "2.0.0-rc.2",
0 2023-04-28
编程技术问答社区
在部署到Http服务器时,Angular 2的路由不工作
我将开发一个简单的Angular 2应用程序.我使用Angular CLI创建了一个带有路由的项目,并使用" NG生成组件"命令在应用中添加了几个组件.然后,我在 app-routing.module.ts 中指定路由如下. import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { UserComponent } from './user/user.component'; import { ErrorComponent } from './error/error.component'; import { S
0 2023-04-27
编程技术问答社区
是否有可能在API的响应返回后,在用户浏览了不同的页面后向用户显示一个通知?
首先,对于缺乏代码的不足,我只是在寻找能够完成的明确性以及API/库将允许我这样做的清晰度. 我有一个用Angular编写的Web应用前端.由于服务器的位置和返回的数据性质,它从中获取数据的后端服务之一通常可能需要2-3分钟才能返回.现在,我在前端显示了一个动画旋转器,直到返回响应为止,这并不好,因为这阻止用户在收到响应之前做任何事情.我想知道的是,是否可以从前端发送请求,并允许用户在网站周围导航,直到返回响应? 类似: 单击按钮> API调用已发送>用户导航到另一个页面>用户导航另一页>返回API响应>在前端简要显示通知,以便让用户知道其操作已完成. 我正在研究推送通知,但希望通知是实际的HTML Web元素. 解决方案 是的,这是完全可行的. 您应该在根或需要显示通知的地方具有通知显示component.现在,此组件应从通知service中获取数据,您可以在所述API完成后存储响应. 您需要做的就是在NotificationService中
0 2023-04-27
编程技术问答社区
Angular2 Router和Express集成
我使用Angular2路由器和Express遇到问题,但是以前的问题似乎都没有我需要的解决方案.我正在使用最新版本的Angular2-CLI. 当我将浏览器引导到localhost:3000时,我会收到Angular2-CLI生成的通用" App Works"消息.当我尝试导航到我的一个孩子路线之一时,我的问题就会出现,例如Localhost:3000/auth/login-它将我重定向回到同一"应用程序作品"页面,而不是向我展示一个页面,上面写着"登录工作" . 查看stack Exchange上的其他问题,我认为问题在这里: app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist/index.html')); }); 当我用a/替换 *时,而不是将我重定向回到目标页面时,它给了我无法获得错误. 总而言之,我的问题是集成到我的Express应用程序中的Ang
4 2023-04-26
编程技术问答社区
如何使用Angular2的路由
我正在尝试编写一个单页应用程序,但我无法获得工作路由.我尝试使用许多教程,但考虑到Angular2仍在beta上,它们似乎很快就过时了. 看来,一旦我向路由器指令或路由器配置或路由器提供程序添加任何引用,应用程序就会停止工作,并且以下错误在浏览器的控制台上打印出来: Error: Zone
8 2023-04-25
编程技术问答社区
类型为'{header:Header;}的参数不能分配给类型为'RequestOptionsArgs'的参数。
我在尝试通过http.post/get request Argument of type '{header:Header;}' is not assignable to parameter of type 'RequestOptionsArgs'. Property 'null' is missing in the type '{header:Header;}' 中的标题时会遇到关注错误 我尝试了许多解决方案,但没有锁定. 在这里我的代码: import { Injectable } from '@angular/core'; import { Response, RequestOptions, Headers, Http, URLSearchParams} from '@angular/http'; import { Observable, Subject } from 'rxjs/Rx'; import {Company} from './companyMaste
0 2023-04-24
编程技术问答社区
如何在Nodejs中处理angular2路由路径?
我正在使用具有Angular2的Nodejs应用程序.在我的应用程序中,我有一个主页和搜索页面.对于主页,我有一个HTML页面,该页面将为 localhost渲染:3000/,并且从主页用户导航到 search I.E localhost:3000/search Angular2路由处理的页面. 我没有Angular2的搜索页面的页面.但是,当我直接击中 localhost:3000/search ,因为我在节点应用中没有此路由时会出现错误. 我不知道如何在节点应用中处理此操作? 解决方案 如果直接在浏览器导航栏中输入localhost:3000/search,您的浏览器会向服务器上的"/搜索"请求,可以在控制台中看到(请确保您检查" Preserve Log'按钮). Navigated to http://localhost:3000/search 如果运行完全静态服务器,则会生成错误,因为服务器上不存在搜索页面.例如,使用Express,您可以捕获这些
4 2023-04-24
编程技术问答社区
Angular 2 Router-Named outlets
文档不是很好,但是我试图在同一页面/路线上拥有不同的路由器插座. 我在我的app.component.html 中有这个 我的app.routes.ts { path: '', component: HomeComponent, outlet: 'primary' }, { path: '', component: DashboardComponent, outlet: 'dashboard' }, { path: '**', redirectTo: '404' } 因此,我想在我的startpage上(即" example.com",而不是" example.com; dashboard:dashboard")我想在主路由器插座和仪表板插座
2 2023-04-23
编程技术问答社区
用Angular 2连接Google Maps Nativescript插件
我正在尝试将Google Maps插件用于Nativecript( https:https://github .com/dapriett/nativescript-google-maps-sdk )带有Angular 2和{n} - 角路由器.我只能在NativeScript中使用它,但是一旦添加了Angular 2,并且路由器将无法显示在UI中的地图. 由于a 标签未进入angular2 {n}组件模板,因此我无法在xmlns:maps="nativescript-google-maps-sdk" 上使用xmlns:maps="nativescript-google-maps-sdk"命名空间来实例化 {n}组件基本页面提供了一些指导,但它无法以我尝试的方式工作: https://docs.nativecript.org/ui/ui-with-xml#user-interface-components 对这样做的正确
4 2023-04-20
编程技术问答社区
使用Cordova IOS的Angular 2应用基础href
我正在使用Cordova的Angular 2开发应用程序.我已经使用了Angular CLI来构建应用程序.在iOS应用程序方面,我现在遇到了一些启动问题的路由问题.基本HREF似乎是错误的.如果我使用:设置基本HREF,则应用程序未加载.如果我在使用以下方式引导应用程序时设置了基本HREF:应用程序将加载,但我会得到以下例外: 异常:错误:未被发达(在承诺中):错误:无法匹配任何 路线: 'var/contains/bundle/application/3C8966ED-7DDD-4309-8C18-10B778C5AE15/test.app/www' 因此,该应用程序无法正常运行,因为有一些关键文件在应用程序开始时不会加载.对于Android,我遇到了同样的问题,但是我找到了解决方案,可以在以下问题中设置基本HREF android解决方案.有人遇到这个问题并有解决方案吗? 编辑:我通过使用此问题解决了问
8 2023-04-01
编程技术问答社区
ng2-translate在懒惰加载模块中不工作
我正在使用我创建的Angular 2 RC5应用程序中的语言处理.该应用具有两个功能模块,一个懒惰的加载和一个急切的加载. TranslateModule可通过共享模块提供.问题在于,翻译管在急切的装载模块中工作正常,而不是懒惰的模块.要验证它与加载方法有关 可以在此处找到证明该问题的plunk: plunker "> plunker 重要的代码是下面也在下面. 初始页面是急切的加载页,因此字符串看起来还不错.单击登录,它将转到所有字符串均为上案例的懒惰的登录名,即未翻译. 任何帮助将不胜感激. app.module: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { TranslateModule } from 'ng2-translate/ng2-translate'; impor
0 2023-03-30
编程技术问答社区