Wrong entry path for scoped packages

[matthiaskomarek]

Hello,

inside the build.js file you create the entry paths for es5 and es2015 modules in this way:

const es5Entry = path.join(es5OutputFolder, `${libName}.js`);

This resolves in the following path for scoped package names:

/libname/out-tsc/lib-es5/@scope/libname.js

But it should be:

/libname/out-tsc/lib-es5/libname.js

I am currently working on a fix, if you want i can make a PR for this. Thank you.

[filipesilva]

Scoped libraries actually need a slightly different setup overall, which this repository does not cater for right now. Your proposed fix would not fully enable scoped repositories - they would still not be published correctly.

I'll leave the issue open though as this is a known limitation.

[matthiaskomarek]

Thanks for your feedback. Can you give me a hint on what else has to be changed to get this working with scoped packages? Thanks

[caroso1222]

@matthiaskomarek, I was able to publish an AoT compatible scoped package. I don't remember all the steps I took, but it was not too much for sure. One thing you want to do is to properly set the flatModuleId property in tsconfig.es5.json:

 "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "samble-library.js",
    "flatModuleId": "@scope-name/samble-library"
  }

Other than that just make sure the name of your package.json is properly set with the scope and adjust the paths as you want to distribute your lib.

Again, I might be missing tons of things here, but this is what worked for me. I've studied the angular-material build process for like 200 hours so it also helped :)

[ospatil]

@matthiaskomarek, you can check out https://github.com/ospatil/angular-quickstart-lib. I have added npm scoped package and sass support.

[webdev48]

@ospatil thanks for this. I tried pulling in your branch changes but I am getting this:

> npm run clean

> my-test-lib@0.1.0 clean /Users/webdev48/Documents/workspace/angular4-test/my-test-lib
> rimraf out-tsc dist "src/lib/**/*.js" "src/lib/**/*.map"

> my-test-lib@0.1.0 build /Users/webdev48/Documents/workspace/angular4-test/my-test-lib
> node build.js

Build failed. See below for errors.

{ Error: Command failed: node-sass /Users/webdev48/Documents/workspace/angular4-test/my-test-lib/src/lib -o /Users/webdev48/Documents/workspace/angular4-test/my-test-lib/src/lib --output-style compressed --source-map true --source-map-contents
  No input file was found.

  at Promise.all.then.arr (/Users/webdev48/Documents/workspace/angular4-test/my-test-lib/node_modules/execa/index.js:210:11)
  at process._tickCallback (internal/process/next_tick.js:109:7)
  code: 1,
    killed: false,
  stdout: '',
  stderr: 'No input file was found.\n',
  failed: true,
  signal: null,
  cmd: 'node-sass /Users/webdev48/Documents/workspace/angular4-test/my-test-lib/src/lib -o /Users/webdev48/Documents/workspace/angular4-test/my-test-lib/src/lib --output-style compressed --source-map true --source-map-contents',
  timedOut: false }

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/webdev48/.nvm/versions/node/v6.10.2/bin/node" "/Users/webdev48/.nvm/versions/node/v6.10.2/bin/npm" "run" "build"
npm ERR! node v6.10.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! my-test-lib@0.1.0 build: `node build.js`
npm ERR! Exit status 1
npm ERR!
  npm ERR! Failed at the my-test-lib@0.1.0 build script 'node build.js'.
  npm ERR! Make sure you have the latest version of node.js and npm installed.
  npm ERR! If you do, this is most likely a problem with the my-test-lib package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR!     node build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs my-test-lib
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls my-test-lib
npm ERR! There is likely additional logging output above.

  npm ERR! Please include the following file with any support request:
  npm ERR!     /Users/webdev48/Documents/workspace/angular4-test/my-test-lib/npm-debug.log

Environment

node v6.10.2 npm 3.10.10

[ospatil]

@webdev48 node-sass is complaining because it didn't find any scss file to compile. Take a look at my changes. Probably you missed renaming src/lib/src/component/lib.component.css to src/lib/src/component/lib.component.scss.

[webdev48]

@ospatil I did make that change. Even i look at your changes, i still wonder how is node-sass able to point to any scss file?

In your compileSassFiles function,

return execa('node-sass', [
    srcFolder,
    '-o', srcFolder,
    '--output-style',
    'compressed',
    '--source-map',
    true,
    '--source-map-contents'
  ]);

so you are giving srcFolder as input to node-sass , correct ? The srcFolder points to /src/lib but the scss file resides in /src/lib/src/component/*.scss.... how does that map? Does node-sass recursively looks for any scss files in all sub folders? Also will this function work if you have multiple components within the /src/lib/src/ .

Sorry if my question looks naive. I am very new to node-sass.

[webdev48]

Yes so it works now. I am sorry ... i was just playing with stuff and renamed my scss file to _lib.component.scss which doesnt seem to work but a simple lib.component.scss does work. It also works on multiple components so looks like node-sass goes into each folder within /src/lib and looks for any scss file in there. Thanks

[eronalves]

@ospatil Thanks for your changes!

I forked your repository and I implemented a lib, works perfectly.

[sebelga]

@ospatil thanks for your implementation with sass! It seems that one step is missing, which is to rename the scss url to the compiled .css file indide the styleUrls array, or am I missing something? Because the inlineStyle otherwise just inlines raw sass. thanks!

[EDIT]: I added

styleUrl = styleUrl.replace(/\.scss$/, '.css');

in the inlineStyle function and it all works perfectly :)