标签: angular8

我正在尝试在ngrx/store-devtools上启用trace和traceLimit（此功能https://extension.remotedev.io/docs/Features/Trace.html）。

我目前正在使用这些软件包和版本，并运行 Angular 8。

“@ngrx/store”：“^8.0.1”

"@ngrx/store-devtools": "^8.0.1"

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({}, ),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false,
      trace: true // KINDA EXPECTING AN OPTION LIKE THIS BUT SEEMS TO NOT BE SUPPORTED
    }),
  ],
  providers: [],
  bootstrap: [AppComponent, ],
}, )

我想在 Redux DevTools Chrome 扩展中查看堆栈。

我有一个 Angular 8 项目，我运行ng lint.

即使我有一个@description与特定方法相关联的装饰器，TSLint 也会抱怨并说："'@param' is redundant in TypeScript code if it has no description."在我的代码中的不同地方。

例如，上述错误会显示当一个方法是这样编写的（TypeScript）：

  /**
   * @description my lovely description
   * @param empDetails
  */
  getHeaderBasedonEmpDetails(empDetails: EmployeeDetails) {
    if (someVar) {
      return 'yeah'
    } else {
      return 'nah'
    }
  }

包.json：

{
  "name": "example-app",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.0",
    "@angular/http": "^7.2.15",
    "@angular/language-service": "^8.0.0",
    "@angular/material": "^6.3.3",
    "@angular/material-moment-adapter": …

共享模块.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { ToastrModule } from 'ngx-toastr';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    declarations: [HeaderComponent, SidebarComponent],
    imports: [
        CommonModule,
        RouterModule,
        FormsModule,
        NgxDatatableModule,
        ToastrModule.forRoot() // ToastrModule added
    ],
    exports: [
        HeaderComponent,
        SidebarComponent,
        FormsModule,
        NgxDatatableModule,
        ToastrModule,
    ],
    providers: []
})

这是我的共享模块，我已经安装了 npm install ngx-toastr --save
npm install @angular/animations --save

但它给了我一个错误

node_modules/@angular/animations/browser/browser.d.ts(135,9) 中的错误：错误 TS1086：无法在环境上下文中声明访问器。node_modules/@angular/animations/browser/browser.d.ts(301,9): 错误 TS1086: 不能在环境上下文中声明访问器。
node_modules/ngx-toastr/portal/portal.d.ts(26,9)：错误 TS1086：无法在环境上下文中声明访问器。node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts(19,9)：错误 TS1086：无法在环境上下文中声明访问器。node_modules/ngx-toastr/toastr/toast.component.d.ts(26,9): 错误 TS1086: 不能在环境上下文中声明访问器。

请对此提出建议

package.json 文件

{
  "name": "mop",
  "version": "0.0.0",
  "scripts": …

我们目前正在尝试优化复杂的 Angular 应用程序（性能和包大小）。

我们发现我们有部分未使用的组件，但我们不能 100% 确定它们。无论如何......我们目前要问的问题是在 Angular 中摇树究竟是如何工作的。

问题 1)如果在模块的声明、导入或提供者数组中有条目，但该模块没有在任何地方使用，它们是否也通过摇树移除或包含在最终包中？

例子：

@NgModule({
  imports: [
    FirstModule,
    SecondModule  // Is not used anymore (probably) but imported here
  ],
  declarations: [SampleComponent] // Is not used anymore (probably) but imported here
})
export class SampleModule {
}

信息：该模块/组件的路由已被删除。

问题 2)仅从路由模块中移除这些组件是否足以使摇树过程成功？

问题 3)要使摇树过程达到最佳状态，应该具备哪些条件？

使用 Angular 8.2 版

我最近使用ng update. 在遵循预期的迁移路径后，我构建和部署了没有问题。一切都很好，直到我开始检查其他浏览器版本并意识到401 unauthorized在请求 js 文件时有些是从服务器获取的。

问题是，差分加载是这样完成的：

<script src="main-es2015.1234.js" type="module"></script>

似乎有些浏览器在某些时候不想传递<script type="module" .... 我觉得有几种方法可以解决这个问题：

• 我可以通过添加crossorigin="use-credentials"到脚本标签来解决这个问题，但我无法在ng build.
• 我可以调整身份验证设置，以某种方式允许匿名请求通过我的 JS 文件，但我一直无法在没有很多复杂性的情况下找到执行此操作的 dotnet 核心方法。现在整个应用程序只允许 Windows 身份验证。如果我允许匿名，我不想担心我已经打开了一个控制器。

我认为前一种选择是更清洁的解决方案，但我愿意接受替代方案。

在我的 angular 应用程序版本从angular 7升级到angular 8 之后， 我遇到了像这样的行的复杂问题

export class followupComponent implements OnInit {
    @ViewChild('message') messageElement: ElementRef;

    constructor(){}
    ...
}

我读到新定义需要static参数并更改代码

@ViewChild('message', { static: true })) messageElement: ElementRef;

我认为问题已经解决了。

但是不，我接受运行时错误：

无法读取未定义的属性“nativeElement”

与此代码相关

HTML：

@ViewChild('message', { static: true })) messageElement: ElementRef;

TS：

