Як створити новий компонент в Angular 4 за допомогою CLI

У кутовій 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 application, а “ User ” - це назва компонента.

Спільне виглядає так -

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 це буде працювати так само. Якщо ви отримали помилку, я думаю, ваша проблема в іншому місці.

У командному рядку введіть

згенерувати компонент YOURCOMPONENTNAME

Для цього є навіть скорочення: команди generateможна використовувати як gі componentяк c:

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

ви можете використовувати 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 { }

Переконайтеся, що ви знаходитесь у каталозі вашого проекту в рядку CMD

    ng g component componentName

Для створення компонента під певною папкою

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

У цьому рядку буде створено ім'я папки 'worker', під яким він створює компонент 'create-worker'.

без створення папки

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 генерувати компонент 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 або typecript? ця проблема виникає через такі версії, як angular / typecript / node. Якщо ви оновлюєте кліп, використовуйте це посилання тут. https://github.com/angular/angular-cli/wiki/stories-1.0-update

перейдіть до папки вашого кутового проекту та відкрийте командний рядок типу "ng g header header", де header - це новий компонент, який ви хочете створити. За замовчуванням компонент заголовка буде створений всередині компонента програми. Ви можете створити компоненти всередині Наприклад, якщо ви хочете створити компонент всередині заголовка, який ми створили вище, введіть "ng g 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]

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

Обидва будуть працювати

Для ознайомлення з цим розділом кутової документації!

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.)

Якщо ви не хочете створювати файл .spec

> ng g c shopping-cart --skipTests true

Якщо ви хочете створити компонент у будь-якій конкретній папці в розділі "додаток"

> ng g c ecommerce/shopping-cart

(ви отримаєте структуру папок "app / e-commerce / 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>. за допомогою однієї з цих команд може бути сформовано новий компонент.