标签: angular6

我最近在@ngrx/store学习Angular 6,而其中一个教程是使用@ngrx/store进行状态管理,但我不明白在场景后面使用@ngrx/store的好处.

例如,对于简单的登录和注册操作,以前通过使用该服务(让我们称之为AuthService),我们可以使用它来调用后端api,在AuthService中存储"userInfo"或"token",将用户重定向到"HOME"在我们需要通过使用DI获取userInfo的任何组件中注入AuthService,只需要一个文件AuthService处理所有内容.

现在,如果我们使用@ngrx/store,我们需要定义Action/State/Reducer/Effects/Selector,它可能需要写入4或5个文件来处理上述动作或事件,然后有时我们还需要调用backend api使用服务,这看起来要复杂多余......

在其他一些场景中,我甚至看到一些页面使用@ngrx/store来存储对象或对象列表,如网格数据.,是对某种内存存储使用情况的？

回到这个问题,为什么我们在Angular项目中使用@ngrx/store而不是服务注册存储？ 我知道这是用于" 国家管理 "的用法,但究竟什么是"国家管理"？这是什么类似事务日志,我们什么时候需要它？我们为什么要在前端管理它？请随时在@ngrx /商店区分享您的建议或经验!

我将我的项目从angular-5.x升级到angular-6.x并且它开始给出以下错误,甚至创建虚拟全局变量也不起作用,如此处给出Angular 6 Auth0 - 全局未定义

错误如下:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/has-binary2/index.js (index.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-parser/index.js (index.js:8)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-client/lib/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/services/ApiConnectionServer.ts (auth.interceptor.ts:8)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/toServer.module.ts (ApiConnectionServer.ts:11)
    at __webpack_require__ (bootstrap:81)

解决这个后,我得到以下错误:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/process-nextick-args/index.js (index.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:26)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/simple-peer/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/util/services/call.services.ts (notification.service.ts:12)
    at __webpack_require__ (bootstrap:81) …

"ng serve"中是否有人面临以下警告？

警告在./node_modules/@angular/compiler/src/util.js 10:24-31严重依赖:require函数的使用方式是无法静态提取依赖关系ℹ"wdm":编译时带有警告.

角度版本:

Angular CLI:6.0.8节点:8.11.3操作系统:darwin x64 Angular:6.0.9 ...动画,通用,编译器,编译器 - cli,核心,表单... http,语言服务,平台浏览器..平台浏览器动态,路由器,升级

我尝试更新CLI和Angular但没有成功.util.js中的代码如下所示:

function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/compiler/src/util", ["require", "exports"], factory);
    }
}

我正在构建一个Angular 6应用程序,但每次我想为localhost服务时,我都会收到以下错误:

ERROR in ./node_modules/aws-sign2/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\aws-sign2'
ERROR in ./node_modules/aws4/aws4.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\aws4'
ERROR in ./node_modules/ecc-jsbn/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\ecc-jsbn'
ERROR in ./node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib'
ERROR in ./node_modules/http-signature/lib/verify.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib'
ERROR in ./node_modules/oauth-sign/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\oauth-sign'
ERROR in ./node_modules/request/lib/oauth.js
Module not found: …

我正在尝试启动.NET Core 2/Angular 6 SPA.我使用"dotnet new angular"创建了一个Angular 5应用程序,然后使用angular.io中的本指南进行升级.完成升级后,我尝试使用"dotnet run"运行应用程序,然后出现一个带有错误的丑陋错误页面:

处理请求时发生未处理的异常.

AggregateException:发生一个或多个错误.(发生了一个或多个错误.(NPM脚本'start'退出,但未指示Angular CLI正在侦听请求.错误输出为:Unknown选项:'--extractCss'

InvalidOperationException:NPM脚本'start'退出,但未指示Angular CLI正在侦听请求.错误输出为:未知选项:'--extractCss'

想想也许我在升级过程中错过了一步,我第二次尝试并得到了同样的错误.

以下是我在创建应用后采取的步骤:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
ng update @angular/core
npm install --save @angular/material @angular/cdk @angular/animations hammerjs 
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

我在Windows 10(1703)Enterprise上运行Node版本9.4.0和.Net Core 2.1.200.

有想法该怎么解决这个吗？这是一个完整的堆栈跟踪:

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End …

如何指定Angular 6中使用的环境？该.angular-cli.json文件似乎angular.json已从以前的版本更改为json内部结构.

如何/在此文件中指定要使用的环境？

如何在Angular 6中创建cookie,对于AngularJS有ngcookie在Angular 6中创建cookie的最佳方法是什么.

我已经完成了将我的应用程序更新为Angular 6(它是在5.2版本中).

我有一个错误语法:

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
...
constructor(private router: Router) {}

this.router.events.filter
      (event => event instanceof NavigationEnd).subscribe((res) => 
    {
      // DO something
    });

错误TS2339:类型'Observable'上不存在属性'filter'.

Angular 6中的语法是什么？

谢谢

我正在尝试使用角度6中的多个ng内容构建自定义组件,但这不起作用,我不知道为什么.

这是我的组件代码:

<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
 <div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>

我试图在另一个地方使用这个组件,并在body内部呈现两个不同的HTML代码,并在ng-content中选择标题,如下所示:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

但该组件呈现为空白.你们知道我可能做错了什么,或者在同一个组件中渲染两个不同部分的最佳方法是什么？

谢谢!

我正在尝试按照本指南将我的Angular应用程序从v5更新到v6 .

我成功运行了所有这些命令:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

问题是我在运行此命令时出错:

ng update @angular/core
                  Package "@angular/flex-layout" has an incompatible peer dependency to "rxjs" (requires "^5.5.0", would install "6.2.0").
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.6.2")
Incompatible peer dependencies found. See above.

我不知道如何处理这个问题并且我不想自己尝试以避免破坏应用程序.

有人可以建议做什么？

我目前的依赖关系如下:

{
 ....
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10", …