标签: angular-cli

在最新版本的Angular 6中,使用providedIn服务元数据中的属性在模块中注册服务:

@Injectable({
  providedIn: 'root',
})
export class HeroService {}

但是文档仍然指的是providers在模块元数据中注册模块数组中的服务,就像我们在Angular 5中一样:

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

那么应该使用哪种方法使注入器知道它应该注入的服务&模块提供者的数组方法是否会被弃用？

我是角度5的新手,并试图在打字稿中迭代包含另一张地图的地图.如何在下面的角度下面迭代这种地图是组件的代码:

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map = new Map<String, Map<String,String>>();
  map1 = new Map<String, String>();

  constructor() { 


  }

  ngOnInit() {
    this.map1.set("sss","sss");
    this.map1.set("aaa","sss");
    this.map1.set("sass","sss");
    this.map1.set("xxx","sss");
    this.map1.set("ss","sss");


    this.map1.forEach((value: string, key: string) => {
      console.log(key, value);

    });


    this.map.set("yoyoy",this.map1);

  }



}

它的模板html是:

<ul>
  <li *ngFor="let recipient of map.keys()">
    {{recipient}}
   </li>


</ul>

<div>{{map.size}}</div>

我正在尝试使用“npm install -g @angular/cli”安装 Angular cli，但遇到以下错误：

npm ERR! Unexpected token '.'
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<user>\AppData\Local\npm-cache\_logs\2022-02-02T15_25_07_320Z-debug-0.log

npm 版本：8.3.1 节点版本：v17.4.0

任何帮助将不胜感激！谢谢 ：）

我想在使用Angular CLI创建的Angular(4+)项目中使用Bootstrap 4和SASS.

特别是我需要:

• 使用SASS而不是CSS作为全局样式和组件样式
• 编译Bootstrap SASS源以及我的自定义*.scss样式
• 确保我的自定义样式覆盖Bootstrap源,因此我可以在需要时覆盖Bootstrap源,而无需编辑Bootstrap源本身(可以轻松升级Bootstrap源版本)
• 每当我的任何*.scss文件(包括组件和全局样式)更改为ng serve脚本时,添加监视和自动重新编译

我不得不在我的项目上运行“npm 审计修复”，然后在所有“ng serve”之后，我收到以下错误：

TypeError 中的错误：tooling_1.constructorParametersDownlevelTransform 不是函数

有没有人经历过这种情况？

谢谢！

解决方案：

npm install @angular-devkit/build-angular@0.901.9

我想让我的angular-cli应用程序更快!

是的,所以我花了几天时间更新我的NG2应用程序以使用angular-cli.起初这是一个非常令人沮丧的经历,然而,我真的看到了光明并享受着开发过程.显然,努力工作和思想已被纳入框架.

但我的申请很慢:

根据Pingdom的说法 ,我的应用程序比互联网上所有其他网站的21%快.公平地说,这是一个开箱即用的构建,我相信我可以大大提高速度.

我的最后一个问题是:如何从根本上减少角度网站的大小？

目前,应用程序:fairplay.poker需要7秒才能加载(如果你住在纽约),所以我相信大多数人都会在它有机会加载之前继续前进.

显然,我需要开始一个从根本上提高应用程序速度的旅程,但我需要你的帮助!(因为我不知道我在做什么:)

什么是标准练习,我在哪里开始排序？

进展:

作为建议,我将在这里更新它们.

1. @cyrix建议的生产就绪版本:ng build -prod

Zip文件下降超过一兆,而Pingdom的新统计数据与原始统计数据相比有了很大改进:

2.建议缩小图像尺寸.

有些图像比它们应该有的大一些,因此尺寸减小了.然而,这并不是一个重大改进,这些数据已经将网站提升到前73%的网站,加载时间略快一些.

3. @yurzui建议使用gzip压缩,所以我启用了这个.显然,它正在工作,总文件大小减少了一半以上(609字节),但这并没有显示在Pingdom上.不过我注意到等级有所改善.

我使用这个站点来检查压缩,这个站点向我展示了如何做到这一点,因为Cpanel似乎在从管理启用时不起作用.该站点似乎也是一个很好的gzip压缩资源.

4 @Yuruzi建议实现浏览器缓存.所以我做到了!

真正有趣的是性能等级的改进,那就是摇滚!加载时间快一点,现在该网站占据了74%的前列.根据Yuruzi的建议,我使用这篇文章作为指导.

5感谢#angularjs频道上的@ wafflej0ck.看来我需要提高我已经改变为概述"AddOutputFilterByType DEFLATE*"压缩类型来完成的GZip 这里.

这似乎增加了网站:

6有人建议使用AOT,因此我从这篇文章中删除了一页.

我浏览了大部分文档,然而,我遇到了一个错误的世界,并决定将其留待以后,希望当AOT更稳定时.

我在GitHub上看到Angular-Cli预装了AOT并且上面的文章没有关系.我不确定这是多么真实但是我在编译代码时运行以下命令:ng build --prod --aot

7.调整htaccess文件中的mod_expires.c.

性能等级已显着提高到98%,加载时间现在不到一秒,网站比测试网站的91%快.

该文件目前看起来像这样:

ExpiresActive On ExpiresDefault"access plus 2 days"ExpiresByType image/x-icon"access plus 1 year"ExpiresByType image/jpeg"access plus 1 year"ExpiresByType image/jpg"access plus 1 year"ExpiresByType image/png"access plus 1 year "ExpiresByType image/gif"访问加上1年"ExpiresByType应用程序/ …

我通过谷歌和角度cli doc搜索但是找不到任何方法使用angular cli安装特定版本的角度.它甚至可能吗？

在尝试更新我的Angular CLI和NPM时,我发现自己陷入了几乎无穷无尽的错误循环.每次我更新时,都会收到WARN消息,告诉我安装对等依赖项(见下文),但每次安装依赖项时,都会遇到更多的WARN消息.有没有更好的方法来处理这种情况,还是认真花费数小时？

npm WARN @angular/animations@5.2.1 requires a peer of @angular/core@5.2.1 
but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler-cli@5.1.0 requires a peer of typescript@>=2.4.2 
<2.6 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
@angular/core@^4.0.3 but none is installed. You must install peer 
dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
@angular/common@^4.0.3 but none is installed. You must install peer 
dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a …

今天,在完成一些基本的AngularJS简介时,我遇到了一个问题.我打开PowerShell来开始这个项目.NPM工作.

我能够使用安装Angular

npm install -g @angular/cli

任何时候我试图运行我会得到

the term 'ng' is not recognized as the name of a cmdlet

我想在我的Angular项目中使用Google Maps API,因此我使用这两个命令来安装npm包:

npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev

我将此行添加到我的组件中:

import {} from "@types/googlemaps";

但是我在VS Code中看到了这两个错误:

[ts] File 'h:/Angular Projects/Breakfast/client/breakfast/node_modules/@types/googlemaps/index.d.ts' is not a module.
[ts] Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'.

我添加了这些行

"types": ["googlemaps"]
"moduleResolution": "node"

到tsconfig.json和tsconfig.spec.json,但仍然没有运气.在Chrome开发工具上,我看到以下错误:

Error: Uncaught (in promise): TypeError: Cannot read property 'Autocomplete' of undefined
TypeError: Cannot read property 'Autocomplete' of undefined

角度版本6打字稿版本2.9.2

我也尝试过Angular 5.