我正在尝试构建一个库,以便在多个项目之间集成和分发一组角组件,并且依赖于角度/材料2。我的目标是把它发表在npm上。
在运行tsc
打包库时出现问题时,.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
,一切都可以正常工作。
(所有过程都是高度浓缩的@角/材料建造过程)
发布于 2017-04-21 03:01:31
好吧,找到我的问题了,但出于不为人知的原因,npm确实安装了完整的代码,而不是构建的版本。我有所有的.ts
文件和index.ts
,所以我想tsc确实很自然地使用了它。
解决了这个问题,我们删除了node_modules
文件夹并再次运行npm i
。
https://stackoverflow.com/questions/43486066
复制