tsc 用错误的路径编译导入，在@angular/material 的末尾添加索引

Question

我正在尝试构建一个库来在多个项目之间聚合和分发一组 angular 组件，并依赖于 angular/material2。我的目标是在 npm 中发布它。

运行 tsc 打包 lib 时出现问题，.js 文件尝试导入 from '@angular/material/index'。相同的文件 .d.ts import from '@angular/material' 我不明白这种差异是从哪里来的。

我的 gulp :

import {main as tsc} from '@angular/tsc-wrapped';

const libraryRoot = join('/../myproject/src', 'lib');
const tsconfigPath = join(libraryRoot, 'tsconfig.json');

task('library:build:esm', () => tsc(tsconfigPath, {basePath: libraryRoot}));

我的 tsconfig :

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": false,
    "stripInternal": false,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "../../dist/packages/mila-angular",
    "paths": {},
    "rootDir": ".",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es2015",
    "lib": ["es2015", "dom"],
    "skipLibCheck": false,
    "types": [
    ]
  },
  "files": [
    "public-api.ts",
    "typings.d.ts"
  ],
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "flatModuleOutFile": "index.js",
    "flatModuleId": "mila-angular",
    "skipTemplateCodegen": true
  }
}

myComponent.ts

import { MdDialog, MdDialogRef } from '@angular/material';

myComponent.d.ts

import { MdDialog, MdDialogRef } from '@angular/material';

myComponent.js

import { MdDialog, MdDialogRef } from '@angular/material/index';

因此，在导入我的库时出现以下错误消息：

import { ButtonModule } from 'myLibrary';

ERROR in ./~/myLibrary/myLibrary.es5.js
Module not found: Error: Can't resolve '@angular/material/index' in '/.../myProject/node_modules/myLibrary'
 @ ./~/myLibrary/myLibrary.es5.js 8:0-80
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

如果我手动编辑 myLibrary.es5.js 并删除 /index 一切正常。

（所有过程都受到@angular/material构建过程的高度启发）

Answer 1

好吧，发现了我的问题，但由于未知原因，npm 安装了 @angular/material 完整代码而不是构建版本。我有所有 .ts 文件和 index.ts 所以我猜 tsc 确实自然地使用了它。

我们删除 node_modules 文件夹并再次运行 npm i 解决了这个问题。

tsc 用错误的路径编译导入，在@angular/material 的末尾添加索引

tsc compile import with wrong path, adding index at the end of @angular/material

javascript

typescript

angular-material2

angular