How do I add a new module to an existing one using Angular-CLI?

After generating modules:

$  ng generate module myTestModule
installing module
  create src/app/my-test-module/my-test-module.module.ts

$  ng generate module myTestModule2
installing module
  create src/app/my-test-module2/my-test-module2.module.ts

I have the main module file called app.module.ts. How can I register my-test-module.module.ts in the app.module.ts and my-test-module2.module.ts in the my-test-module.module.ts?


More details for better understanding

$ ng generate --help

module <name> <options...>
  aliases: m
  --spec (Boolean) Specifies if a spec file is generated.
  --flat (Boolean) Flag to indicate if a dir is created.
  --routing (Boolean) (Default: false) Specifies if a routing module file should be generated.
  --app (String) Specifies app name to use.
    aliases: -a <value>

No mention of -m or --module as described on this wiki

My current angular cli version:

$ ng -v

@angular/cli: 1.0.1
node: 7.4.0
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.3

Additional information I have updated my angular-cli to v1.2.1. Now I can use an alias -m

module <name> <options...>
  aliases: m
  --spec (Boolean) Specifies if a spec file is generated.
  --flat (Boolean) Flag to indicate if a dir is created.
  --routing (Boolean) (Default: false) Specifies if a routing module file should be generated.
  --app (String) Specifies app name to use.
    aliases: -a <value>
  --module (String) Specifies where the module should be imported.
    aliases: -m <value>

So, I attempted:

$ ng g m MyTestModuleModule34 -m AppModule

installing module
Specified module does not exist

Even though the specified module exists in src/app/app-module.ts

Answer №1

To create a module, you can utilize the -m option and indicate the desired module name for registration. The command line interface will take care of registering the module on your behalf.

Answer №2

It's unclear why the -m command isn't functioning as expected, but you have the option to manually import them, which only takes about 2 seconds.

app.module.ts

@NgModule({
  imports: [
    MyTestModule
  ]
})

my-test-module.ts

@NgModule({
  imports: [
    MyTestModule2 // It is recommended to name this module MyTest2Module for consistency in naming across your application. For example, all module names should end with the word "module". Refer to the Angular Style Guide for more details.
  ]
})

Additionally, there is no need to repeat the term "Module" in any of the names. Instead, simply use my-test.module.ts and my-test-two.module.ts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying multiple lines of text in a MatSnackbar in Angular is possible

For instance: let message: example;let message2 : example3; For Example: alert(message + '\n'+ message2); Is it possible to display the mat snackbar in Angular in a similar way as shown above?                     ...

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

rxjs in Angular2 is missing the observable.interval function

Currently, I am attempting to utilize the interval method of an observable; however, I consistently encounter the following error message: Property 'interval' does not exist on type 'Observable<any>'. I have included the follow ...

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

When using ngx-masonry, I encountered the following error message- ERROR in Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3 Specifications: Angular 4 ngx-masonry 1.1.4 ...

Generating a d.ts file for images in Typescript using automation techniques

Currently, I am working on a React application that utilizes TypeScript and webpack. I am aware that in TypeScript, when importing an image file, it is necessary to create a d.ts file in the current directory and include the following code: // index.d.ts ...

Performing Cypress testing involves comparing the token stored in the localStorage with the one saved in the clipboard

I am currently working on a button function that copies the token stored in localStorage to the clipboard. I am trying to write code that will compare the token in localStorage with the one in the clipboard in order to verify if the copy was successful. H ...

Adding items to the array is only effective when done within the loop

My approach involves retrieving data from an API using axios, organizing it within a function named "RefractorData()," and then pushing it onto an existing array. However, I have encountered a problem where the array gets populated within a forEach loop, a ...

Exploring the versatility of Highcharts with callback functions and comprehensive

Currently, I am utilizing Highcharts with angular 9. Here is the link to the code : https://stackblitz.com/edit/angular-ivy-wdejxk For running on the application side or test side, follow these instructions: Test Side: In the angular.json file at line ...

Different varieties of TypeScript's keyof when working with objects

I am grappling with the concept of TypeScript's types when incorporating the keyof type operator on objects. Check out this example: type TypeA = { [k: number]: boolean }; type AKey = keyof TypeA; // ^? type AKey = number type TypeB = { [k: string] ...

What could be causing the absence of the exported Object when importing into a different Typescript project?

I am currently in the process of developing a React component library using Typescript that I want to import into another Typescript project. Specifically, I want to import an Analytics chart library into a storybook for demonstration and testing purposes. ...

When running the 'npm install' command, it automatically downloads and installs the most recent versions of the libraries, regardless of the versions specified in the package.json file

When I tried to download the dependencies for my Angular project, I used the npm install command in the command prompt at the project level folder. To my surprise, it seems like this command is installing the latest versions of the libraries instead of the ...

How to Route in Angular 5 and Pass a String as a Parameter in the URL

I am currently working on an Angular project that focuses on geographic system data. The concept is as follows: I have a component with the route: {path: 'home'}. I aim to pass a geojson URL along with this route, making it look like this: {pat ...

[Simple TypeScript]: Assign the parameter value as the key of the object returned by the function

How do I modify the key of a function returned object to match its parameter's value? Here is my current code: const createCache = <A, T extends string>(name: T, base = {}) => { const cache = base; return { [name]: cache, } as { ...

Errors related to missing RxJS operators are occurring in the browser, but are not showing up in Visual Studio

Recently, I encountered a peculiar problem with my Angular4 project, which is managed under Angular-CLI and utilizes the RxJS library. Upon updating the RxJS library to version 5.5.2, the project started experiencing issues with Observable operators. The s ...

Injecting dynamic templates in Angular 7

Let me simplify my issue: I am currently using NgxDatatable to display a CRUD table. I have a base component named CrudComponent, which manages all CRUD operations. This component was designed to be extended for all basic entities. The challenge I am en ...

Tips and tricks for setting up plugins in DHTMLX Gantt within an Angular application

In an attempt to integrate the marker plugin into my dhtmlxGantt within an Angular project, I referred to the documentation available at . Despite following the instructions provided, I encountered an issue where the marker plugin fails to display a vertic ...

I am currently experiencing a problem with deleting documents in Firebase Firestore using React, Typescript, and Redux. Despite the code running, the document continues to exist in

I seem to be encountering an issue that I can't quite figure out. Despite my code running smoothly, I am unable to delete a document from Firestore. The document ID definitely exists within the database, and there are no subcollections attached to it ...

Angular 2 is having trouble with object dot notation in Typescript and is expecting a semicolon

Hello, I am currently transitioning a project from Angular 1 to TypeScript and Angular 2. One issue I'm facing is getting some property definitions into the Angular 2 component. Below are the property definitions causing trouble: import { Component ...

Ways to simulate objects in jest

I'm facing an issue while trying to mock a function of an object using Jest and Typescript. Below is a concise version of my code: // myModule.ts export const Foo = { doSomething: () => { // ... does something console.log('original ...

A guide to utilizing a signed URL and the Ionic camera plugin in Ionic 4 to upload images to Amazon S3

As I work with the Ionic Native plugin for image uploading using S3 signed URLs, I am encountering an issue due to the camera plugin generating images in base64 format. This is causing difficulties when trying to upload them in the correct format. takePho ...