标签: angular13

我在将项目从 Angular 8.2.1 升级到 Angular 13 版本时遇到问题。

在准备构建时成功升级后，出现以下错误。

Data path "" must NOT have additional properties(extractCss).

我已经在 angular.json 文件中重命名为styleext with style，但仍然无法找到此错误的根本原因。

angular.json 文件如下。

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "qiwkCollaborator": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {

        /*  "configurations": {
            "fr": {
            "aot": true,
            "outputPath": "dist/qwikCollaborator/fr/",
            "i18nFile": "src/translate/messages.fr.xlf",      
            "i18nFormat": "xlf",      
            "i18nLocale": "fr",      
            "i18nMissingTranslation": "error"    
             },
             "en": {
            "aot": true,
            "outputPath": "dist/qwikCollaborator/en/", …

根据文档，没有任何被称为.angular 的东西被考虑。然而，在我的项目中，我立即在项目的根目录中获取该目录（与例如package.json处于同一级别）。

它以前不存在，因为我的.gitignore会对它咆哮。目前，我正在尝试最新的 Angular 版本 13.0，我得出的结论是，它是该工具的新增功能。可能是一些临时的东西，因为它的内容如下。

• .角度/缓存/角度-webpack
• .Angular/缓存/babel-webpack

谷歌.angular 目录点是什么是毫无意义的，我得到的唯一（半）相关的命中是上面链接的文档。

.angular目录怎么了？我需要关心（和/或版本控制它）吗？

将 Angular 12 项目升级到 Angular 13 后，我遇到了一个问题：SCSS 不再在库中查找共享样式表。波浪号 (~) 似乎不再解析为 node_modules。

破碎的： @use '~my-angular-lib' as lib;

作品： @use '../node_modules/my-angular-lib' as lib;

我注意到从 Angular 13 开始，角度材质只是直接引用“@angular/material”，但我不知道如何让它与我的库一起使用。node_modules每次都使用相对路径似乎有点老套。

当前在 node_modules 中引用样式表的最佳方法是什么，或者我在 ~ 不再指向 node_modules 时缺少什么？

我有一个使用 Angular 13 的项目，我想将其更新到 Angular 14。

当我尝试更新时：

ng update @angular/core@14 @angular/cli@14

我得到：

Package "@angular-eslint/schematics" has an incompatible peer dependency to "@angular/cli" (requires ">= 13.0.0 < 14.0.0", would install "14.0.1").

关于如何避免此错误的任何想法？

我使用了 Angular 13。“@angular/core”：“~13.3.11”“codelyzer”：“^6.0.2”。当我使用 npm install 时，它会安装所有依赖项，并出现以下警告。我尝试 npmaudit --force 因此它将 codelyzer 版本转换为 0.0.28，现在 npm install 抛出错误，codelyzer@0.0.28 不支持 angular13。所以我现在处于循环状态。

npm i -> 抛出警告以审计从 codelyzer@6.0.2 到 @0.0.28

npm Audit --force：现在更改 codelyzer@0.0.28 的版本 npm 我抛出错误 codelyzer@0.0.28 不支持 angular13。

如何退出这个循环呢？

更新我的角度版本后运行时ng serve出现以下错误：

An unhandled exception occurred: Directory import 'C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular-devkit\build-angular\src\dev-server' is not supported 
resolving ES modules imported from C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
Did you mean to import C:/Users/xxx/Documents/desktop-server-client-app/desktop/server/client/node_modules/@angular-devkit/build-angular/src/dev-server/index.js?
See "C:\Users\xxx\AppData\Local\Temp\ng-TMJqg5\angular-errors.log" for further details.

日志输出：

[error] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular-devkit\build-angular\src\dev-server' is not supported resolving ES modules imported from C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
    Did you mean to import C:/Users/xxx/Documents/desktop-server-client-app/desktop/server/client/node_modules/@angular-devkit/build-angular/src/dev-server/index.js?
        at finalizeResolution (internal/modules/esm/resolve.js:272:17)
        at moduleResolve (internal/modules/esm/resolve.js:699:10)
        at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
        at Loader.resolve (internal/modules/esm/loader.js:85:40)
        at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
        at Loader.import (internal/modules/esm/loader.js:164:28)
        at importModuleDynamically (internal/modules/cjs/loader.js:1006:27)
        at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
        at …

我刚刚从 Angular 12 升级到 Angular 13，还更新了一些其他 NPM 包。
\n其中一个包含我的 angular.json 文件中引用的 scss 文件。这从来都不是问题，但在尝试为我的应用程序提供服务后，我收到一条对我来说很难理解的错误消息：

./src/styles/ag-grid.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/styles.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\ag-grid.scss 1:9  root stylesheet\n\n./src/styles/products.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/products.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/mixins.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\products.scss 1:9  root stylesheet\n\n./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n

我正在尝试将我的 Angular 项目从12升级到13，但遇到了一个问题，经过两天的工作后无法解决。

我的应用程序是默认的 Angular Material 应用程序，具有一些功能，例如杂货清单应用程序。

为了插入项目，我使用带有一些可以提交的字段的公式。（MatDialog）我已将此公式外包到我自己的角度库中，以使其更加通用和可重用。

现在，升级库项目并尝试将生成的构建（来自新的 Ivy）链接到我的应用程序中后，我收到错误：

SassError: Can't find stylesheet to import.

@import '@my/form-lib/theme';

未知的样式表来自该库，并提供对该库的默认主题访问，但我无法确定为什么会发生这种情况。我还认识到，现在的使用Angular Material不再需要波浪号 ~ 。

@use '**~**@angular/material' as mat;

我尝试删除所有波浪号〜但错误仍然存​​在。

我还尝试重置@angluar/cli为13.0.0 ，这是此处描述的解决方案。
但这对我不起作用。

有人知道可以尝试的解决方案吗？

我目前正在将我的应用程序从 v12 升级到 v13，并注意到弹出此警告：

Option "deployUrl" is deprecated: Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.

在深入研究之后，“baseHref”或 APP_BASE_REF 选项都不适用于我的设置，所以我想知道我是否错误地使用了它们，或者是否没有好的方法来替换它

以下是 angular.json 中的应用程序配置片段：

    "dashboard": {
      "projectType": "application",
      "root": "apps/dashboard",
      "sourceRoot": "apps/dashboard/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [],
            "outputPath": "../dist/dashboard/",
            "deployUrl": "/dist/dashboard/",
            "index": "apps/dashboard/src/index.html",
            "main": "apps/dashboard/src/main.ts",
            "tsConfig": "apps/dashboard/tsconfig.app.json",
            "polyfills": "apps/dashboard/src/polyfills.ts",
            "styles": [
              "apps/dashboard/src/styles.scss"
            ],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "libs/assets/styles"
              ]
            },
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false, …

更新到 Angular 13 后，在我的 WebStorm 中，异步管道变成红色，并显示以下消息

缺少 require() 语句

此外，所有指令都带有警告，例如

属性 ngIf 上没有匹配的指令

我再次安装了https://plugins.jetbrains.com/plugin/6971-angular-and-angularjs，重新启动了 WebStorm，但什么也没有。我有WebStorm 2021.2.3

请注意，编译工作正常，项目工作正常，我只是收到这些错误和警告。

回到我对预更新（Angular 12）的承诺并运行npm i红色和警告消失。

有什么建议么？