CODEWITHSUNDEEP
javascriptangularasp.net-coresingle-page-applicationangular-cli
Blake Rivell
Blake Rivell

Reputation: 13875

Using Angular CLI with the latest AspNetCore Angular 4 Spa template

I am attempting to use Angular CLI with the latest JavaScriptServices AspNetCore Angular Spa template.

I used to simply just copy and pase a .angular-cli.json file in the root directory of my project and change "root": to "ClientApp" and would be good to go.

However, now with this new version of the template when I run 'ng g component mycomponent' it fails because it can't find app.module.ts. The reason for this is because in this new template they split app.module.ts into 3:

app.module.client.ts, app.module.server.ts, app.module.shared.ts

Any ideas on how to still make this work?

Upvotes: 2

Views: 833

Answers (1)

Sentient Entities
Sentient Entities

Reputation: 341

[SOLUTION]

  1. Rename app.module.client.ts to app.client.module.ts

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

    For example: [...sharedConfig.declarations, <MyComponent>]

  3. Open boot-client.ts: update your import to use the new app.client.module reference.

    For example: import { AppModule } from './app/app.client.module';

  4. Now try to generate the new component: ng g component my-component

[EXPLANATION]

Angular CLI looks for a file named app.module.ts in your project, and tries to find a references for the declarations property to import the component. This should be an array (as the sharedConfig.declarations is), but the changes do not get applied

[SOURCES]

Upvotes: 2

Related Questions