Handy tips working with Angular CLI
The idea of convention over configuration is no news in the web community. Frameworks such as Rails has provided developers with quick scaffolding capabilities to bootstrap a project with folder structures created according to convention.
Now with Angular CLI, I can quickly start a project without worrying much about configuration! That makes me a much happier developer :)
The official documentation was pretty straightforward. But while I was trying it out, I felt that I would benefit from a few tips here and there. So, I’m sharing them here!
At the time of writing, I was using v1.2.4.
TIPS
#1 Add a separate routing module at the time of creation.
> ng new my-app --routinginstalling ng
create .editorconfig
create README.md
create src/app/app-routing.module.ts
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tsconfig.json
create tslint.json
There is an additional file, src/app/app-routing.module.ts that was created by passing the --routing flag.
#2 Create a module with a separate routing module
> ng g module new-module --routinginstalling module
create src/app/new-module/new-module-routing.module.ts
create src/app/new-module/new-module.module.ts
WARNING Module is generated but not provided, it must be provided to be used
I think what’s happening here in the warning is that the new module that was created is not added in the imports list in app.module.ts. This has to be done manually, unfortunately at this time of writing.
#3 Creating a component within a module
> ng g component new-module/new-componentinstalling component
create src/app/new-module/new-component/new-component.component.css
create src/app/new-module/new-component/new-component.component.html
create src/app/new-module/new-component/new-component.component.spec.ts
create src/app/new-module/new-component/new-component.component.ts
update src/app/new-module/new-module.module.ts
Adding the module directory before new-component puts the generated files inside of the new-module folder, as well as adding NewComponentComponent inside of the module declarations.
#4 Turn on
--specflag when generating a class, to create a spec file
> ng g class my-class --specinstalling class
create src/app/my-class.spec.ts
create src/app/my-class.ts
If --spec flag is not present, only my-class.ts file would be generated.
#5 Turn on
-oflag & specify a port--port
> ng serve -o --port <port-number>This will open the web app in the browser automatically through the specified port. This could be handle especially when you have multiple apps running at the same time.
#6 Useful aliases
> ng g m <new-module> // short for ng g module <new-module>
> ng g c <new-component> // short for ng g component <new-component>
> ng g s <new-service> // short for ng g service <new-service>
> ng g d <new-directive> // short for ng g directive <new-directive>#7 Turn on
--dry-runflag to see which files will be generated without actually generating them.
> ng g c my-module/my-component --dry-runinstalling component
You specified the dry-run flag, so no changes will be written.
create src/app/my-module/my-component/my-component.component.css
create src/app/my-module/my-component/my-component.component.html
create src/app/my-module/my-component/my-component.component.spec.ts
create src/app/my-module/my-component/my-component.component.ts
update src/app/app.module.ts
That’s it! Hope it helps!
