我正在尝试建立一个库来聚合和分配多个项目之间的一组角度组件,并依赖于angular/material2。我的目标是在npm发布它。
在运行tsc
打包lib时遇到问题,.js
文件尝试导入from '@angular/material/index'
。相同的文件.d.ts
导入from '@angular/material'
,我不明白这种差异来自何处。
我的一口气:
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 buildind流程高度批准)
答案 0 :(得分:0)
好吧,发现我的问题但是由于不明原因,npm确实安装了@angular/material
完整代码而不是构建版本。我收到了所有.ts
个文件和index.ts
所以我猜tsc确实自然地使用了它。
解决了这个问题,我们删除了node_modules
文件夹并再次运行npm i
。