标签: angular9

如何在 Renderer2.addClass(); 方法上添加多个类

例子：

this.renderer.addClass(this.el.nativeElement, 'btn btn-primary')

当我尝试这样做时，我收到错误：

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('btn btn-primary') contains HTML space characters, which are not valid in tokens.
    at EmulatedEncapsulationDomRenderer2.addClass

我使用 Angular cli 创建了一个示例 Angular 9 应用程序，当我执行 ng build 时，会生成多个文件以支持不同版本的浏览器。（例如：main-es5.js 和 main-es2015.js）。

对于微前端架构，我想通过组合所有.js文件来生成一个.js文件，以便我可以将其上传到服务器上，该怎么做？

我是 Angular 的新手。我刚刚完成了我的 Angular Web 应用程序的开发。当我在生产过程中使用 ng serve 为我的应用程序提供服务时，一切正常。我添加了角度通用。现在，当我运行 npm run dev:ssr 或 npm run build:ssr && npm run serve:ssr 时，我的应用程序将拒绝打开，并在控制台中抛出 NetworkError 响应。我注意到这个错误发生在通过类'constructors(){..}'发送的http请求的次数。我浏览了几个解决方案，但无法了解我做错了什么。我的后端是用 nodejs 和 express 开发的。我会很感激我能得到的任何帮助。这是我总是在控制台中得到的错误响应的完整示例。

ERROR NetworkError
    at XMLHttpRequest.send (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:200768:19)
    at Observable._subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:19025:17)
    at Observable._trySubscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186304:25)
    at Observable.subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186290:22)
    at scheduleTask (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:105897:32)
    at Observable._subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:105959:13)
    at Observable._trySubscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186304:25)
    at Observable.subscribe (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:186290:22)
    at subscribeToResult (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:196385:23)
    at MergeMapSubscriber._innerSub (C:\Users\MRBEN\Desktop\Angular\fxcore\dist\fxcore\server\main.js:191575:116)```

我正在使用@ngneat/until-destroy 这个npm 包来自动取消订阅 observables。我曾经checkProperties: true自动取消订阅 observables。

但是，我不知道如何测试它。observable 是否被取消订阅？

我的问题很简单。这段代码是否有效，或者我是否必须在订阅前使用这样的管道

.pipe(untilDestroyed(this))

先感谢您

import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';

@UntilDestroy({ checkProperties: true })

@Component({
  selector: 'app-view-all-purchase',
  templateUrl: './view-all-purchase.component.html',
  styleUrls: ['./view-all-purchase.component.scss']
})

export class ViewAllPurchaseComponent implements OnInit, OnDestroy  {


  ngOnInit() {

 this.subscibe1 =  this.vendorService.five_vendors().subscribe(data => {
    if(data){
      console.log(data)
       this.vendor_list = data
    }})

}

ngOnDestroy() {

 }

}

我正在使用 Angular 9，我试图让 rxjs websocket 工作，所以首先我创建了一个简单的 nodejs 服务器来接收和发送消息。

这是服务器的代码：

// server.js

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8000 })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })
  ws.send('Hello! Message From Server!!')
})

现在，对于客户端部分，我使用 Angular 9 和 Rxjs websockets。

这是 app.component.ts 的代码：

import { Component } from '@angular/core';
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8000');

  constructor() {
    this.myWebSocket.subscribe( …

我将 webpack 5 和 @ngtools/webpack 一起使用来构建 angular 应用程序。当我运行时webpack --mode development出现以下错误：

Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
    at /home/alecoder/Projects/JS/ap/node_modules/webpack/lib/NormalModuleFactory.js:543:11
    at eval (eval at create (/home/alecoder/Projects/JS/ap/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
(node:17432) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a …

我正在使用该ng test命令运行一些测试，并收到以下错误消息：

NullInjectorError: R3InjectorError(DynamicTestModule)[TranslateService -> TranslateService]: 
  NullInjectorError: No provider for TranslateService!

测试是：

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { TranslateTestingModule } from 'ngx-translate-testing';
import { CoreModule } from './core.module';

const ENGLISH_LANGUAGE = 'en';

describe('AppComponent', () => {

  let fixture: ComponentFixture<AppComponent>;
  let appComponent: AppComponent;

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    appComponent = fixture.componentInstance;
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        CoreModule,
        TranslateTestingModule
          .withTranslations(ENGLISH_LANGUAGE, require('assets/i18n/en.json'))
          .withDefaultLanguage(ENGLISH_LANGUAGE) …

我有一个 angular 9 应用程序，我在其中从资产文件夹中读取了 api url：

@Injectable()
export class ConfigService {

  private configUrl = '../../../assets/config/config.json';

  constructor(private loggerService: LoggerService) { }

  public async loadConfig(): Promise<any> {
    try {
      const response = await fetch(this.configUrl);

      if (!response.ok) {
        throw new Error(response.statusText);
      }

      return await response.json();
    } catch (err) {
      this.loggerService.error(`ConfigService 'loadConfig' threw an error on calling ${this.configUrl} : ${err.tostring()}`);
    }
  }
}

用于读取配置文件的方法在构建后配置角度生产文件中描述。

environment.ts 是

export const environment = {
  production: false,
  apiUrl: "https://localhost/api/",
};

environment.prod.ts 是

export const environment = …

我曾尝试使用print.js库打印 PDF ，它对于单个 PDF 打印工作正常。现在，当我尝试打印多个 PDF 时，它会抛出一个错误：错误多项选择。. 另外，我尝试过使用纯 JS，但它多次提示输入多个文档。

下面是我们正在使用的代码。

printJS({ 
         printable: ['dummy.pdf', 'dummy1.pdf'], 
         type:'pdf'
        });

请找到附件。

任何帮助非常感谢！

我使用 S3 和 CloudFront 服务在 AWS 中托管我的 Angular 9 应用程序。访问应用程序后，我在浏览器中收到以下错误：

\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/polyfills-es2015.5af60e74e954ace452ee.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\n/main-es2015.9d477ae8338087e639b5.js:1
\n
• 无法加载模块脚本：服务器响应非 JavaScript MIME 类型“text/html”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
\n

我的index.html：

<!doctype html>\n<html>\n<head>    \n  <meta charset="utf-8">\n  <title>ReachApp Success</title>\n  <base href="/reach">\n    <!-- TODo: check for common configuration for material icon -->\n    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> \n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="icon" type="image/x-icon" href="favicon.ico">\n  <script src='https://www.google.com/recaptcha/api.js' async\xc2\xa0defer></script> \n<link rel="stylesheet" href="styles.7f06624db32e037ad1c6.css"></head>\n<body>\n  <reach-root></reach-root>\n …