Angular 10：无法编写参考

Question

我尝试按照 Angular 更新指南从 Angular 8 升级到 Angular 10。

我的项目由核心应用程序、共享（2 个库、谷歌地图和共享组件）和一个额外的 apk fsm（2 个库、应用程序及其元数据）组成。

核心和共享的构建正在通过，但 fsm 构建失败，并显示“错误：无法在 C:/Users/PATH/fsm-frontend/node_modules/shared-frontend/src/components/chip/chip.component 中写入对 ChipComponent 的引用” .ts 来自 C:/Users/PATH/fsm-frontend/node_modules/shared-frontend/src/components/chip/chip.module.ts “错误。

ChipComponent 本身没有问题，但可能在某些导入或 tsconfig 中存在问题。

共享 tsconfig.json：

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "importHelpers": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "paths": {
            "shared-frontend": [
                "dist/shared-frontend"
            ],
            "shared-frontend/*": [
                "dist/shared-frontend/*"
            ],
            "map": [
                "dist/map"
            ],
            "map/*": [
                "dist/map/*"
            ]
        }
    }
}

FSM tsconfig.json：

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "importHelpers": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "paths": {
            "fsm-frontend": [
                "dist/fsm-frontend"
            ],
            "fsm-frontend/*": [
                "dist/fsm-frontend/*"
            ],
            "@angular/*": [
                "./node_modules/@angular/*"
            ],
            "rxjs": [
                "./node_modules/rxjs"
            ],
            "zone.js": [
                "./node_modules/zone.js"
            ],
            "@ngx-translate/*": [
                "./node_modules/@ngx-translate/*"
            ],
            "shared-frontend": [
                "./node_modules/shared-frontend"
            ],
            "primeng": [
                "./node_modules/primeng"
            ],
            "tslib": [
                "./node_modules/tslib"
            ],
            "fsm-metadata": [
                "dist/fsm-metadata"
            ],
            "fsm-metadata/*": [
                "dist/fsm-metadata/*"
            ]
        }
    }
}

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/shared-frontend",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}

共享结构：

projects - map
              - shared-frontend
                     -src
                           - ...
                           -components
                                       -...
                                       -chip
                                             -chip.component.ts
                                             -chip.module.ts
                                        -index.ts 

                      -lib
                         -shared-frontend.module.ts
                       ...
                       pubic_api.ts

共享前端.module.ts：

... // exports including:
export * from '../components/index';
@NgModule({
    imports: [CommonModule],
    exports: [
        CommonModule,
...
        ChipModule,
...
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
        return {
            ngModule: SharedModule,
            providers: [
                SERVICES.....
            ]
        };
    }
}

来自芯片的index.ts：

...
export * from './chip/chip.module';
export * from './chip/chip.component';
...

pubic_api.ts

export * from './lib/hive-shared-frontend.module';

ng 服务也可以工作，但 apk 看起来没有使用共享的任何内容。ng build fsm-frontend --prod 也通过了..

顺便说一句，我通过 npm 链接将共享（地图和前端）和 fsm（前端和元数据）链接到核心，并通过 npm 链接共享到 fsm

编辑：桶文件中的导出顺序重要吗？

Answer 1

我正在同一个项目中构建一个库和一个应用程序。当接口定义自动导入时，我的问题出现了。引用的路径是公共 api 文件而不是库。

创建的自动导入： import { AbcInterface } from 'projects/mylib/src/public-api'

需要从 '@mylib' 导入 { AbcInterface }

因此，请在您的申请中进行全局搜索'projects/并更改您的参考资料。

Answer 2

在花了 2000 万寻找类似的错误之后......我才意识到实际的错误只是一个 linting 错误！

我正在使用 NX，因此我通过使用自定义 TS 路径（例如@my-workspace/my-lib.

在开发该功能时，我没有意识到我的 IDE 使用相对路径（而不是带有 的自定义 TS 路径@）从另一个库导入了文件。

因此，我尝试导入的文件在技术上超出了rootDir（在 tsconfig 中）。

我所要做的就是（运行我的 linting 并意识到它严重失败）+使用自定义 TS 路径将其他库的所有相对导入替换为绝对导入。

编辑：这又发生在我身上，而且原因不同！所以也分享这个新的。

我有一个库，我决定将其拆分为子条目，以便可以对它们进行摇树分析。也就是说，我的package.json（库的，而不是顶级库的）中定义的库的名称是错误的。确保它与您尝试导入的内容匹配。

编辑：我可以确认，我再次被这个问题困扰，并且由于 lib package.json 中的错误名称和晦涩的错误，不知何故仍然设法失去了 1h...