Creating component using Angular cli in VS 2017 Angular Template

Question

I have installed below software in my System

• VS 2017- Version 15.3.3
• Node Version - 6.11.3
• Angular cli Version - 1.4.1

I want to create component using angular cli inside angular template in VS 2017

Below are the step I am doing but fail to achive the results

• Step 1) Create a Project with Angular Template in VS2017
• Step 2)Open Cmd - Create a dummy ng project for .angular-cli.json file outside the solution
• Step 3)Copy Pasting .angular-cli.json file to my solution under below folder structure [M:\VS2017 Projects\Trail109\Trail109]
• Step 4)Changing from "root": "Src" to "root": "ClientApp"
• Step 5)then going inside the solution using cd command in cmd
• Step 6)and installing angular/cli for my solution using given command npm install @angular/cli@latest --save-dev [M:\VS2017 Projects\Trail109\Trail109>npm install @angular/cli@latest --save-dev]
• Step 7)after this going to components folders inside ClientApp using cd command in cmd

• Step 8)and using the given command ng g component myformname [M:\VS2017 Projects\Trail109\Trail109\ClientApp\app\components>ng g component myformname] but the above line gives me below given error

  Error: Path "ClientApp/" is invalid. Path "ClientApp/" is invalid.

Please help What is that I am missing....

Answer 1

VS 2017 angular template has pre rendering enabled by default. If you haven't disabled that, please make sure after changing root to Client app

• Amend the .angular.cli : change as follows

  "root": "ClientApp",

  "outDir": "ClientApp/dist",

• Amend the ClientApp folder as follows

Rename app.module.client.ts to app.client.module.ts Open app.client.module.ts: prepend the declaration with 3 dots “...” and wrap the declaration in brackets.

For example: [...sharedConfig.declarations, ]

Open boot-client.ts: update your import to use the new app.client.module reference. For example: import { AppModule } from './app/app.client.module';