标签: angular7

我正在尝试使用从Web服务检索的数据来更新Angular 6(更新:现在的Angular 7)Universal应用程序(使用Meta和Title)中的元数据.我专门为Twitter和Facebook卡做这个.我知道他们的抓取工具不执行JavaScript,这就是我使用Angular Universal在服务器端设置元数据的原因.我正在使用Facebook共享调试工具来检查结果.

我尝试了几种不同的方法,并且我已经找到了示例,但是我没有找到一个在设置元数据之前从对Web服务的异步调用中检索数据的方法.(请注意,我在Angular Universal 4应用程序中成功使用此服务与Web服务.)

使用下面的代码,"og:url"标记被正确设置为不需要Web服务调用来获取数据.但是,标题未正确设置.如果我将"setTitle"调用移动到ngOnInit并提供一个字符串,那就可以了 - 但是从Web服务获取数据却没有.

我尝试使用服务来收集数据,然后设置元数据,但这也不起作用.我从解析器获取数据,但它没有解决Facebook/Twitter问题.

ngOnInit() {
    const metaUrl = 'https://www.test.com' + this._router.url;
    this._metaService.updateTag({ property: 'og:url', content: metaUrl });

    this._sub = this._route.params.subscribe(params => {
      const code = params['person'];
      this.getInfo(code);
    });
}

getInfo(code: string) {
  this._myWebService.getPerson(code).subscribe(
      data => {
        this._person = data;
        // set dynamic metadata
        const metaTitle = this._person.name + ' | site description';
        this._titleService.setTitle(metaTitle);
        this._metaService.updateTag({ name: 'twitter:title', content: metaTitle });
  });

}

更新:我还尝试使用解析器首先获取数据,以便我可以在onInit中使用它.它不起作用.

 { path: 'view/:person', component: ViewComponent,
    resolve: { person: …

我将Angular CLI更新@angular/cli@7.0.2为Mac OS上的最新版本。发出命令时ng new testng7，出现此错误：

Schematic input does not validate against the Schema: {"name":"testng7"}
Errors:
  Data path "" should have required property 'version'.

什么也没有创造。任何线索如何解决？

当我尝试在angular 7 Web应用程序中执行PATCH请求时遇到问题。在我的后端，我有：

app.use((req, res, next) => {
    res.set({
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Headers": "'Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'",
    });

    next();
});

在前端服务中，我已经：

  patchEntity(ent: any, id) {
    let headers = new Headers({ 'Content-Type': '*' });
    let options = new RequestOptions({ headers: headers });
    return this.http.patch('my_url', ent).map((res: Response) => res.json());
  };

错误是：

Access to XMLHttpRequest at 'my_url' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. …

我在用FormGroupDirectivein测试组件时遇到了一些问题viewProviders。无法创建模拟parent并设置空的 formGroup。

我的组件：

@Component({
   (...)
   viewProviders: [
      {
        provide: ControlContainer, useExisting: FormGroupDirective
      }
    ]
  })
export class SomeNestedFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder, private parent: FormGroupDirective) {}

  ngOnInit() {
    this.form = this.parent.form;
    this.form.addControl('field', this.createSomeFormGroup());
  }
}

规格：

describe('SomeNestedFormComponent', () => {
  let component: SomeNestedFormComponent;
  let fixture: ComponentFixture<SomeNestedFormComponent>;
  let formGroupDirective: Partial<FormGroupDirective>;

  beforeEach(async(() => {
    formGroupDirective = {
      form: new FormGroup({})
    };

    TestBed.configureTestingModule({
      imports: [
        SharedModule,
        FormsModule,
        ReactiveFormsModule
      ],
      declarations: [SomeNestedFormComponent],
      providers: [] …

我想在Angular 7中的两条路线之间导航,并在它们之间发布数据.但我不想在URL中显示这些参数.如何以正确的方式做到这一点？

在这一刻,我正在遭遇这样的事情:

this.router.navigate(['/my-new-route', {data1: 'test', test2: 2323, test: 'AAAAAAA'}]);

它改变了我的网址

http://localhost:4200/my-new-route;data1=test;test2=2323;test=AAAAAAA

如何从URL中取消这些数据:

http://localhost:4200/my-new-route

编辑:

我的情况:

1. / form - 具有某种形式的路线
2. / options - 包含一些数据的路由

on/form route - 用户有一些带有空字段的表单可以手动填写

但在/ options页面上有一些预设配置,当用户选择一个导航到/表格并且字段自动填充时

当他们移回另一页并再次返回/表格时 - 应该看到空表格.只有/ options到/ form的链接才能填充这些字段.

我想知道是否有办法在Angular7中命名我的路线,所以我可以调用[routerLink]="myRouteName"而不是[ routerLink]="/my/route/path".

如果是这样,我怎么能做到这一点？

我正在尝试通过遵循官方教程（https://angular.io/tutorial/）学习angular，但是在对hero组件和hero detail组件执行以下步骤时，会引发错误“ RangeError：超出最大调用堆栈大小”。

hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class …

@ angular / cli @ 7 +允许customWebpackConfig指定以提供自定义Webpack配置，例如：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./build/custom-webpack.config.js",
          "mergeStrategies": {
            "externals": "prepend"
          }
        },
        ...

然后，从技术上讲，该文件允许您添加，添加或替换webpack配置的任何部分。在升级到@angular@7.1.3和之前，@angular/cli@7.1.3我们已经弹出webpack配置进行了一些添加。其中一个附加功能是postcss-momentum-scrollingpostcss-loader插件，该插件自动在所有可滚动容器上启用iOS动量滚动。

我正在寻求有关如何通过允许的受支持的自定义来生成必要的自定义Webpack代码以加载此插件的支持@angular/cli@7+。

这是我在custom-webpack.config.js文件中尝试过的示例：

const postcssMomentumScrolling = require('postcss-momentum-scrolling');

module.exports = {
  module: {
      rules: [
          {
              test: /\.scss$|\.sass$/,
              use: [
                  {
                      "loader": "postcss-loader",
                      "options": {
                          "plugins": [
                            postcssMomentumScrolling(),
                          ]
                      }
                  }
              ]
          },
      ],
  },
};

一旦我触摸webpack配置的scss块，它似乎会执行替换操作而不是合并或添加操作，从而破坏了构建。

我想知道是否有人对如何查看@angular/cli生成的初始Webpack配置有指导或建议，这是修改的起点，也是预览/查看要作为调试执行的代码的方法。

同样，类似定制的示例也很好。

谢谢！

在找不到stompJS-lib的问题上，出现以下错误消息：

Module not found: Error: Can't resolve 'net' in '/../../../.../../../angular-app/node_modules/stompjs/lib'

我已经在angular 7和ionic 4上创建了一个应用程序。我试图编辑app.routing.ts文件，设置路径和组件。从那时起，我在下面收到此错误：

ERROR in ./src/app/department/department.module.ts
[ng] Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
[ng] Error: ENOENT: no such file or directory, open 'C:\Users\x\department\department.module.ts'
[ng]     at Object.openSync (fs.js:436:3)
[ng]     at Object.readFileSync (fs.js:341:35)
[ng]     at Storage.provideSync (C:\Users\x\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)