标签: angular5

我正在尝试将此(ngx-admin)免费的Angular模板升级到Angular 5,然后尝试在此SO Post中提到的WebWorker中运行整个应用程序.

我成功将应用程序升级到Angular 5并且工作正常但是当我尝试将应用程序配置为在Webworker中运行时,它会出现以下错误:

完整的代码(修改为Angular 5和webworker)可以在这里找到

我试图在我的webpack配置中添加DefinePlugin,但没有运气.

webpack.config.json:

new DefinePlugin({
  window: undefined,
  document: undefined
}),

我能够在webworker中运行新的空angular-cli应用程序,但我无法在webworker中运行此模板.我想有一些节点包正在创建问题.

的package.json:

{
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "e2e": "protractor ./protractor.conf.js",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
    "build": "webpack",
    "start": "webpack-dev-server --port=4200",
    "test": "karma start ./karma.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": …

重新加载Chrome扩展程序时出现此错误:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".


    at new Function (<anonymous>)
    at evalExpression (compiler.js:33919)
    at jitStatements (compiler.js:33937)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
    at compiler.js:34347
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
    at compiler.js:34217
    at Object.then (compiler.js:474)

我在manifest.json中有这个:

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

我可以使用任何其他设置来避免该错误吗？

git仓库中有一个包

https://github.com/keephacking/ionic-scrolling-header

有一切使它兼容aot.但在使用时构建我的应用程序

ionic build --prod 命令,aot build失败,错误如下所示.

[18:02:48]  ngc started ...
[18:02:57]  typescript error
        Unexpected value 'ScrollingHeaderModule in
        xxx/node_modules/ionic-scrolling-header/scrolling-header.module.d.ts' imported by the
        module 'xxxModule in xxx/xxx.module.ts'. Please add a @NgModule
        annotation.

Error: The Angular AoT build failed. See the issues above
at xxx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (xxx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (xxx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (xxx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
[18:02:57]  copy finished in 10.69 s

我在Package.json中的依赖项

{
   "dependencies": {
    "@angular/common": "5.2.0",
    "@angular/compiler": "5.2.0",
    "@angular/compiler-cli": "5.2.0",
    "@angular/core": "5.2.0",
    "@angular/forms": "5.2.0",
    "@angular/http": "5.2.0",
    "@angular/platform-browser": "5.2.0",
    "@angular/platform-browser-dynamic": "5.2.0",
    "@ionic-native/core": …

我注意到,在触发的对话框关闭后,该按钮会获得以cdk为重点的类和cdk-program-focused .如果我点击任何地方效果消失.

app.component.html [片段]

<mat-cell *matCellDef="let element">
  <span matTooltip="Delete" matTooltipPosition="right">
    <button mat-icon-button color="warn" (click)="openDeleteAssociationDialog()">
      <mat-icon>delete</mat-icon>
    </button>
  </span>
</mat-cell>

我从服务器获得响应字符串:

<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>

我怎么能直接在我的页面中插入这个html元素,以便我可以查看用户的html表.

我是新的角度下面是我尝试过的东西:

我在我的componentsnet类中创建了一个变量作为htmltable,并试图创建一个如下所示的htmlelemnt

this.htmltable = document.createElement(serverresponse.htmltable)

但它不起作用.

我也尝试过这种方式:

 <div class="dynamically_created_div unique_identifier" #d1></div>
    @ViewChild('d1') d1:ElementRef;
        this.renderer.appendChild(this.d1, serverresponse.htmltable);

但它不起作用.请建议我这样做的正确方法

我在Angular 5应用程序中使用此表达式:

{{ viewDate | date:'MMM' }}

月份缩写以英语显示.如何将输出切换为德语？

[求助] https://angular.io/api/core/LOCALE_ID

我正在为我的Meteor项目寻找一个WYSIWYG编辑器.

它是带有Angular 5的Meteor版本1.6.1.1.

我已经尝试了[Froala] [1].

这是工作的罚款地方,但创建一个码头工人的容器后,呈多发错误(https://github.com/froala/meteor-froala/issues/27).

所以我正在寻找解决这个问题,或者使用Meteor 1.6.1.1和Angular 5的另一个简单/轻量级WYSIWYG编辑器.

谢谢 ;)

我更新了我的angular-cli然后我在ng服务中出错了

 Callback was already called.
at throwError (node_modules\neo-async\async.js:14:11)
at node_modules\neo-async\async.js:2805:7
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)

这是我的项目包的版本:

Angular CLI: 6.0.7
Node: 8.9.4
OS: win32 x64
Angular: 5.0.1

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cdk                      5.2.4
@angular/cli                      6.0.7
@angular/material                 5.2.4
@angular/platform-server          5.1.1
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              5.5.2
typescript                        2.4.2
webpack                           4.4.1

我试图删除节点模块然后重新安装但仍然有相同的错误...任何建议？

我用的是模块 在我的Angular 5应用程序中:

NG-选择

我的用例是用户提供搜索词,我从后端加载有关用户输入的搜索结果.当用户输入字符时,我找不到触发的事件.有谁知道我可以使用哪个事件或我如何做到这一点

我有一个物质输入控件,我在用户输入时限制了特殊字符,但是在任何编辑器中键入一些单词并复制并粘贴具有特殊字符的单词时,这是不起作用的.

我已经编写了指令来防止特殊字符,但可以在复制粘贴中提供更好的解决方案限制.

app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指示:

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        return new RegExp(this.regexStr).test(event.key);
    }

}

演示见这里:

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit

重现步骤:

输入不允许的特殊字符:工作正常.而复制粘贴机智允许特殊字符