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

JayDeeEss · Accepted Answer · 2017-09-12 17:41:20Z

2

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';

answered Sep 12, 2017 at 17:41

JayDeeEss

1,0839 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C J Over a year ago

In my ClientApp\App Folder I only have app.module.browser.ts,app.module.server.ts,app.module.shared.ts and Under ClientApp Folder boot.browser.ts,boot.server.ts but as you mentioned I didn't find app.module.client.ts,boot-client.ts

JayDeeEss Over a year ago

oh then the one app.module.browser.ts is your client one. make the same changes to that one

Lakshaman Rokade · Accepted Answer · 2019-07-31 10:55:08Z

0

Open your project file in notepad.
find the tag name which stated with SpaRoot
And Replace your angular project folder name here.

answered Jul 31, 2019 at 10:55

Lakshaman Rokade

11 bronze badge

Collectives™ on Stack Overflow

Creating component using Angular cli in VS 2017 Angular Template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related