标签: angular12

我最近将我的 Angular 应用程序版本 11 更新为 12。也使用 SSR。以前它工作得很好。现在，在 SSR 构建中，它加载 CSS 的时间有点晚，并首先显示原始 HTML，并在一段时间后加载 CSS。我尝试从 angular.json 更改 CSS 文件的顺序，但没有任何效果。

截屏

所以我使用 swagger 和 Nswag 很长一段时间，我可以看到自动生成的方法用于生成这样的行以作为默认值退出：

return _observableOf<MyClassData>(<any>null);

...现在使用相同的 nswag json 文件，它生成如下：

return _observableOf(null);

这似乎对 Angular 9 有效，因为它不支持 strict=true，但现在在我的 Angular 11/12 项目中，这会引发一个错误：

错误 TS2322：类型“Observable”无法分配给类型“Observable”。类型“null”不可分配给类型“MyClassData”。

解决方案1）手动替换自动生成的文件，添加：return _observableOf < MyClassData >(< any > null); 这很疯狂，因为每次生成文件时，我都会丢失更改。

解决方案2）打开/编辑angular.json，在schematics/angular:application中，严格：将其从true更改为false，当然它会停止失败，但我非常希望保持代码严格。

这里最好的解决方案是什么？有没有一种方法可以指定 NSWAG 应该像过去一样继续返回？

谢谢。

我有多模块化 Angular 13 应用程序，其中模块是使用延迟加载来加载的。问题是生成的 Angular 文件（如 main.[hash].js、pollyfils.[hash].js 和 runtime.[hash].js）不位于站点根目录。结构如下所示：

/index.html
  /mysitefolder/main.f29052602897eb02.js
  /mysitefolder/styles.755cfc65dad8627d.css
  /mysitefolder/polyfills.eca354b64e370005.js
  /mysitefolder/runtime.54752149a889ba60.js
  /mysitefolder/815.d3bd01384abd247c.js

Angular.json 文件具有以下设置：

"outputPath": "../public/mysitefolder"

当应用程序运行时，它尝试815.d3bd01384abd247c.js从应用程序根目录加载块文件，而不是从它的实际位置加载，显然块加载失败。如何解决这个问题？是否有任何设置告诉 Angular 从特定位置加载延迟加载模块的块/mysitefolder/？

我正在开发一个应用程序，我已经部署了我的应用程序，现在我面临的问题是我的一些产品文件花费了太多时间加载，这里是我的网络选项卡的屏幕截图。我在制作 prod 构建时也尝试过 --aot 和优化器命令 如何克服这个问题？

将项目从 Angular 版本 5 升级到 12。该项目运行良好，但单元测试用例未运行，仅显示

Karma v 6.3.17 - 连接；测试：执行；

PhantomJS 2.1.1 (Windows 8) 空闲

Chrome 99.0.4844.74 (Windows 10) 处于空闲状态

Firefox 也试过了，但结果还是一样。

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-firefox-launcher'),
            require('karma-phantomjs-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('karma-junit-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        browserDisconnectTimeout: 100000,
        browserNoActivityTimeout: 100000,
        browserDisconnectTolerance: 10,
        client:{
            clearContext: false, // leave Jasmine Spec Runner output visible in browser
            captureConsole: true
        },
        coverageIstanbulReporter: { …

使用以下命令升级到 Angular 12ng update @angular/core@12 @angular/cli@12会导致我在使用该模式编译时出现以下错误--configuration production。

\xe2\x9c\x96 Index html generation failed.\nundefined:15:4027680: missing \'}\'\n

这是这个问题的重复，但想发布一个正确的问题/答案，因为它肯定会帮助其他人，而且我不知道我们什么时候能够在该线程上再次发布，因为它几天前就关闭了

我正在RxJs7我的 Angular 12.2.0 项目中尝试，似乎 rxjs 运算符和方法的路径发生了变化。

我收到以下错误

./dist/candypal/website/fesm2015/candypal-website.js:8:0-50 - Error: Module not found: Error: Package path ./index is not exported from package /Users/aniruddh/aniruddh/develop/experiment/candypal/node_modules/rxjs (see exports field in /Users/aniruddh/aniruddh/develop/experiment/candypal/node_modules/rxjs/package.json)

请注意，上述错误来自使用 rxjs7 的库

编辑：我现在已将项目升级到 ng13，问题仍然存在。

我正在构建一个 Angular 12 13 应用程序（最初可能是在版本 8 或 9 中生成的）。我的构建命令是ng build --configuration=production --output-hashing=all

我希望MYAPP在应用程序启动时在浏览器控制台中看到写入内容，但没有出现。（实际上我想做其他事情，但 console.log 说明了我的问题）

以下片段来自main.ts

if (environment.production) {
  enableProdMode();
  console.log("MYAPP");
}

有任何想法吗？

我正在做一个 Angular 12 Material 应用程序。

我有一个像这样的简单表格

<form [formGroup]="form" class="normal-form" (ngSubmit)="onSubmit()">
  <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
      <div class="controles-container">
        <input type="hidden" formControlName="Id">
          <mat-label><strong>Active</strong></mat-label>
              <mat-slide-toggle formControlName="IsActive"
                  [checked]="checked">
              </mat-slide-toggle>
              <textarea matInput hidden></textarea>

        <mat-form-field>
          <input formControlName="Name" matInput  placeholder=" Notification Name" >
          <mat-error>This field is mandatory</mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-select formControlName="ProcessorName" placeholder="Processor Name">
            <ng-container *ngFor="let processors of dataSourceProcessors">
              <mat-option value="{{processors.Value}}">{{processors.Text}}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="controles-container">
          <mat-label><strong>Channel</strong></mat-label>
          <li *ngFor="let chanel of dataSourceChannelLevel">
            <mat-checkbox id={{chanel.NotificationLogLevel.Id}} formControlName="Channel" (change)="onChangeEventFunc( $event)">
              {{chanel.NotificationLogLevel.Name}}
            </mat-checkbox>
          </li>
        <div class="button-row">
          <button mat-raised-button color="warn" (click)="onClose()">Close</button> …

我已使用 Angular 12 应用程序将 Angular 12 应用程序更新为 Angular 14 ng update。构建成功，可以看到我的应用程序运行得很好，但我的测试失败了。我遇到的错误之一是：

TestBedStatic 类型上不存在属性“configureTestingModule”

有人知道这个问题有什么解决方法吗？我需要更新我的测试库吗？

@angular/core: ^14.2.0
jasmine-core: ~3.8.0
jasmine-marbles: ^0.8.3
karma: ~6.3.0
protractor: ^7.0.0

样品测试：

beforeEach( () => {
    TestBed.configureTestingModule({
        providers: []
    });
})