小编Pie*_*jan的帖子

scss - 不推荐在导入中使用“~” - Angular - vscode

从 Angular 13 开始，使用波形符 ( ~) 从node_modules

关闭.组件.scss

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/close";
}

Run Code Online (Sandbox Code Playgroud)

运行后会出现以下警告ng build：

警告：'C:\repos\...\src\lib\components\close\close.component.scss' 导入带有波浪号的 '~bootstrap/scss/close'。不推荐在导入中使用“~”。

更改此设置并删除波形符很容易。ctrl但是，当单击 scss 路径时，VS Code 不再找到该文件。它认为它位于

C:\repos\...\src\lib\components\close\bootstrap\scss\close

Run Code Online (Sandbox Code Playgroud)

我已经尝试过这个改变，但它没有改变任何东西。

有谁知道如何解决这一问题？

编辑

对于那些想知道为什么我们需要:host ::ng-deep围绕@import语句的人来说，它将样式范围限制在组件内。一个很好的例子是我使用的bs-list-group和，bs-list-group-item如下所示：

<bs-list-group>
    <bs-list-group-item>Cras justo odio</bs-list-group-item>
    <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
    <bs-list-group-item>Morbi leo risus</bs-list-group-item>
    <bs-list-group-item>Porta ac consectetur ac</bs-list-group-item>
    <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
</bs-list-group>

Run Code Online (Sandbox Code Playgroud)

以下 …

sass visual-studio-code angular

Pie*_*jan

2022 09-26

39
推荐指数

2
解决办法

2万
查看次数

Youtube iframe api：与 MediaSession 交互

我有一个带有 Youtube IFrame API 的 angular 应用程序。当网站/pwa 在安卓设备上使用，并且正在播放 Youtube 视频时，应用程序会自动在 android 通知托盘中创建一个通知，让您查看当前正在播放的视频。

我创建了自己的播放列表控制器，所以我没有使用 queueVideoById，因为我不喜欢默认的 youtube-iframe 播放列表控制器的工作方式（之后您无法删除排队的视频）。

从我的 AppComponent 我正在加载 YouTube IFrame API

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private youtubeHelper: YoutubeHelper) {
    this.youtubeHelper.loadApi().then((isLoaded) => {
      this.player.playSong(song.playerInfo.id);
    });
  }

  @ViewChild('player') player: YoutubePlayerComponent;
}

Run Code Online (Sandbox Code Playgroud)

应用程序组件.html

<body>
  <youtube-player #player [domId]="'player'" ... (previousPressed)="onPreviousPressed()" (nextPressed)="onNextPressed()"></youtube-player>
</body>

Run Code Online (Sandbox Code Playgroud)

此帮助程序用于加载 IFrame API 脚本。LoadApi 插入一个 src 设置为 youtube-iframe-url 的脚本标签：

import { Injectable } from '@angular/core';
import { Promise } …

Run Code Online (Sandbox Code Playgroud)

youtube-iframe-api android-mediasession android-notification.mediastyle

Pie*_*jan

2020 06-12

7
推荐指数

0
解决办法

386
查看次数

从 GitHub 包注册表安装 NuGet 包

经过大量的试验和错误，我最终通过以下操作/命令在 Github 包注册表上获得了 NuGet 包：

转到 GitHub\n
- 单击您的头像（右上角） \xe2\x86\x92 设置 \xe2\x86\x92 开发人员设置 \xe2\x86\x92 个人访问令牌
- 生成具有以下范围的令牌：write:packages, read:packages,delete:packages
- 这将自动检查repo您的 OAuth 令牌的范围
\n
打开 cmd\n
- 导航到您的项目目录或包含 NuGet 包的目录
- 添加新的 nuget 源\n
  - dotnet nuget add source --username [GithubUserName] --password [YourApiKey] --name github https://nuget.pkg.github.com/[UsernameOrOrganizationName]/index.json
  \n
- 将包推送到github源\n
  - dotnet nuget push --source github bin\\Release\\MyAwesomePackage.1.0.0.nupkg
  \n
\n

我可以在 GitHub 上看到我的 NuGet 包，所以现在我想安装它。

\n …

nuget-package github-package-registry

Pie*_*jan

2020 07-09

5
推荐指数

1
解决办法

2872
查看次数

NX 工作区 - 角度 14 - 玩笑不工作

我正在尝试将我的 Angular 13 NX 工作区升级到 Angular 14，但不知何故我无法让我的笑话单元测试正常工作。我从零开始尝试了以下方法：

安装@angular/cli并nx全局：

npm install --global @angular/cli@latest\nnpm install --global nx@latest\n

Run Code Online (Sandbox Code Playgroud)\n

在不带空格的路径中打开并cmd

npx create-nx-workspace\n> test\n> angular\n> demo\n> scss\n

Run Code Online (Sandbox Code Playgroud)\n

结果：

\n
Nx 正在创建您的 v13.10.5 工作区
\n

所以现在我可以迁移到最新的 NX 工作区版本

cd test\nnx migrate latest\n

Run Code Online (Sandbox Code Playgroud)\n

版本@angular/cli仍然是13，所以我在根中将其更改package.json为14.0.1（nx删除版本注释~并^...）

npm install不成功。在工作区中jest-preset-angular@11.1.2需要这是一个固定的依赖项：@angular-devkit/build-angular@">=0.1002.4"@angular-devkit/build-angular@"14.0.1"

