标签: angular10

为什么 Angular 10 在它被弃用时制作它的默认 Lint 程序 TSLint？Angular 是否推荐 TSLint 或 ESLint？

https://angular.io/cli/lint

https://palantir.github.io/tslint/

当我尝试加载刚刚用 --prod 标志编译的应用程序时，我收到此错误Uncaught (in promise): TypeError: Cannot read property \'\xc9\xb5cmp\' of undefined in angular，并将 optimization 和 buildOptimizer 设置为 true，当我将两者设置为 false 时，问题消失，应用程序加载时没有问题，但应用程序大小更大，并且性能不符合预期，我需要构建一个将 optimization 和 buildOptimizer 设置为 true 的产品，有人对这个问题有好的解决方案吗？

角度.json 文件：

            "staging": {\n              "fileReplacements": [\n                {\n                  "replace": "src/environments/environment.ts",\n                  "with": "src/environments/environment.staging.ts"\n                }\n              ],\n              "optimization": true,\n              "outputHashing": "all",\n              "sourceMap": false,\n              "extractCss": true,\n              "namedChunks": false,\n              "extractLicenses": true,\n              "vendorChunk": false,\n              "buildOptimizer": true,\n              "budgets": [\n                {\n                  "type": "initial",\n                  "maximumWarning": "2mb",\n                  "maximumError": "5mb"\n                },\n                {\n                  "type": "anyComponentStyle",\n                  "maximumWarning": "6kb",\n                  "maximumError": "10kb"\n                }\n              ]\n            }\n …

我最近将 Angular 应用程序从 v9 升级到了 v10。

我注意到不再支持未修饰的类。看这里

因此，在ng upgrade我的抽象组件中，没有装饰的组件已更改为具有@Directive()装饰器。

例如

export abstract class AbstractFormControl implements ControlValueAccessor { ... }

被改为

@Directive()
export abstract class AbstractFormControl implements ControlValueAccessor { ... }

为什么 Angular 使用@Directive. 难道不是@Component一个更好的方法吗，因为类更像是一个组件而不是指令？意图是什么？

我是 Angular 的初学者，并尝试在应用程序中实现全局错误处理，为此我创建了 appErrorHandler 类并实现了 ErrorHandler，并在此类上注入了 Toast Service，但它显示了上述错误。AppErrorHandler 类。

  @Injectable()
 export class AppErrorHandler implements ErrorHandler {

constructor(private toastService: ToastrService) {}

handleError(error: any): void {
    this.toastService.error("An unexpected error","Error");
}    

}

应用程序模块

 providers: [
{ provide: ErrorHandler, useClass: AppErrorHandler },
MakeService
],
 imports: [
BrowserAnimationsModule,
  ToastrModule.forRoot(
  {
    timeOut: 6000,
   positionClass: 'toast-bottom-right',
   preventDuplicates: true,
  }
),
RouterModule.forRoot([
  
  {  path:'', component:HomeComponent },
  {  path:'vehicle-form', component:VehicleFormComponent },
  
]),

],

<ul> \n     <li data-info="Amount in (\xe2\x82\xb9)">{{depositeAmt}}</li>\n     <li data-info="Status">\n        <button class="statusbtn Process"  data-bs-toggle="collapse" data-bs-target="#collapseExample1" >{{status}}</button>\n     </li>\n</ul>\n<div class="newClass collapse" id="collapseExample1{{i}}">\n

其中 i 在 ts 文件中定义为 i:number=1;

我正在关注此网站并尝试通过以下命令将我的项目更新到 11.0。

npx @angular/cli@11 update @angular/core@11 @angular/cli@11

每次我运行它时，都会出现以下错误：

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: my-first-app@0.0.0
npm ERR! Found: @angular-devkit/build-angular@0.1002.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~0.1102.17" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~0.1102.17" from the root project
npm ERR! Conflicting peer dependency: @angular/compiler-cli@11.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^11.0.0 || ^11.2.0-next" from @angular-devkit/build-angular@0.1102.17
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1102.17" from the …

我正在生成https://editor.swagger.io/ Codegen 代理。它在 Angular 10 中给出了以下错误。如何修复？

通用类型“ModuleWithProviders”需要 1 个类型参数。

export class ApiModule {
    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders {
        return {
            ngModule: ApiModule,
            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
        };
    }

    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
                 @Optional() http: HttpClient) {
        if (parentModule) {
            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
        }
        if (!http) {
            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
            'See also …

我正在尝试将项目中的 Angular 从 10.2 版更新到 11.0 版。运行 ng 更新：

  @angular-devkit/build-angular      0.1002.0 -> 0.1100.1     ng update @angular-devkit/build-angular
  @angular/cdk                       10.2.7 -> 11.0.0         ng update @angular/cdk
  @angular/cli                       10.2.0 -> 11.0.1         ng update @angular/cli
  @angular/core                      10.2.3 -> 11.0.0         ng update @angular/core
  @angular/material                  10.2.7 -> 11.0.0         ng update @angular/material

不幸的是，我尝试更新的每个包都失败了。我尝试使用 --force 和 --allowDirty 标志。

@angular-cli

npm ERR! Found: @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~0.1100.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~0.1100.1" from the root …

目前，我的应用程序已部署，所有 js 都有时间戳版本。现在，当我再次构建我的 angular 应用程序时，js 将有一个新的时间戳版本。

有没有一种方法可以比较我的构建版本，如果不匹配，则允许用户从应用程序注销？

我们目前正在将项目从 Angular 8 升级到 10，并且在构建过程中的文件替换方面遇到了一些麻烦。我们有两种不同的样式和不同的文本，过去是通过在配置中执行 FileReplacements 来选择的。它们看起来像这样：

"fileReplacements": [
  {
    "replace": "src/index.html",
    "with": "src/index.xy.html"
  }
  {
    "replace": "src/assets/text/de.json",
    "with": "src/assets/text/de.xy.json"
  }
]

奇怪的是，对于 html 文件，替换似乎有效，但对于资产则不然。我们很想让它发挥作用，并且也大致了解为什么它过去有效而现在无效。

以下是我们的 package.json 中的版本：

"dependencies": {
    "@angular/common": "10.2.3",
    "@angular/compiler": "10.2.3",
    "@angular/core": "10.2.3",
    "@angular/forms": "10.2.3",
    "@angular/platform-browser": "10.2.3",
    "@angular/platform-browser-dynamic": "10.2.3",
    "@angular/router": "10.2.3",
    ...
}
"devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular-devkit/build-ng-packagr": "~0.1002.0",
    "@angular-devkit/core": "~10.2.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "^10.2.3",
    ...
}