Как создать новый компонент в Angular 4 с помощью CLI

Создание и обслуживание проекта Angular через сервер разработки —

Сначала перейдите в свой каталог проектов и введите ниже -

ng new my-app
cd my-app
ng generate component User (or) ng g c user 
ng serve

Здесь «D:\Angular\my-app›» — это каталог проекта моего приложения Angular, а «Пользователь» — это имя компонента.

Община выглядит так -

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

В Angular4 это будет работать так же. Если вы получаете сообщение об ошибке, я думаю, что ваша проблема где-то в другом месте.

В командной строке введите

ng сгенерировать компонент YOURCOMPONENTNAME

Для этого есть даже сокращения: команды generate можно использовать как g, а component как c:

ng g c YOURCOMPONENTNAME

вы можете использовать ng --help, ng g --help или ng g c --help для документов.

Конечно, переименуйте YOURCOMPONENTNAME в имя, которое вы хотели бы использовать.

Документы: angular-cli добавит ссылку на компоненты, директивы и пайпы автоматически в app.module.ts.

Обновление: это все еще работает в Angular версии 8.

1) сначала перейдите в свой каталог проектов

2) затем запустите команду ниже в терминале.

ng generate component componentname

ИЛИ

ng g component componentname

3) после этого вы увидите такой вывод,

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

Если вы хотите создать новый компонент без файла .spec, вы можете использовать

ng g c component-name --spec false

Вы можете найти эти параметры, используя ng g c --help

ng g component componentname

Он генерирует компонент и добавляет компонент в объявления модуля.

при создании компонента вручную вы должны добавить компонент в объявление модуля следующим образом:

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

Для создания компонента в определенной папке

ng g c employee/create-employee --skipTests=false --flat=true

Эта строка создаст имя папки «employee», под которым будет создан компонент «create-employee».

без создания папки

ng g c create-employee --skipTests=false --flat=true

Убедитесь, что вы находитесь в каталоге вашего проекта в строке CMD

    ng g component componentName

ng g c componentname

Он создаст следующие 4 файла:

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

ng generate component component_name не работал в моем случае, потому что вместо использования «приложения» в качестве имени папки проекта я переименовал его во что-то другое. Я снова изменил его на app. Теперь он работает нормально

ng g c COMPONENTNAME

эта команда используется для создания компонента с использованием терминала, который я использую в angular2.

g для генерации c для компонента

В моем случае у меня есть еще один файл .angular-cli.json в папке src. Его удаление решило проблему. Надеюсь, поможет

angular 4.1.1 angular-cli 1.0.1

ng g component component name

прежде чем вы наберете эту команду, проверьте, что вы будете в своем пути к директиве проекта

ng g c --dry-run, чтобы вы могли видеть, что вы собираетесь сделать, прежде чем вы действительно это сделаете, это избавит вас от разочарования. Просто показывает вам, что он собирается делать, не делая этого на самом деле.

Вы должны находиться в папке src/app вашего проекта angular-cli в командной строке. Например:

D:\angular2-cli\first-app\src\app> ng generate component test

Только тогда он сгенерирует ваш компонент.

перейдите в каталог вашего проекта в CMD и выполните следующие команды. Вы также можете использовать кодовый терминал Visual Studio.

ng generate component "component_name"

ИЛИ

ng g c "component_name"

будет создана новая папка с "component_name"

имя_компонента/имя_компонента.component.html имя_компонента/имя_компонента.component.spec.ts имя_компонента/имя_компонента.component.ts имя_компонента/имя_компонента.component.css

новый компонент будет автоматически добавленным модулем.

вы можете избежать создания файла спецификации, выполнив следующую команду

ng g c "component_name" --nospec

Вы обновили angular-cli до последней версии? или вы пытались обновить узел, npm или машинописный текст? эта проблема возникает из-за таких версий, как angular/typescript/node. Если вы обновляете cli, используйте эту ссылку здесь. https://github.com/angular/angular-cli/wiki/stories-1.0-update

перейдите в папку проекта angular и откройте командную строку типа «заголовок компонента ng g», где заголовок — это новый компонент, который вы хотите создать. По умолчанию компонент заголовка будет создан внутри компонента приложения. Вы можете создавать компоненты внутри component. Например, если вы хотите создать компонент внутри заголовка, который мы сделали выше, введите «ng g component header/menu». Это создаст компонент меню внутри компонента заголовка.

ng g c COMPONENTNAME должно работать, если ваш модуль не найден, попробуйте следующее:

1. Проверьте каталог вашего проекта.
2. Если вы используете код Visual Studio, перезагрузите его или снова откройте в нем свой проект.

Перейти к местоположению проекта в указанной папке

C:\Angular6\sample>

Здесь вы можете ввести команду

C:\Angular6\sample>ng g c users

Здесь g означает генерировать, c означает компонент, пользователи — это имя компонента.

он сгенерирует 4 файла

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

Шаг 1:

Войдите в каталог проекта! (перейдите в созданное приложение).

Шаг 2:

Введите следующую команду и запустите!

ng generate component [componentname]

• Добавьте имя компонента, который вы хотите создать, в разделе [имя компонента].

ИЛИ

ng generate c [componentname]

• Добавьте имя компонента, который вы хотите сгенерировать, в разделе [componentname].

Оба варианта будут работать

Для справки ознакомьтесь с этим разделом документации Angular!

https://angular.io/tutorial/toh-pt1

Для справки также проверьте ссылку на Angular Cli на github!

https://github.com/angular/angular-cli/wiki/generate-component

В основном существует два способа создания нового компонента в Angular: использование ng g c <component_name> , другой способ — использование ng generate component <component_name>. с помощью одной из этих команд можно создать новый компонент.

ng generate component componentName.

Он автоматически импортирует компонент в module.ts.

cd в свой проект и запустите,

> ng generate component "componentname"
ex: ng generate component shopping-cart

OR

> ng g c shopping-cart

(Это создаст новую папку в папке «приложение» с именем «корзина» и создаст файлы спецификаций .html, .ts, .css.)

Если вы не хотите создавать файл .spec

> ng g c shopping-cart --skipTests true

Если вы хотите создать компонент в какой-либо конкретной папке в разделе «приложение»,

> ng g c ecommerce/shopping-cart

(вы получите структуру папок «app/ecommerce/shopping-cart»)