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

angulartypescriptdependency-injectionmoduledependencies

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

Enclose the type definition for a function from a third-party library

I prefer to utilize Typescript for ensuring immutability in my code. Unfortunately, many libraries do not type their exported function parameters as Readonly or DeepReadonly, even if they are not meant to be mutated. This commonly causes issues because a ...

typescripttypescript-typingstypescript-generics

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

While attempting to initiate a new project using Prisma Client, I encountered an error when passing it with args, even when using an empty array list such as []. Here is the Prisma model: generator client { provider = "prisma-client-js" } dat ...

typescriptnext.jsprisma

Tips for passing a function and an object to a functional component in React

I am struggling with TypeScript and React, so please provide clear instructions. Thank you in advance for your help! My current challenge involves passing both a function and an object to a component. Let's take a look at my component called WordIte ...

javascriptreactjstypescriptcomponents

Encountering issues with material 2 autoComplete onSelect() function after transitioning to Angular4

I recently made the transition to Angular 4 and material 2, but I'm encountering an issue with the autoComplete's onSelect() on md-option. It seems to be not working anymore and I can't seem to find any relevant documentation. Has anyone els ...

angularautocompleteangular-material2

The presence of a method is triggering an Error TS2741 message stating that the property is missing in type

Here is a simplified code snippet that highlights the issue I am facing: class Test { prop1 : boolean prop2 : string method() { } static create(prop1 : boolean, prop2 : string) : Test { let item : Test = { prop1: prop1, prop2: pro ...

angulartypescriptangular8

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Consider an array of objects like this: myArray = [ {name: 'First', parent: 1, delta: 2}, {name: 'Second', parent: 1, delta: 1}, {name: 'Third', parent: 2, delta: 1} ]; The goal is to transform this array into an objec ...

javascriptarraystypescriptobject

TypeScript and Angular: Error Encountered when Trying to Combine Two Arrays

I'm attempting to combine two arrays of the same type that are nested within a "parent" array. The end goal is to flatten the structure. Below is the code I have been using: ngOnInit() { this.Logs.getAllLogs() .subscribe(logs => { ...

angulartypescript

Exploring Angular 2 Application Testing: Tips for Interacting with HTML Elements

In my Angular 2 Frontend testing journey, I came across a blog post ( ) where the author utilized ng-test TestBed for core testing in Angular. While the example provided was helpful for basic understanding, it lacked details on how to manipulate Elements. ...

javascriptangularkarma-jasmine

Ways to extract a single value from a FormGroup

Is it possible to extract individual values from a form using JavaScript? JSON.stringify(this.formName.value) If so, what would be the best approach for achieving this? ...

angulartypescriptangular-reactive-forms

Guide on inputting Vue component in props

<template> <v-dialog width="auto" v-model="isShown" transition="dialog-bottom-transition" > <v-card> <v-card-title v-if="title"> {{ title }}</v-card-title> ...

typescriptvue.jsvue-props

Is there a way for me to determine the version of Angular that I am currently using?

Is there a way for me to figure out which version of Angular I am currently using? I attempted the following: angular --version angular --v angular -version angular -v Unfortunately, I received this error: -bash: angular: command not found Based on yeo ...

angularjsangular

Trouble accessing images from database in Angular 2 with Firebase

Recently, I've integrated an image upload feature for my database using the following function: private saveFileData(upload: Upload): void { this.firebaseAuth.authState.subscribe(auth => { this.db.list(`uploads/${auth && auth.email && au ...

angulartypescriptfirebasefirebase-realtime-databasefirebase-authentication

The Ionic search bar will only initiate a search once the keyboard is no longer in view

In my Ionic application, I have implemented a search bar to filter and search through a list. The filtering process is triggered as soon as I start typing in the search bar. However, the updated results are not displayed on the screen until I manually hide ...

javascriptandroidangulartypescriptionic-framework

Warning: Typescript is unable to locate the specified module, which may result

When it comes to importing an Icon, the following code is what I am currently using: import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg" When working in Visual Studio Code 1.25.1, a warning from tslint appears: [ts] Cannot ...

javascripttypescriptwebpacktslintsvg-react-loader

Bespoke directive - Angular 2/4/5

Currently, I am using Angular 5 CLI but for some reason my custom directive is not working as expected. There are no errors showing up in the console either. I am trying to apply some styles to make the image fill the full width. Below are two different i ...

angularangular5custom-directive

Please refrain from using res.send(status, body) as it is now deprecated. Instead, use res.status(status)

file name script.js. I encountered an error while running my CRUD application. The specific line of code where the error occurs is causing some trouble. Can anyone provide a solution, please? If you need to see the complete code, let me know and I will p ...

angularmongodbexpressmean-stack

Issue detected in TypeScript code - "Could not locate property 'setSelectedFile' in type 'void'.ts(2339)"

Encountering a TypeScript error in my code and seeking assistance. Below are the codes of 2 files with the error message included for review. The file causing the error is named "NewPostForm.tsx". import React, { useState } from 'react&apos ...

reactjstypescript

Upon initial loading, the default sidenav in Angular is not selected

I need to ensure that the sidenav loads the basic page during the initial load. This is controlled by the routing.ts file shown below: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; i ...

angulartypescript

Next.js Troubleshooting: Unexpected Issue with 'use client' Triggering Error in React Client Component

Keeping it simple, here is a useState function that I am using: 'use client' import {useState} from 'react'; const Home = () => { const [fruit, setFruit] = useState('apple'); return ( & ...

reactjstypescriptnext.jsruntime-errorreact-context

Angular4 encountered an error: $(...).DataTable is not recognized as a function

I utilized the bootstrap4 datatable jQuery function within my Angular4 application to construct a sortable table. Below is the code snippet. .component.ts import { Component } from '@angular/core'; declare var $: any; @Component({ template ...

jqueryangulardatatablebootstrap-4