lucasbauche / MyAngularLibrary

A basic example of a component library which can be consumed in Angular CLI projects. It includes an automatic build task using gulp.
MIT License
11 stars 6 forks source link

Some errors following the tutorial. #2

Open BBaysinger opened 7 years ago

BBaysinger commented 7 years ago

Hi Lucas, thanks for the tutorial. I was trying to follow it, and I ran into some issues. I got past a couple of them.

After doing the Installing gulp section, I ran gulp build and got:

[11:30:33] Failed to load external module ts-node/register
[11:30:33] Failed to load external module typescript-node/register
[11:30:33] Failed to load external module typescript-register
[11:30:33] Failed to load external module typescript-require
[11:30:34] Using gulpfile ~/Downloads/MyAngularLibrary-master/gulpfile.ts
[11:30:34] Starting 'build'...
[11:30:34] Starting 'clean'...
[11:30:34] Finished 'clean' after 12 ms
[11:30:34] Starting 'compile-sass'...
[11:30:34] Finished 'compile-sass' after 13 ms
[11:30:34] Starting 'compile-typings'...
gulp-typescript: tsProject.src() takes no arguments - Use gulp.src(..) if you need to specify a glob
error TS2688: Cannot find type definition file for 'node'.
src/components/my-notification.component.ts(6,18): error TS2307: Cannot find module '@angular/core'.
src/my-library.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
[11:30:35] TypeScript: 1 options error
[11:30:35] TypeScript: 2 semantic errors
[11:30:35] TypeScript: emit succeeded (with errors)
[11:30:35] Finished 'compile-typings' after 1.6 s

...and some other stuff.

I fixed that by running npm install ts-node --save-dev.

Then I ran into:

/Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:319
          throw new TSError(formatDiagnostics(diagnosticList, cwd, ts, lineOffset))
                ^
TSError: ⨯ Unable to compile TypeScript
gulpfile.ts (2,12): Cannot find name 'require'. (2304)
gulpfile.ts (3,13): Cannot find name 'require'. (2304)
gulpfile.ts (4,17): Cannot find name 'require'. (2304)
gulpfile.ts (5,17): Cannot find name 'require'. (2304)
gulpfile.ts (6,16): Cannot find name 'require'. (2304)
gulpfile.ts (7,10): Cannot find name 'require'. (2304)
gulpfile.ts (8,21): Cannot find name 'require'. (2304)
gulpfile.ts (9,10): Cannot find name 'require'. (2304)
    at getOutput (/Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:319:17)
    at /Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:350:18
    at Object.compile (/Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:483:19)
    at Module.m._compile (/Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:413:44)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/bradley/Downloads/MyAngularLibrary-master/node_modules/ts-node/src/index.ts:416:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)

I got past that by using npm install @types/node --save-dev.

Now I try to run gulp build, and I get:

[11:55:16] Requiring external module ts-node/register
[11:55:18] Using gulpfile ~/Downloads/MyAngularLibrary-master/gulpfile.ts
[11:55:18] Starting 'build'...
[11:55:18] Starting 'clean'...
[11:55:18] Finished 'clean' after 13 ms
[11:55:18] Starting 'compile-sass'...
[11:55:18] Finished 'compile-sass' after 13 ms
[11:55:18] Starting 'compile-typings'...
gulp-typescript: tsProject.src() takes no arguments - Use gulp.src(..) if you need to specify a glob
src/components/my-notification.component.ts(6,18): error TS2307: Cannot find module '@angular/core'.
src/my-library.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
[11:55:19] TypeScript: 2 semantic errors
[11:55:19] TypeScript: emit succeeded (with errors)
[11:55:19] Finished 'compile-typings' after 1.33 s

Your tutorial is the latest info I can find on building a component library that can be consumed by Angular-CLI. The other ones I found are a bit dated. So this is a valuable tutorial. It would help me so much to see this working. Please let me know what I am missing.

JMFrancia commented 7 years ago

I'm seeing all the same issues as @BBaysinger. Any feedback would be very helpful!

MonasteryJohn commented 7 years ago

Seems to work just fine for me if I take the arguments out of the tsProject.src() call

BBaysinger commented 7 years ago

If that doesn't work, here's another way to create a component library that can be consumed by Angular-CLI. It's a workaround until there is direct support for libraries:

https://github.com/nsmolenskii/ng-demo-lib https://github.com/nsmolenskii/ng-demo-app