标签: angular8

我们提供了一种从API延迟加载和设置Angular应用程序的LOCALE_ID的方法（通过在启动时加载用户配置文件数据）。这在Angular 7上效果很好，但是当我升级到Angular 8时，它停止了工作。调用localeFactory时（​​参见下文）localeService.getLocale()，它是未定义的，尚未被初始化。我们将初始化SharedResolver为，SharedModule其中的包含在的中，其中包含在中AppModule。在Angular 8中执行此操作的正确方法是什么？在更改文档中没有看到与此相关的任何内容，因此我想这是间接的。我在这里应该采取什么方法的任何意见？谢谢

请参见下面的相关代码：

app.module.ts

export function localeFactory(localeService: LocaleService) {
    console.log('locale factory called');
    // This is `undefined` here now for some reason
    console.log(localeService.getLocale());

    return localeService.getLocale() || 'en';
}

...
const APP_LOCALE_ID = {
    provide: LOCALE_ID,
    deps: [LocaleService],
    useFactory: localeFactory
};

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule.forRoot(), // <- in this module we have the SharedResolver
        AccountModule,
        ApiModule,
        GenesysSubprojectModule
    ],
    declarations: [AppComponent],
    providers: [
        AppRouteGuard,
        BreadcrumbService,
        {
            provide: APP_INITIALIZER, …

我正在尝试使用下面的命令提高 Angular Build 的生产速度，运行以下命令，但是构建时间没有改善，仍然是 14 分钟。--prod 命令是否使它忽略了最大旧大小空间？脚本正确吗？我们在 Azure Devops Agents 中运行它，这是它在日志中的显示方式

node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none

max-old-space-size 的命令应该在 angular.json 配置生产部分重新定位吗？

缩短 Angular 7 应用程序的生产构建时间

这是 package.json 文件：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod",
    "prod": "node --max-old-space-size=12288 ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

解决此错误的步骤是什么？

HostResourceResolver 中的错误：无法在 C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts 的上下文中解析styles.css）

我正在开发一个 Angular 8 应用程序，它将使用 JWT 令牌身份验证登录到 .Net Core Rest API。

当我启动应用程序时，应用程序编译成功，没有错误。但是，当我打开http://localhost:4200 时，会出现一个空白页面。

这是app-routing.module.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login';
import { HomeComponent } from './home';
import { AppComponent } from './app.component';
import { AuthGuard } from './_helpers';

const routes: Routes = [
  {path: '',component:AppComponent,canActivate: [AuthGuard]},
  {path:'login',component:LoginComponent},
  {path: '**',redirectTo:''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是app.component.ts文件： …

有谁知道如何在第一次加载组件时触发路由器事件？

我正在使用 Angular 8。

我有一个移动到另一个组件的深层链接。因此，当我单击深层链接时，它会重定向到主页。每当计算机启动新会话时就会发生这种情况。

因此，根据我的调查，当应用程序第一次加载时，它（this.router.events）什么也不返回。

任何人都可以向我提出有关它的建议吗？

以下是我的代码：- app.component.ts

 ngAfterViewInit() {
    this.getActivatedRoute();
}

getActivatedRoute() {
    debugger
    const routerSub$ = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.routes = event.url.toLowerCase().split('/');
        this.currentRoute = this.routes[1];
        if (this.currentRoute !== this.previousRoute) {
          this.setBodyClassBasedOnRouter(this.routes);
          this.previousRoute = this.currentRoute;
        }
      }
    });
  }

我有个问题。

我正在尝试使用 ng-cli 创建一个 Angular 8 库，但我无法使用npm link.

我试图在我的 angular.json 上添加这个：

    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "preserveSymlinks": true,
        "tsConfig": "projects/button/tsconfig.lib.json",
        "project": "projects/button/ng-package.json"
      }
    }, 

但得到：

"Schema validation failed with the following errors: Data path ""
should NOT have additional properties(preserveSymlinks)."

