小编bea*_*ode的帖子

VS代码未验证的断点

我正在尝试在VS Code(v。1.24.0)中调试Node / Express TypeScript应用程序,并且在调试期间所有断点均显示为灰色。

错误为“未验证的断点,设置了断点但尚未绑定。” 我已经搜索过,但无法弄清楚我的配置出了什么问题。控制台中没有错误,当我选择进程时,调试器将成功附加,但是断点不起作用。

我该如何调试?

基本文件夹结构:

/.vscode
/src/server.ts
/dist/server.js
launch.json
tsconfig.json
Run Code Online (Sandbox Code Playgroud)

launch.json

{
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "protocol": "inspector",
            "address": "localhost",
            "port": 8080,
            "restart": true,
            "preLaunchTask": "npm: build",
            "sourceMaps": true,
            "outFiles" : [ "${workspaceFolder}/dist/**/*.js" ]
        },
Run Code Online (Sandbox Code Playgroud)

tsconfig.json

{
  "compilerOptions": {
    "alwaysStrict": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "typeRoots": [ "node_modules/@types" ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules" …
Run Code Online (Sandbox Code Playgroud)

debugging node.js express typescript visual-studio-code

18
推荐指数
1
解决办法
2万
查看次数

从FormGroup中的输入FormControl订阅valueChanges

在Angular 4中,我试图订阅FormControl的valueChanges.以下两个版本都没有工作.我没有看到任何错误.form.value JSON在我键入时更新,但订阅不起作用.

myForm: FormGroup;
public firstName = new FormControl();
public lastName = new FormControl();

this.myForm = this.formBuilder.group({ 
      firstName: '',
      lastName: '',
});

this.myForm.controls.firstName.valueChanges.subscribe(value => {
      console.log(value);
});


this.myForm.get('firstName').valueChanges.subscribe(value => {
      console.log('name has changed:', value)
});
Run Code Online (Sandbox Code Playgroud)

这是一个模板片段.

<form #myForm="ngForm">

<md-input-container>
    <input mdInput name="firstName" [(ngModel)]="firstName" placeholder="enter name"/>
</md-input-container>
Run Code Online (Sandbox Code Playgroud)
{{ myForm.value | json }}

angular

15
推荐指数
3
解决办法
4万
查看次数

无法识别的功能:YouTube嵌入式播放器出现"自动播放"错误

使用数据3 API加载YouTube iFrame嵌入播放器时,是否有其他人在浏览器控制台中看到此警告?

Unrecognized feature: 'autoplay'.
Run Code Online (Sandbox Code Playgroud)

该错误发生在Google文件中:www-widgetapi.js:110它似乎是一个JavaScript错误(这是来自第110行):

c.setAttribute("allowfullscreen",1);c.setAttribute("allow","autoplay; encrypted-media");
Run Code Online (Sandbox Code Playgroud)

我假设自动播放部分应该只是:

c.setAttribute("autoplay",0);
Run Code Online (Sandbox Code Playgroud)

该文件位于:https://s.ytimg.com/yts/jsbin/www-widgetapi-vflkvQ6Kw/www-widgetapi.js

该错误甚至发生在他们的开发人员演示页面上:https://developers.google.com/youtube/youtube_player_demo

人们如何向Google报告这些内容?

javascript youtube-api

15
推荐指数
1
解决办法
8376
查看次数

Angular 6 Meta服务,包含来自Web服务的动态元数据

我正在尝试使用从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 });
  });

}
Run Code Online (Sandbox Code Playgroud)

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

 { path: 'view/:person', component: ViewComponent,
    resolve: { person: …
Run Code Online (Sandbox Code Playgroud)

metadata typescript angular-universal angular angular7

9
推荐指数
1
解决办法
1048
查看次数

从 id_token 获取 Google OAuth 访问令牌

我使用带有redirect_uri选项的Google身份验证(以避免弹出窗口)。当用户登录 Chrome 时,我可以获得访问令牌,但在 Safari 中(例如),我不知道如何获取访问令牌。重定向查询字符串包含一个 id_token,我可以使用此端点成功验证它:

https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123
Run Code Online (Sandbox Code Playgroud)

这为我提供了一些有关用户的信息,但我真正想要的是访问令牌,因为我的后端 API 需要它。

我可以从 id_token 获取访问令牌吗?如果是这样,怎么办。我找不到任何例子。

澄清:我不是在尝试验证我的应用程序,我是通过前端的 Google 登录从用户那里获取 id_token。

javascript google-authentication

9
推荐指数
1
解决办法
1万
查看次数

在Angular 2/TypeScript中使用Google API

之前的一个问题让我得到了大部分工作(希望如此),但是我似乎无法从TypeScript中获得Google API.我基本上遵循这个示例:https://developers.google.com/api-client-library/javascript/samples/samples

我没有看到错误,运行API调用的方法不会被触发.

我已经安装了gapi和gapi.auth的类型.initClient()不会抛出任何错误,它似乎永远不会完成.当前用户是以Google用户身份登录的,但尚未获得API调用授权.这是我要处理的下一件事,但现在这个电话甚至都没有.如下所示,我在方法的开头添加了一个未被调用的日志行.

initGapiClient() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: '',
      discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
      clientId: 'xxxxxx.apps.googleusercontent.com',
      scope: 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly'
    }).then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listPlaylists();
    } else {
      alert("Can't sign in");          
    }
  }

  listPlaylists() {
    console.log("Called listPlaylists");
    ... 
    API call here
    ... 
  }
