标签: angular5

Iam现在迷路了，需要一些帮助。

我有一个

• 带有SpringSecurtiy 4.3的SpringBoot服务器。
• Angular 5应用

并希望启用CSRF保护，因为默认情况下都应启用CSRF保护（文档说）：不是！

在SpringBoot上，我需要添加以下安全配置：

http
.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

在Angular上，我需要添加以下模块：

imports: [
    ...,
    HttpClientModule,
    HttpClientXsrfModule, //(!)
...

服务器的底线是在每个响应中发送XRSF-TOKEN。

-但每个人都有不同。那是对的吗？我希望在客户端会话中也一样。

-这里的主要问题是Angular5仍未在其帖子调用中使用XRSF-TOKEN（例如）。它没有在请求中设置X-XSRF-TOKEN。

我在做什么错还是想念？

我正在建立一个大项目，这是其中的一部分。我的问题很普遍，但是我没有找到解决方法。真的需要您的帮助！我收到类型错误。我会很高兴的

Uncaught Error: Can't resolve all parameters for AppComponent: (?).
at syntaxError (main-client.js:52112)
at CompileMetadataResolver._getDependenciesMetadata (main-client.js:67193)
at CompileMetadataResolver._getTypeMetadata (main-client.js:67028)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (main-client.js:66536)
at CompileMetadataResolver._getEntryComponentMetadata (main-client.js:67341)
at main-client.js:66822
at Array.map (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (main-client.js:66822)
at CompileMetadataResolver.getNgModuleSummary (main-client.js:66645)
at main-client.js:66733
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (main-client.js:66718)
at JitCompiler._loadModules (main-client.js:85147)
at JitCompiler._compileModuleAndComponents (main-client.js:85108)
at JitCompiler.compileModuleAsync (main-client.js:85024)
at CompilerImpl.compileModuleAsync (main-client.js:50948)
at PlatformRef.bootstrapModule (main-client.js:6395)
at Object.defineProperty.value (main-client.js:49385)
at __webpack_require__ (main-client.js:679)
at fn (main-client.js:89)
at Object.options.path (main-client.js:48085)
at __webpack_require__ (main-client.js:679)
at module.exports (main-client.js:725)
at main-client.js:728

这是我的app.module.shared.ts …

我的项目需要以下模块:

TranslateModule LocalizeRouterModule TransferHttpCacheModule

不知何故,这种模块组合正在创建循环依赖.

TranslateModule与TransferHttpCacheModule - 使用LocalizeRouterModule工作TranslateModule - 工作

但是当我导入所有三个时,它会导致依赖循环.

无法实例化循环依赖!ApplicationRef("[ERROR - >]"):在./AppBrowserModule@-1:-1中的NgModule AppBrowserModule中

检查plnkr以重现问题:https://plnkr.co/edit/qlUQ866JzTa3JtFgSAIO？p = preview

@NgModule({
imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    TransferHttpCacheModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpTranslationLoaderFactory,
        deps: [HttpClient]
      }
    }),
    LocalizeRouterModule.forRoot([], {
      parser: {
        provide: LocalizeParser,
        useFactory: HttpLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings]
      }
    }),
    RouterModule.forRoot([])
],
declarations: [
    AppComponent
],
providers: [

],
bootstrap: [AppComponent]
}) export class AppModule { }

当我得到警告时：

“警告：清理HTML会剥离一些内容”

我进行了一些研究，发现人们使用下面的管道或看起来像下面的管道

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

 constructor(private _sanitizer:DomSanitizer) { }

 transform(v:string):SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(v);
 }
}

不幸的是，即使我实现这样的管道，我仍然会遇到相同的错误：

<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
<p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
<li [innerHTML]="package.fields.name | sanitizeHtml"></li>

所以我想知道我是错误地实现了管道还是还有其他原因导致管道不起作用？

编辑：

的示例specialist.blocks[0].paragraph.html：

“ <div id =” test“ class =” test“> \ n <h3> NAME专家名单</ h3> \ n <p>随机文本</ p> </ div> \ n </ div>”

的示例package.fields.remarks …

我正在尝试使用TransferState我的Angular Universal v5应用程序.经过大量的调试后,我意识到,在服务器上,TransferState似乎正在工作,因为响应包含一个<script id=APP_ID></script>包含相应序列化状态(TransferState源)的标记.