我发现它不适用于图书馆。

然后我尝试将其添加到我的 tsconfig.lib.json 中：

 "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
    "preserveSymlinks": true
  }

什么也没发生。

我在这里搜索了一个解决方案，但找不到类似的东西。

我怎样才能做到？

谢谢！

当我们必须在 Angular 中使用 NO_ERRORS_SCHEMA 和 CUSTOM_ELEMENTS_SCHEMA 时？

他们的意思是什么？它是 CSS 样式的配置吗？

我有一个项目，其中用户界面基于 angular 8，后端是 springboot java 服务。整个项目是一个多模块项目，其中 angular 部分是一个单独的模块，front-end builder用于将 angular 代码构建到单个可执行 jar 中。使用嵌入式 tomcat 时，应用程序运行良好。我有一个新要求，即尝试在外部 tomcat 上单独部署 angular ui 部分。但是当我将 dist 文件夹复制到 webapps 文件夹并尝试为其提供服务时，浏览器会阻止请求说：

Loading module from “http://localhost:8080/polyfills-es2015.js” was blocked because of a disallowed MIME type (“text/html”).

做了一些谷歌搜索后，我才明白发生的问题，因为角8个CLI未能在添加type属性到script的标签index.html。当我手动添加类型时，一切正常。任何人都可以帮助我理解为什么会发生这种情况，以及手动编辑以外的问题的可能解决方案。

生成index.html：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <i class="fas fa-chart-area"></i>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body style="margin: 0;">
  <app-root></app-root>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" …

如果当前访问令牌已过期，我正在尝试刷新访问令牌。

我一次发送多个请求，我想创建一种队列，因此其他请求不会请求刷新令牌路由。

我在谷歌上搜索了一些最佳实践和示例，并找到了以下针对 Angular 6 和 rxjs v6 的解决方案，它使用了 BehaviourSubject 和 switchMaps。（请看附件代码）

但是我使用的是 Angular 8 (8.1) 和 rxjs v6.4，这个解决方案对我不起作用。

它根本没有达到switchMap在this.authService.requestAccessToken().pipe。（使用console.log测试）

但是，如果我发表评论return this.refreshTokenSubject.pipe并返回，next.handle(request)它会到达那个 switchMap，但我的其他请求都失败了。

您知道是否有任何更改，或者我应该尝试以其他方式执行此操作吗？

• 令牌拦截器

    import { Injectable } from '@angular/core';
    import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
    import { AuthService } from './auth.service';
    import { Observable, BehaviorSubject, Subject } from 'rxjs';
    import { switchMap, take, filter } from 'rxjs/operators';
    @Injectable()
    export class TokenInterceptor implements HttpInterceptor {
        private refreshTokenInProgress = …

有人问过类似的问题，但在浏览了所有这些问题和许多关于该主题的博客文章后，我无法弄清楚这一点，所以请原谅我。

我正在创建一个简单的博客（出于这个问题的目的）两部分，Angular 8 中的前端 SPA 和 ASP.NET Core 3 中的后端 API。在我前端的一部分中，我试图上传用作新创建博客的图像的图像。当我尝试上传图像时，后端生成的 IFormFile 总是以null. 以下是代码，非常感谢任何帮助！

新博客.component.html：

<form [formGroup]="newBlogForm" (ngSubmit)="onSubmit(newBlogForm.value)">

    <div>
        <label for="Name">
            Blog Name
        </label>
        <input type="text" formControlName="Name">
    </div>

    <div>
        <label for="TileImage">
            Tile Image
        </label>
        <input type="file" formControlName="TileImage">
    </div>

    <button type="submit">Create Blog</button>

</form>

新博客.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { BlogService } from '../blog-services/blog.service';

@Component({
  selector: 'app-new-blog',
  templateUrl: './new-blog.component.html',
  styleUrls: ['./new-blog.component.css']
})
export class NewBlogComponent implements OnInit { …