CODEWITHSUNDEEP
angular
Jordy Baart
Jordy Baart

Reputation: 21

Angular 2, angular 4, make own component-library for multiple projects

I made components (with associated modules) with angular-cli (4) and want to use it in other angular-cli projects.

Example: dashboard component, grid...

Question 1. Can somebody tell me in a simple way, how I can prepare/reuse my components/modules (made with angular-cli).?

After that I can publish it with NPM.

Upvotes: 1

Views: 915

Answers (3)

Jordy Baart
Jordy Baart

Reputation: 21

I want to reuse it in my own project.

My instructions:

git clone https://github.com/arunredhu/Angular-library-starter.git

  1. npm install

  2. npm run build

  3. copy dist folder to folder in my project (later this will be installed by npm)

  4. in .angular-cli.json I added "scripts": ["./external_libraries/angular-library-starter/src/core-ui.module.js"]

  5. add line in my shared.module.ts:

    import { CoreUIModule } from './../../../external_libraries/angular-library-starter/dist/src/core-ui.module';

Add CoreUIModule to imports.

Add CoreUIModule to exports of shared.module.ts

  1. in a x.component.html I added: < app-header>< /app-header>

  2. ng serve

I get this error:

    WARNING in ./src/external_libraries/angular-library-starter/dist/src/core-ui.module.js
(Emitted value instead of an instance of Error) Cannot find source file '../../src/core-ui.module.ts': Error: Can't resolve '../../src/core-ui.module.ts' in 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\sr
c\external_libraries\angular-library-starter\dist\src'
 @ ./src/app/modules/shared/shared.module.ts 84:0-109
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

WARNING in ./src/external_libraries/angular-library-starter/dist/src/header/header.component.js
(Emitted value instead of an instance of Error) Cannot find source file '../../../src/header/header.component.ts': Error: Can't resolve '../../../src/header/header.component.ts' in 'C:\Users\x\Documents\Visual Studio 2015\P
/header/header.component.ts': Error: Can't resolve '../../../src/header/header.compon
ent.ts' in 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\src\ex
ternal_libraries\angular-library-starter\dist\src\header'
 @ ./src/external_libraries/angular-library-starter/dist/src/core-ui.module.js 2:0-63

What am I doing wrong?

If I only user instructions 1, 2, 3, 4, I get this error:

Module not found: Error: Can't resolve 'C:\Users\x\Documents\Visual Studio 2015\Projects\web\src\external_libraries\angular-library-starter\src\core-ui.module.js' in 'C:\Users\x\Documents\Visual Studio 2015\Pr
ojects\web\node_modules\@angular\cli\models\webpack-configs'

Upvotes: 0

Arun Redhu
Arun Redhu

Reputation: 1579

I just recently pushed a starter for Angular Library. You can find it here: https://github.com/arunredhu/Angular-library-starter

Upvotes: 0

Z. Bagley
Z. Bagley

Reputation: 9270

The best way to re-use sets of components and modules is to simply make a boiler-plate template. Once you've added your 'dashboard' and 'account' and 'navigation' structure it's as straight-forward as copy pasting your project for later use. Feel free to delete the node_modules folder (and dist folder if that exists) to save some space.

Things to note when you copy/paste to use as the boiler-plate for a new project:

  • You will want to run an npm install first thing to get your node_modules built
  • In your package.json file you will want to rename the project (very top of the file)
  • You can initialize to any git repo w/o any extra effort.

If you want to add module and/or component sets to other projects you'll have to manually copy/paste them into your new project, and then import them into the correct places. This is a straightforward process assuming you have the basic knowledge of Angular app structures.

Upvotes: 1

Related Questions