I have developed an Angular application using tools such as NPM (I did not use the Angular CLI). What is the best way to migrate the project to the CLI project model? For example, I want to be able to use commands like ng serve.
-
You mean to say you developed Angular Application without Angular CLI !!!Adrita Sharma– Adrita Sharma2019-08-19 12:28:01 +00:00Commented Aug 19, 2019 at 12:28
-
Can you please explain in detail what do you mean developed using npm and what do you want to do in Angular CLI.Cpt Kitkat– Cpt Kitkat2019-08-19 12:28:07 +00:00Commented Aug 19, 2019 at 12:28
-
@AdritaSharma i developed angular application without Angular CLI. now i am using "npm start" to run application. i want to convert it to Angular CLI so that i can use "ng serve"Harsha Bhat– Harsha Bhat2019-08-19 12:31:08 +00:00Commented Aug 19, 2019 at 12:31
-
I think you are using angular.js. right? angular cli is for angular 2+Libin C Jacob– Libin C Jacob2019-08-19 12:36:33 +00:00Commented Aug 19, 2019 at 12:36
-
1@LibinCJacob No not angular.js. It is Angular 2+ only but I developed without CLI. now i want to convert project into CLIHarsha Bhat– Harsha Bhat2019-08-19 12:42:44 +00:00Commented Aug 19, 2019 at 12:42
|
Show 2 more comments
1 Answer
To convert an Angular project to use the Angular CLI, you could follow these steps.
1. Install the CLI
npm install -g @angular/cli
2. Create a new CLI Project
ng new my-first-project
cd my-first-project
ng serve
3. Copy your existing code files into the new CLI Project
4. Configure your Angular Workspace
Differences between Angular CLI and Other Build Systems
Notes from Migrating a project to Angular CLI build system
- Angular CLI may use multiple
tsconfig.jsonfiles (be sure to setup dependencies between files correctly) ng serveandng testcompile your typescript into memory rather than physical files.- If
ng testdoesn't work and gives cryptic errors look into thepollyfills.tsfile and start uncommenting lines. - Consider locking
package.jsonversions with exact version numbers, shrinkwrap, lockfile, or yarn. There is no joy in debugging@types, tsc versions and incompatible modules. - Building with
ng build --prod(which uses AOT compilation) is a lot more strict than the default typescript rules withng serve. - Using sass for css:
- When creating new project:
ng new my-first-app --style=scss - Or modify
angular.json:
- When creating new project:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}