npm ERR! Found: @angular-devkit/build-angular@13.3.7\nnpm ERR! node_modules/@angular-devkit/build-angular\nnpm ERR!   dev @angular-devkit/build-angular@"14.0.1" from the …

Run Code Online (Sandbox Code Playgroud)

ts-jest nrwl-nx angular14

Pie*_*jan

lucky-day

5
推荐指数

1
解决办法

7959
查看次数

Angular monorepo 错误 TS6059：文件“ng-youtube-api.service.ngtypecheck.ts”不在“rootDir”下。'rootDir' 预计包含所有源文件

我创建了 3 个角度库/包：

@example/ng-youtube-player包含一个YoutubePlayerComponent和YoutubeApiService
@example/ng-dailymotion-player包含一个DailymotionPlayerComponent和DailymotionApiService
@example/ng-vimeo-player包含一个VimeoPlayerComponent和VimeoApiService

现在我想创建一个包含 a 的库，仅使用提供,和的VideoPlayerComponent包。为了不包含不必要的其他组件，我想将 3 个库分别拆分，这样我就可以只安装 Service 类。YoutubeApiServiceDailymotionApiServiceVimeoApiService

\n
您可能会争辩说 Angular 使用了树摇动，因此组件\n无论如何都不会与应用程序捆绑在一起，但无论如何，为了简洁起见，我宁愿\n将这些依赖项分开。
\n

我尝试设置一个包含 2 个库和一个测试应用程序的 monorepo，但是从我引用另一个库的服务的那一刻起，构建失败了。我创建了一个非常基本的示例工作区来重现该问题：

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test\ncd angular-monorepo-test\nnpm install\nng build @mintplayer/ng-youtube-api\nng build @mintplayer/ng-youtube-player\nng build ng-youtube-player-demo\n\n# All projects compile successfully\n# Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)\n\nng build …

Run Code Online (Sandbox Code Playgroud)

typescript monorepo angular angular-library

Pie*_*jan

2021 07-06

4
推荐指数

2
解决办法

6004
查看次数

更新 .NET Core 工具

我正在尝试使用 EntityFrameworkCore@3.1。为了做到这一点，我已经有了： - 安装了 Visual Studio 2019 预览版 - 安装了 .NET Core 3.1 运行时 - 安装了 .NET Core 3.1 SDK

现在我仍然无法运行命令dotnet ef migrations add xxx。据说我必须更新 dotnet 工具。所以我在管理员 powershell 中运行以下命令：

PS C:\WINDOWS\system32> dotnet tool update --global dotnet-ef
Tool 'dotnet-ef' was reinstalled with the latest stable version (version '3.0.0')

Run Code Online (Sandbox Code Playgroud)

好的，不包括预览版本。所以我尝试明确指定版本：

PS C:\WINDOWS\system32> dotnet tool update --global dotnet-ef --version="3.1.0-preview1.19506.2"
error NU1202: Package dotnet-ef 3.1.0-preview1.19506.2 is not compatible with netcoreapp3.1 (.NETCoreApp,Version=v3.1) / any. Package dotnet-ef 3.1.0-preview1.19506.2 supports: netcoreapp3.1 (.NETCoreApp,Version=v3.1)
Tool 'dotnet-ef' failed …

Run Code Online (Sandbox Code Playgroud)

preview dotnet-tool visual-studio-2019

Pie*_*jan

2019 10-25

2
推荐指数

1
解决办法

7997
查看次数

臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏

我创建了一个有角度的应用程序，其中侧边栏是height: 100%。但是，在 Android 版 Chrome 中查看 Web 应用程序时，滚动文档时：

chrome地址栏轻轻向上滑动
100% 实际尺寸保持不变，直到您 TouchEnd

深灰色侧边栏通常height: calc(100% - 55px)应始终保持顶部栏可见，并始终填充顶部栏和底部之间的剩余空间。

我已经尝试了几种方法来解决这个问题。页脚有bottom: 0，而且事实上这个页脚总是正确呈现的。所以这让我尝试使用top: 55px; bottom: 0而不是height: calc(100% - 55px). top但从您同时设置和的那一刻起bottom，结果与设置高度相同。

有谁知道如何在地址栏出现/消失时使视口调整其高度？

css address-bar android viewport google-chrome-android

Pie*_*jan

lucky-day

2
推荐指数

1
解决办法

3310
查看次数

ASP.NET Core 和 Angular：Microsoft 身份验证

目前，我正在尝试向我的 ASP.NET Core Web 应用程序添加第三方身份验证。今天我已经成功地实现了 Facebook 身份验证。这已经很困难了，因为文档只提到了带有剃刀页面的 ASP.NET 应用程序的 Facebook 身份验证（https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/facebook-logins?视图=aspnetcore-2.2）。文档中没有写任何关于为 Angular 应用程序实现这一点的内容。

这是我为 ASP.NET Core + Angular + FB auth 找到的最完整的演练：https : //fullstackmark.com/post/13/jwt-authentication-with-aspnet-core-2-web-api-angular-5 -net-core-identity-and-facebook-login

我正在使用 Microsoft.AspNetCore.Identity，这个包已经为你管理了很多。但是我找不到如何开始在 Web 应用程序中实现 Microsoft、Google 甚至 Twitter 登录。文档似乎没有涵盖那部分......

我的 GitHub 存储库：https : //github.com/MusicDemons/MusicDemons-ASP-NET

任何人都有这方面的经验？

google-login facebook-login asp.net-core asp.net-core-identity angular

Pie*_*jan

lucky-day

0
推荐指数

1
解决办法

2350
查看次数