出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!

我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大多数元素一次加载,然后在另一个时间点<script id=APP_ID></script>显示.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能TransferState在处理完成之前进行初始化,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!

这是相关代码:

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import { GraphQLModule } from './graphql.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    GraphQLModule,
  ], …

• 我从角度2升级到角度5.
• 升级后,我在ts文件中看到以下错误.
• 在angular5中我需要删除@ angular/core和@ angular/router
• 升级后提供package.json也
• 在下面提供我的错误和代码段.
• 你能告诉我如何解决它吗？

错误

[ts]无法找到模块'@ angular/core'.
[ts]无法找到模块'@ angular/router'.

码

import {Component, ElementRef, Input,Output,EventEmitter,Inject, OnInit,ViewChild} from '@angular/core';
import {KendoGridComponent} from '../grid/grid.component'
import { Router} from '@angular/router';

的package.json

{
  "name": "SPORTS",
  "version": "1.0.0",
  "description": "SPORTS player - v0.2.37.1",
  "engines": {
    "node": "7.10.1"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/http": "^5.2.2",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/platform-server": "^5.2.2",
    "@angular/router": "^5.2.2",
    "@angular/upgrade": "2.0.0",
    "@ng-idle/core": "2.0.0-beta.2",
    "@ng-idle/keepalive": "2.0.0-beta.2",
    "@types/jquery": "^3.2.10", …

项目描述:我的项目是通过package.json下载到node_module

的package.json

....
   dependencies:{
       ....
       "@myllc/application-core": "git+ssh://git@bitbucket.org/myllc/application-core.git",
       "@myllc/application-shared":"git+ssh://git@bitbucket.org/myllc/application-shared.git",

   }
   ....

在执行"npm build"时出错:

./node_modules/@myllc/application-core/index.ts中的错误.模块构建失败:错误:TypeScript编译中缺少/var/www/frontend-skeleton/node_modules/@myllc/application-core/index.ts.请通过'files'或'include'属性确保它在您的tsconfig中.丢失的文件似乎是第三方库的一部分.已发布库中的TS文件通常是包装严重的库的标志.请在库存储库中打开一个问题,提醒其作者并要求他们使用Angular Package Form(https:// goo.gl/jB3GVv)打包库.

从Angular4升级到Angular5后出现:Tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]

  }

}

我试着补充一下

"include": [
    "./node_modules/@myllc/**/*"
  ]

但在更深的文件夹.ts文件中出现相同的错误.还创建了 https://github.com/angular/angular-cli/issues/8284, 但没有解决这个错误.

解决办法是什么？

我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.

我希望结合以下功能:

1. 有一个显示"过滤"的按钮.没有输入.

2. 用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.

3. 然后,用户可以选择日期范围.

4. 然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.

这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.

这就是我想要的:

<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
         Click Me
</button>


<ng-template #t let-date="date" let-focused="focused">
    <span class="custom-day"
    [class.focused]="focused"
    [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
    [class.faded]="isHovered(date) || isInside(date)"
    (mouseenter)="hoveredDate = date"
    (mouseleave)="hoveredDate = null">
    {{ date.day }}
</ng-template>

谢谢

我目前正在从事Angular 5项目。我在这里面临一个棘手的问题。

我想通过使用<code>标记在我的component.html文件中包含一些代码片段。但是，这样做似乎会在角度角度返回处理错误。因此，我尝试将代码放在* .component.ts文件中的变量中，并使用数据绑定显示如下代码：

<code_tag>{{my_code_snippet}}</code_tag>

但是现在的问题是代码总是以字符串形式出现，并且格式不正确（例如，如果是JSON代码）

我该如何解决？

我正在尝试做与这篇文章完全相同的事情：Angular 4 get queryString

我正在使用Angular 5.2.5。

当用户首次访问网站时，ActivatedRoute似乎是用来从URL检索查询字符串值的东西。但是，我无法弄清楚需要导入什么才能使用ActivatedRoute。

有人可以确切指定需要添加到app.module.ts文件以及我要使用ActivatedRoute的component.ts文件的内容吗？

这篇文章指定将路由添加到@NgModule的imports数组：ActivatedRoute-Angular 2 RC5的没有提供程序。但是，我没有app.routing.ts文件。我必须创建一个app.routing.ts文件才能使用ActivatedRoute吗？