<div class="message">
    <div class="action-buttons">
        <img src="{{imgPath + '_Edit_Hover.png'}}" (click)="OnEdit(Followup)">
    </div>
    <textarea matInput #message [ngModel]="Followup.Message"></textarea>
</div>

ElementRef角度 8的正确定义是什么，

或 - 如何解决这个问题？

几天前我开始学习 .net core，作为开始，我创建了一个带有内置 angular 8 模板的 .netcore 项目。

它有几个用 angular 构建的页面，比如计数器和获取数据等，但所有与身份相关的页面（登录、注册等）都是来自后端的纯 HTML。所以“我主要关注的是在该页面中进行一些 UI 更改”。

我发现身份已添加到类库中，因此在后端代码中不可见。为了对其进行更改，我需要首先通过脚手架重新生成将其添加到代码中。这将覆盖以前的库代码，并且可以根据需要进行修改。

所以我选择添加新的脚手架项目 --> 身份。并在第一次尝试中选择“覆盖所有文件”，仅在第二次尝试中选择“帐户\登录”和“帐户\注册”，并为 dbcontext 选择 applicationdbcontext。但不幸的是，它们都不适合我。

当我尝试构建代码时出现此错误

Error   CS0246  The type or namespace name 'IWebHostEnvironment' could not be found (are you missing a using directive or an assembly reference?)   

C:\Users\MyUserName\source\repos\MyProjectName\obj\Debug\netcoreapp3.0\Razor\Pages\Shared\_Layout.cshtml.g.cs   448

我真的不知道 .g.cs 扩展名是什么，该页面上没有 import 语句和一些我以前从未见过的奇怪代码。页面本身也没有显示任何错误/红色标记。

我基本上想在这里实现两件事，

1) 完全使用 .net 核心应用程序作为 API，我想为所有与登录相关的东西在 angular 本身中构建 UI，而不是从后端获取 HTML。

2）在用户登录表单中添加更多字段。并且由于它是代码优先的方法，因此最终会在用户 DBSet 中进行更改（在这种情况下我不知道该怎么做）。

我没有添加任何代码示例，因为它是一种直接的问题/问题。要重现该问题，只需在 .net core 3.0 中创建一个项目并采用 angular 8 模板。现在尝试在登录或注册页面上进行任何与 UI 相关的更改。

在我的 Angular 8 应用程序中，我有一个订阅服务并等待服务已加载的通知的组件，如下所示：

constructor(public contentService: ContractService) {
    let self = this;
    let sub = contentService.loaded.subscribe(function(loaded) {
        if (loaded) {
            self.loading = false;
            if (sub) {
                sub.unsubscribe();
            }
        }
    });
}

这在大多数情况下都能正常工作，但有时我会看到以下错误消息：

ERROR ReferenceError: Cannot access 'sub' before initialization
    at SafeSubscriber._next (abstract-content.component.ts:51)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
    at SafeSubscriber.next (Subscriber.js:124)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at BehaviorSubject._subscribe (BehaviorSubject.js:14)
    at BehaviorSubject._trySubscribe (Observable.js:42)
    at BehaviorSubject._trySubscribe (Subject.js:81)
    at BehaviorSubject.subscribe (Observable.js:28)
    at Observable._subscribe (Observable.js:76)

正如您可能从名称中abstract-content-component了解到的那样，这是一个具有多个实现的父类，因此它是从子类调用的，但这实际上是一个空壳，没有自己的逻辑，我正在使用它来轻松切换模板。

错误消息对我来说似乎毫无意义（在这种情况下，第 51 行是if(sub)我添加的检查，因为我在之后的行中看到了相同的错误），因为如果我们在自己的事件处理程序中，订阅怎么可能不存在？我在其他地方成功使用了这个模式，为什么这里有问题？

我们可以使用@Input 作为传递输入道具或数据。我们还可以使用<ng-content>将大量 html 转储到子组件中。有没有办法将html作为输入传递。像@Input html1、@Input html2，在子类组件中使用？

假设我在子类中有这个 html：

<div class='wrapper'>
  <div class="content1 exclusive-css-defined-to-this-component">
     <div>{$content1}</div>
  </div>
  <div class="content2 exclusive-css-defined-to-this-component-2">
    <div>{$content2}</div>
  </div>
</div>

我想通过 $content1 & $content2 作为输入。

在使用NgRX 8时，我和我的同事在实现效果时经常会遇到奇怪的错误消息。

类型'Observable <未知>'不可分配给类型'Observable <动作> | （（... args：any []）=> Observable <Action>）'

它与类型问题有关。消息如此具体，真是令人讨厌，它标志着完整的效果。这经常出现，而且确实很难解决。

我们想知道是否可以做些事情以便快速发现问题，或者我们是否能够以某种方式破坏消息的结构。我不是在这里寻找特定的解决方案，而是在寻找一种“如何快速确定问题出在哪里”的方法。

谢谢和欢呼！

可能性的集合

这是我们到目前为止所做的，也是来自评论和答案的想法。

• 在大多数情况下，动作可能不是问题
• switchMap参数的错误解构可能是错误的
• RxJS运算符之一未导入
• 服务中的参数和返回值错误可能是原因
• 服务和操作类型不一致也可能是原因
• 如果没有帮助，并且您确定没有问题，请执行以下操作：重新加载TypeScript

我们仍然希望有一个技巧来分解错误消息。