I am trying to buiding a library to agregate and distribute a set of angular components between multiple projects, with a dependancy on angular/material2 . My goal is to publish it in npm.
Having an issue when running tsc
to package the lib, .js
file try to import from '@angular/material/index'
. Same file .d.ts
import from '@angular/material'
and I do not understand where this difference is coming from.
My 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}));
My 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';
As a result, when importing my library I have the following error message :
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.
If i manually edit myLibrary.es5.js
and remove /index
everything works fine.
(All process is highly inspried by @angular/material buildind process)
All right, found my problem but for un unknown reason npm did install @angular/material
with full code instead of builded version. I was having all .ts
files and index.ts
so I guess tsc did natuarlly used it.
Solved it we deleting node_modules
folder and running npm i
again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.