Integration with Angular-Cli

[Danieleeee]

Hi, nice work! It is possible to integrate with Angular-Cli project?

Thanks.

[caroso1222]

Please, take a look at the "Consuming your library during development" section in README. Follow those steps and you'll be able to integrate with CLI

[morganpizzini]

hello, i follow what the README says but if i made changes on my library i have to stop and restart Angular CLI server.. how can i fix this?

[caroso1222]

@morganpizzini Can you verify that your changes are reflected in the folder you npm linked inside your node_modules?

[morganpizzini]

@caroso1222 i just verify that, my link works I have two errors based on how I compile the library. If I launch the watch task I must stop and reload the command "ng serve" if I do a single build task I have the following error

[jdjuan]

Happened to me a few days ago.

Possible Cause

Your app is trying to compile the library when it hasn't finished compiling. If you run npm run build, it will start cleaning the dist folder, if at this point webpack in your main app tries to access the library, it won't find it (because the gulp task hasn't finished), causing your error.

Possible Solution

I would tweak the ng serve command to wait for your library to be compiled before it tries to refresh your app using the poll or the output-hashing argument. Check the docs on how to use it here.

Hey @caroso1222 remember we discussed this a few days ago?

[jdjuan]

I tried with both options but none of them worked. If you are using ng serve I would recommend running npm run build everytime you change something in your library until we find a way to solve this issue.

[jvandemo]

Seems to be working for me here locally:

I'm on macOS Sierra and using the default generated library.

Are you able to reproduce this consistently? Or does it happen occasionally e.g. when the size of library is bigger (and thus compilation would take longer)?

Does running npm run build consistently prevent the problem?

Also, what OS are you on?

Thanks in advance and thank you @caroso1222 and @jdjuan for jumping in!

[morganpizzini]

Hi, I am in Win10 environment My first test environment was an Angular CLI project with sass style,

I have just recreated the whole environment as in the readme file, The file link modifications work properly but are not mirrored in webpack compilation, and it only detects a change in the first run: when the library builds, the webpack detects the change, re-build the application but doesn't see the changes, if i stop webpack and relunch the changes are applied. I made your test but the results is different, could you send me your app/library package to test it? So we can know if it's a Win problem or mine

Update

i retry tests on my first project, and after adding --poll 10000 seems to work

Update 2

No more errors but continues to work on non-updated code

Update 3

Right after a whole test day i can say that:

• Works with npm run build:watch
• With ng serve --poll 10000 works in 90% of cases,
• In case it return an error you just go to the library and save again,because there's no changes the compilation is instantaneous, and there is no more error.

I appreciate your work a lot and I found it very useful,

If I can recommend an improvement:

• I would include a project (maybe angular quickstart seed) in the package so that I could test everything at the same point and removing any webpack update problem

[jvandemo]

@morganpizzini — Thank you for your hard work and feedback, much appreciated! 👍

I am using the default generated library and a freshly generated Angular app using Angular CLI in the video.

I think it is a great idea to include some kind of demo app to quickly test the library in addition to using npm link. It may indeed prove to be more practical during development.

Also, out of interest, do you have the same issue when you npm link the src directory of you library instead of the dist directory?

Working with the src will use the source TypeScript file instead of the bundle in dist so it does not tell you whether the generated bundle as expected, but it may help during development.

Can you give that a try to see if it works as expected? Thanks!

[morganpizzini]

Of course! I will try it in the next few days and update this comment

[jvandemo]

@morganpizzini — Thank you, Morgan.

[morganpizzini]

Tests and WORKS!! Run npm link in src folder makes ng serve works perfectly.

[jvandemo]

@morganpizzini — Awesome, I have added a section to the README file in case others experience the same issue: https://github.com/jvandemo/generator-angular2-library#how-can-i-avoid-recompilation-during-development.

Thank you for the confirmation! 👍

[jvandemo]

Closing this issue. Feel free to re-open if needed.

[gsteen]

Isn't working with angular 5. Module build failed: Error: .../index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

[fabriziodebortoli]

Update tsconfig.app.json with:

   "compilerOptions": {
       ...
        "paths": {
            "yourlibrary ": [
                "../node_modules/yourlibrary"
            ]
        }
    }

[Eiarzate1]

Hi,

I am stuck with the re-compilation issue. These are my dependencies.

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0-beta.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

I followed the guide to avoid re compile on the library project. Whenever I change something in the library project I can see the change being reflected inside the node_modules/library project referenced by npm link.

However, I do not see the compiler kick off with a re-compile cycle and I am not sure if I have configured everything correctly for Angular 5 +.

I performed the npm link inside src folder of library project. Then on application project I ran npm link. I see the node modules created and the code inside node_modules is refreshed but no re compilation cycle is kicked off.

tsconfig.app.json is configured just as mentioned 19 days ago.

"compilerOptions": {
       ...
        "paths": {
            "yourlibrary ": [
                "../node_modules/yourlibrary"
            ]
        }
    }

I am starting server just with ng serve --preserve-symlinks