Ultimate Angular CLI Справочное руководство

Чтобы импортировать новый модуль в другой модуль, вы можете указать его как импорт в определении @NgModule . Например:

 import { AdminModule } from './admin/admin.module'; @NgModule({ // ... imports: [ AdminModule ] }) export class AppModule { } 

Доступные Варианты

• --routing : логическое, по умолчанию false , сгенерировать дополнительный модуль AdminRoutingModule только с информацией о маршрутизации и добавить его в качестве импорта в ваш новый модуль
• --spec : логическое, по умолчанию false , добавить src/app/admin/admin.module.spec.ts с модульным тестом, который проверяет, существует ли модуль.

Запустите $ ng generate --help чтобы увидеть все доступные опции вашего локально установленного Angular CLI.

Примеры:

 # Add module 'admin' $ ng generate module admin # Add module 'admin' with additional module containing routing information $ ng generate module admin --routing 

Добавление новой трубы

Канал является угловым эквивалентом фильтра в AngularJS 1.x и позволяет преобразовывать отображаемое значение в шаблоне.

Чтобы добавить канал с именем convertToEuro , запустите:

 $ ng generate pipe convert-to-euro installing pipe create src/app/convert-to-euro.pipe.spec.ts create src/app/convert-to-euro.pipe.ts update src/app/app.module.ts 

Angular CLI автоматически подстраивает буквенный регистр имени файла и канала, поэтому следующие команды имеют одинаковый эффект:

 # All three commands are equivalent $ ng generate pipe convert-to-euro $ ng generate pipe convertToEuro $ ng generate pipe ConvertToEuro 

За кулисами происходит следующее:

• создается файл src/app/convert-to-euro.pipe.ts который экспортирует класс канала с именем ConvertToEuroPipe
• файл src/app/convert-to-euro.pipe.spec.ts создается с модульным тестом для канала
• ConvertToEuroPipe добавляется как объявление в декоратор @NgModule ближайшего модуля, в данном случае AppModule в src/app/app.module.ts .

Доступные Варианты

• --flat : логическое, по умолчанию true , генерировать файлы компонентов в src/app вместо src/app/site-header
• --spec : логическое, по умолчанию true , генерировать файл спецификации с модульным тестом.

Запустите $ ng generate --help чтобы увидеть все доступные опции вашего локально установленного Angular CLI.

Примеры:

 # Generate pipe 'convertToEuro' with spec and in /src/app directory $ ng generate pipe convert-to-euro # Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory $ ng generate pipe convert-to-euro --spec=false --flat=false 

Добавление нового сервиса

Чтобы добавить сервис с токеном BackendApiService зависимостей BackendApiService , выполните:

 $ ng generate service backend-api installing service create src/app/backend-api.service.spec.ts create src/app/backend-api.service.ts WARNING Service is generated but not provided, it must be provided to be used 

Angular CLI автоматически подстраивает буквенный регистр имени файла и канала, поэтому следующие команды имеют одинаковый эффект:

 # All three commands are equivalent $ ng generate service backend-api $ ng generate service backendApi $ ng generate service BackendApi 

За кулисами происходит следующее:

• создается файл src/app/backend-api.service.ts который экспортирует класс службы с именем BackendApiService
• файл src/app/backend-api.service.spec.ts создается с модульным тестом для вашей новой службы.

Обратите внимание на то, как Angular CLI предупреждает, что сервис генерируется, но еще нигде не предоставляется. Вы можете зарегистрировать сервис в качестве провайдера, добавив его в массив providers: [] где он вам нужен (например, в модуле или компоненте). Например:

 import { BackendApiService } from './backend-api.service'; @NgModule({ // ... providers: [BackendApiService], bootstrap: [AppComponent] }) 

Доступные Варианты

• --flat : логическое, по умолчанию true , генерировать служебный файл в src/app вместо src/app/backend-api
• --spec : логическое, по умолчанию true , генерировать файл спецификации с модульным тестом

Запустите $ ng generate --help чтобы увидеть все доступные опции вашего локально установленного Angular CLI.

Примеры:

 # Generate service with DI token 'BackendApiService' in /src/app directory $ ng generate service backend-api # Generate service with DI token 'BackendApiService' in /src/app/backend-api directory $ ng generate service backend-api --flat=false 

Специальная записка

Angular CLI не просто слепо генерирует код для вас. Он использует статический анализ, чтобы лучше понять семантику вашего приложения.

 $ ng test 

 $ ng test [karma]: No captured browser, open http://localhost:9876/ [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/ [launcher]: Launching browser Chrome with unlimited concurrency [launcher]: Starting browser Chrome [Chrome 57.0.2987 (Mac OS X 10.12.0)]: Connected on socket 4OBzlsVyIPZyE1AYAAAA with id 41455596 Chrome 57.0.2987 (Mac OS X 10.12.0): Executed 3 of 3 SUCCESS (0.132 secs / 0.121 secs) 

 $ ng e2e 

 ** NG Live Development Server is running on http://localhost:49152 ** Hash: e570d23ac26086496e1d Time: 6087ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] webpack: Compiled successfully. I/file_manager - creating folder /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium I/downloader - curl -o /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29.zip https://chromedriver.storage.googleapis.com/2.29/chromedriver_mac64.zip I/update - chromedriver: unzipping chromedriver_2.29.zip I/update - chromedriver: setting permissions to 0755 for /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29 I/launcher - Running 1 instances of WebDriver I/direct - Using ChromeDriver directly... Spec started my-app App ✓ should display message saying app works Executed 1 of 1 spec SUCCESS in 0.523 sec. I/launcher - 0 instance(s) of WebDriver still running I/launcher - chrome #01 passed 

 $ ng build 

 Hash: 59aaa9ef8eac5d46cdf8 Time: 5433ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 3.61 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.07 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] 

 $ ng build --target=production 

 Hash: 4dea6adc9ac01de3c11b Time: 5588ms chunk {0} polyfills.2d45a4c73c85e24fe474.bundle.js (polyfills) 158 kB {4} [initial] [rendered] chunk {1} main.a64b48e56248eb808195.bundle.js (main) 20.8 kB {3} [initial] [rendered] chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.205c7417e47c580a2c34.bundle.js (vendor) 1.1 MB [initial] [rendered] chunk {4} inline.310ccba0fff49a724c8f.bundle.js (inline) 0 bytes [entry] [rendered] 

 export const environment = { production: false }; 

 export const environment = { production: true }; 

 # Uses environments/environment.ts $ ng build # Also uses environments/environment.ts $ ng build --environment=dev # Uses environments/environment.prod.ts $ ng build --environment=prod 

 import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule); 

 $ ng eject 

 ========================================================================================== Ejection was successful. To run your builds, you now need to do the following commands: - "npm run build" to build. - "npm run test" to run unit tests. - "npm start" to serve the app using webpack-dev-server. - "npm run e2e" to run protractor. Running the equivalent CLI commands will result in an error. ========================================================================================== Some packages were added. Please run "npm install".