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

В angular 2 я использую

ng g c componentname

Но он не поддерживается в Angular 4, поэтому я создал его вручную, но он показывает ошибку, что это не модуль.

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

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

ng new my-app
cd my-app
ng g component 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 generate component YOURCOMPONENTNAME

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

ng gc ВАШЕГО КОМПОНЕНТА

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

Конечно, переименуйте ИМЯ КОМПОНЕНТА в имя, которое вы хотите использовать.

Документы: 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 { }

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

    ng g component componentName

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

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

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

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

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

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 gc --dry-run, чтобы вы могли увидеть, что вы собираетесь делать, прежде чем вы это сделаете, избавит от некоторых разочарований. Просто показывает вам, что он собирается делать, не делая этого на самом деле.

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

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

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

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

перейдите в папку проекта angular и откройте командную строку типа «ng g component header», где header - это новый компонент, который вы хотите создать. По умолчанию компонент заголовка будет создан внутри компонента приложения. Вы можете создавать компоненты внутри компонент. Например, если вы хотите создать компонент внутри заголовка, который мы сделали выше, введите «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 означает компонент, users - имя компонента.

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

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

Шаг 1:

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

Шаг 2:

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

ng generate component [componentname]

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

ИЛИ

ng generate c [componentname]

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

Оба будут работать

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

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

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

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

ng generate component componentName.

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

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

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

ИЛИ

> ng g c shopping-cart

(Это создаст новую папку в папке «app» с именем «shopping-cart» и создаст файлы .html, .ts, .css. Specs.)

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

> ng g c shopping-cart --skipTests true

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

> ng g c ecommerce/shopping-cart

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

перейдите в каталог вашего проекта в 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, используя ng g c <component_name>, другой способ - использовать ng generate component <component_name>. используя одну из этих команд, можно создать новый компонент.