How to import module in Angular?

Question

I have an angular application and I also created a module as npm package. This is the structure:

--otherModule
  --other-module.module.ts
  --index.ts
  --package.json

index.ts:

export { OtherModule } from './other-module.module';

other-module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';;

@NgModule({
  declarations: [ OtherComponent ],
  imports: [
    CommonModule
  ],
})
export class OtherModule {
}

After running npm link I'm trying to use this module in my AppModule like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OtherModule } from 'other-module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OtherModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

But then I'm getting the following error:

Unexpected value 'OtherModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

It seems like the decorator doesn't work or something. Any ideas?

could you provide other-module.module.ts ?

JEY
– JEY

2017-06-20 09:33:10 +00:00
Commented Jun 20, 2017 at 9:33 — JEY
– JEY, Commented Jun 20, 2017 at 9:33
Yes, I updated the answer

ng2user
– ng2user

2017-06-20 10:55:25 +00:00
Commented Jun 20, 2017 at 10:55 — ng2user
– ng2user, Commented Jun 20, 2017 at 10:55

Sriram Jayaraman · Accepted Answer · 2017-06-20 09:36:50Z

1

import { OtherModule } from 'other-module.module'; would work, you missed the module extension that you provided for the directory structure.

answered Jun 20, 2017 at 9:36

Sriram Jayaraman

8602 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ng2user Over a year ago

That's not the problem

Nir Zamir · Accepted Answer · 2017-09-28 13:07:24Z

1

I had the same issue and it's resolved after deleting the node_modules of otherModule and npm-installing from the parent app.

However, one has to constantly install and uninstall the node_modules of the library (install is needed for building, testing, and for IDE to know the types in the dependencies) which makes development very cumbersome.

answered Sep 28, 2017 at 13:07

Nir Zamir

1111 silver badge5 bronze badges

Comments

Bruno João · Accepted Answer · 2017-06-20 16:41:09Z

0

I was facing an issue like this and I fixed it by removing the node_modules folder form inside the linked folder.

For you, the fix should be remove node_modules from within the --otherModule folder. this way, npm would not search inside it.

I do not know if is the same problem you are facing, but worth a try.

answered Jun 20, 2017 at 16:41

Bruno João

5,6042 gold badges23 silver badges26 bronze badges

2 Comments

ng2user Over a year ago

But then you are getting errors in your IDE because he does not know these libraries, no?

Bruno João Over a year ago

You should 1 - remove node_modules from you linked app, 2 - npm install to install the linked app and its dependencies. This whay, the linked app will have only the pkgs it uses and the angular pkgs would be placed in the root node_modules. This way you will have all references but avoid having angular pkgs in two node_modules folders (the app and the linked app).

Guilherme Alencar · Accepted Answer · 2019-04-15 11:09:27Z

0

Your code looks all right, I have simulated it in my machine and worked it. The only diference is that you should change the file from other-module.module.ts to other.module.ts or change your module name from OtherModule to OtherModuleModule and then update those references.

I Suggest you to create your components and modules through angular cli using the command ng g c other to component and ng g m other to module to keep the standard of the project.

answered Apr 15, 2019 at 11:09

Guilherme Alencar

1,44313 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to import module in Angular?

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related