简体   繁体   中英

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

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM