Angular 10：无法编写参考

Posted 2023-03-15

【中文标题】Angular 10：无法编写参考

【英文标题】：Angular 10: Unable to write a reference

【发布时间】：2021-02-12 01:17:40

【问题描述】：

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

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

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

shared-frontend.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 serve 也可以，但 apk 看起来它没有使用共享中的任何内容。 ng build fsm-frontend --prod 也通过了..

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

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

【问题讨论】：

看起来像这个问题：github.com/angular/angular/issues/29361

@inorganik 我看到了那个帖子，不幸的是没有解决我的问题。我尝试将路径从 dist 更改为项目并添加 rootDir :'.'到两个 tsconfig 文件

【参考方案1】：

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

自动导入创建： 从 'projects/mylib/src/public-api' 导入 AbcInterface

需要 从“@mylib”导入 AbcInterface

因此，请在您的应用程序中全局搜索 'projects/ 并更改您的引用。

【参考方案2】：

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

我正在使用 NX，因此我通过使用自定义 TS 路径（如 @my-workspace/my-lib）来导入我的许多库。

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

因此，我尝试导入的文件在技术上不属于 rootDir（在 tsconfig 中）。

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

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

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

编辑：我可以确认我再次被这个咬了，但由于 lib package.json 中的错误名称和晦涩的错误，我仍然设法松开了 1h...