标签: angular8

更新到 Angular 8，我所有使用 angular flex 并具有 ngClass 的代码都被破坏了：

<div class="pages-container"
       [ngClass.lt-md]="{'mobile-no-padding': true}">
    <router-outlet></router-outlet>
  </div>

渲染时返回错误： ERROR TypeError: this._delegate.setClass is not a function

只能通过删除动态响应后缀 ( [ngClass]="{'mobile-no-padding': true})来解决此问题，但这是一个很大的倒退......

当我构建我的 angular 项目时，我看到

main-es5.js和main-es2015.js 两个文件。我只想支持 Chrome 浏览器如何关闭构建旧的 js 文件我希望 Build.js 上的文件数量最少。

自从我升级到 8 以来，我的 Build 也运行了两次

笔记

构建时间显着增加，我在预算中收到警告警告，初始超出最大值。

这是我的Angular.json文件

      "optimization": true,
      "outputHashing": "none",
      "sourceMap": true,
      "extractCss": false,
      "namedChunks": false,
      "showCircularDependencies": false,
      "aot": true,
      "extractLicenses": false,
      "statsJson": false,
      "progress": true,
      "vendorChunk": false,
      "buildOptimizer": true,

浏览器列表文件

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please …

我正在创建一个Angular + Cordova应用程序，它在浏览器中效果很好。

我面临的问题是，当我尝试包含cordova.js文件时，该应用程序在加载到设备上后变为空白。我做了一些研究，它原来是用的东西cordova.exec，并zone.js在角使用造成的问题。

我想要一个关于如何正确包含cordova.js在基于Angular的项目中的解决方案。

科尔多瓦

android 8.0.0
ios 5.0.1

角度的

@angular-devkit/architect         0.801.1
@angular-devkit/build-angular     0.801.1
@angular-devkit/build-optimizer   0.801.1
@angular-devkit/build-webpack     0.801.1
@angular-devkit/core              8.1.1
@angular-devkit/schematics        8.1.1
@ngtools/webpack                  8.1.1
@schematics/angular               8.1.1
@schematics/update                0.801.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

我正在为我公司的组件库迁移 angular 7 到 angular 8，该组件库是用“ng generate library”构建的。我试图尽可能接近标准的 angular cli 构建。我创建了一个全新的应用程序和一个带有“@angular/cli”：“~8.2.0”的库。

https://github.com/Annie-Huang/my-angular8-app/tree/create-lib

我注意到在 angular 8 中，他们将 public_api.ts 更改为 public-api.ts https://github.com/Annie-Huang/my-angular8-app/blob/create-lib/projects/ea-ui/src/public -api.ts

所以我将现有库中的入口文件从 public_api.ts 重命名为 public-api.ts 并在 ng-package.json 中更新它

我得到这个错误

Bradleys-MacBook-Pro:ea-component-library anniehuang$ ng build ea-ui
Building Angular Package
ERROR: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.

An unhandled exception occurred: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.

See "/private/var/folders/sw/1rxh903n6y39kkwbgr737n8m0000gp/T/ng-SE3jbI/angular-errors.log" for further details.

当我在我自己的 repo ( ng build ea-ui)中的全新 angular 8 应用程序中构建它时。我没有这个错误。

而且我在公司组件库上进行全局搜索时没有public_api.ts字符串。

ng-package.json:
---------------------
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ea-ui",
  "lib": {
    "entryFile": …

我尝试构建具有最佳性能的Angular应用。
这个程序很简单：

一个页眉（带有两个链接），一个页脚，主页和关于页面。
该应用程序在这里可用

我使用Chrome的LightHouse查看指标。
使用默认指标：

Device: Mobile
Audits: All
Throttling: Simulated Slow 4G, 4X CPU Slowdown
Clear Storage

在此之后，我使用Nginx代理通过gzip提供所有资产。

  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_types text/plain application/json text/xml text/css text/js text/javascript application/javascript image/svg+xml;
  gzip_min_length 1000;

这是我得到的结果>

当然，这还不错，但是我想看看Angular是否有可能使First Input Delay小于100ms。

如果我删除了清除存储参数，则会出现以下情况。
如果我不输入任何节流参数，我将处于下面。

但是我想使用这些参数将其设置为100ms以下。因此，当我在生产环境中构建产品时，可能会错过一些参数，该项目基于Angular SSR hero应用程序。

我看到当我呈现不带JS文件的网站时，只要没有javascript交互并且我在First输入交互中的时间为20毫秒，它仍然可以正常工作，因此也许有一种方法可以不同地加载JS脚本。它正在使用> = 1500ms的超时，但这不是一个好习惯。

我想知道Angular SSR是否可以使用<100ms的首次输入时间延迟来渲染，或者该堆栈是否实际无法渲染。

我了解LightHouse审核是基于您的计算机性能。我使用Pagespeed洞察力获得了几乎相同的结果 ，但由于服务器性能较弱，速度索引和第一个字节的到达时间除外。

Github项目：https : //github.com/mlescaudron/angular-app-optimized
还有要在本地测试的命令：

# Docker config for nginx with gzip compression
docker run -d --name web-server --network=host …

我是新手。我在index.component.ts文件中遇到此错误。

未捕获的ReferenceError：__importDefault未定义

附有错误屏幕截图

我使用角度自定义元素功能（element.js）创建了一个小应用程序，将那个element.js文件导入到index.html中的另一个angular（parent）应用程序中，在开发服务器（ng serve）元素功能正常，但是在生产模式下（ng build --prod）在element.js文件中得到此错误。

@ angular / core“：”〜8.1.3“，@ angular / elements”：“ ^ 8.1.3”

element (angular custom element code)
polyfills.ts

import 'zone.js/dist/zone';  // Included with Angular CLI.
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";

app.module.ts
export class AppModule {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {

    const el = createCustomElement(NotificationElementComponent, {
      injector: this.injector
    });
    // using built in the browser to create your own custome element name
    customElements.define('test-card', el);
  }
}

angular (parent app)
index.html
<!doctype html>
<html lang="en">
<body>
    <app-root></app-root>
    <script src="./assets/elements.js"></script>
</body> …

当我尝试从终端窗口运行 ng serve 时出现此错误。

An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'

下面是我的 package.json 文件

{
  "name": "ProjectDetails",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.4.1",
    "core-js": …

这是 cmd npm run serve 上的错误：ssr

 I'm getting the error 'Can't find module 'require("./server/main") while hit the command "npm run server:ssr".
    but "npm run build:ssr" execute successfully.
    Please Help anyone.

    PS C:\Users\DELL\ion\portfolio\portfolio> npm run serve:ssr

    > portfolio@0.0.0 serve:ssr C:\Users\DELL\ion\portfolio\portfolio
    > node dist/server

    internal/modules/cjs/loader.js:628
        throw err;
        ^

    Error: Cannot find module 'require("./server/main")'
    Require stack:
    - C:\Users\DELL\ion\portfolio\portfolio\dist\server.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
        at Function.Module._load (internal/modules/cjs/loader.js:527:27)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at webpackUniversalModuleDefinition 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:3:28)
        at Object.<anonymous> 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:10:3)
        at Module._compile (internal/modules/cjs/loader.js:776:30)
        at Object.Module._extensions..js 
       (internal/modules/cjs/loader.js:787:10)
        at …

我是 angular (TypeScript) 的新手，我想实现两个类之间的组合。我怎样才能做到这一点？

在 c# 中，如果我有两个类，如 A 和 B，那么我实现如下组合

class A 
{
  int ID {get;set;}
  List<B> lstClassB {get;set;}
}

class B {
  int ID {get;set;}
}

我如何在 TypeScript 中使用此功能，例如

export class A 
{
  ID :int;
  lstClassB :  ////what should I write here?
}

export class B {
  ID:int;
}