Run Code Online (Sandbox Code Playgroud)

javascript typescript youtube-data-api angular

7
推荐指数
2
解决办法
6803
查看次数

Angular ngx-datatable 行细节问题

我在 ngx-datatable 中使用 row-detail 有两个问题。

  1. rowIndex 不起作用。我发现了一个描述该问题的 github 问题,但据说它已在 v. 10.0.2 左右修复,我使用的是 11.1.5(当前版本)。{{rowIndex}} 的每一行都返回 0。我的解决方法是写出我自己的索引到一列,然后引用它,但我不应该这样做。使用下面的代码,当我单击其中的一行时,每一行都会进入编辑模式,因为它们都具有相同的 rowIndex。

  2. 我无法让行详细信息行使用其“父”行的全宽。我怀疑这是因为我正在使用[columnMode]="'flex'"而演示使用 columnMode]="'force'"。我可以设置最小宽度,但我不能让 width: 100% 工作。可能是因为有一个没有宽度的 div 包装器

<ngx-datatable #dataTable class="material expandable" [rows]="rows" [limit]="50" [columnMode]="'flex'"
  [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [selectionType]="'single'" (select)="onSelect($event)"
  (activate)="onActivate($event)">
  <!-- Row Detail Template -->
  <ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded"
      ngx-datatable-row-detail-template>
      <span class="rowDetail" title="Click to edit" (click)="editing[rowIndex + '-name'] = true"
        *ngIf="!editing[rowIndex + '-name']"> {{row.name}} </span>
      <mat-form-field floatPlaceholder='never' *ngIf="editing[rowIndex + '-name']">
        <input matInput style="min-width:300px" (keyup.enter)="updateValue($event, 'name', rowIndex)" type="text" …
Run Code Online (Sandbox Code Playgroud)

javascript ngx-datatable angular

7
推荐指数
1
解决办法
1909
查看次数

Angular Material 2 md-card 响应列

我正在寻找此布局的 Angular 2/4 示例。我需要从两列卡片开始(左列 2 个,右列 1 个)。但是,如果屏幕很小,它们应该折叠为一列。我可以在带有 div 的 CSS 中做到这一点,但是在 Material 2 中必须有一个简单的方法——有很多 Material 1 示例。

这段代码改编自 Angular Material 1 的答案,但它不起作用(我将“行”更改为“列”希望能起作用,但我只得到一列包含三张卡片的内容):

如何创建带有角材料的卡片网格?

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>
Run Code Online (Sandbox Code Playgroud)

来自答案:“在此示例中,您将有两张卡片(每张 40%),当屏幕调整为 -sm 时,卡片将位于 80%。”

angular-material angular-material2 angular

5
推荐指数
1
解决办法
1万
查看次数

GCP静态网站返回错误:NoSuchBucket

我创建了一个以Google Domains管理的域名命名的GCP存储桶.我已上传文件,为c.storage.googleapis.com创建了CNAME记录,并将ACL更改为public-read.但是,我仍然收到错误:

<Error>
  <Code>NoSuchBucket</Code>
  <Message>The specified bucket does not exist.</Message>
</Error>
Run Code Online (Sandbox Code Playgroud)

请注意,我在创建存储桶时没有要求我验证域.我认为这对Google域管理的域名来说是正常的,因为它说"自动验证".

我不确定如何调试此问题.

google-cloud-storage google-cloud-platform

5
推荐指数
1
解决办法
1438
查看次数

带有 Google 登录弹出窗口的 Angular Cypress.io 测试

是否可以使用 Google 身份验证弹出窗口通过 Cypress.io 登录 Google 帐户?

我可以打开窗口,但是赛普拉斯无法检测到电子邮件输入字段的 ID。

错误是:“CypressError:重试超时:预期找到元素:'#identifierId',但从未找到它。”

it('Login', function() {
    cy.visit('home')
    cy.get('#signin-button').click()
    cy.get('#google-login-button').click()
    // cy.wait(1500) // wait doesn't help
    cy.get('#identifierId')
    .type('user@gmail.com') // <<-- error here
  })
Run Code Online (Sandbox Code Playgroud)

angular angular-test cypress

5
推荐指数
1
解决办法
6604
查看次数