如何将不是使用 Angular CLI 创建的 Angular 应用程序迁移到 Angular CLI 项目? [英] How to migrate an Angular Application that was not created with the Angular CLI to an Angular CLI project?

问题描述

我使用诸如 NPM 之类的工具开发了一个 Angular 应用程序(我没有使用 Angular CLI).将项目迁移到 CLI 项目模型的最佳方法是什么?例如，我希望能够使用像 ng serve 这样的命令.

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.

推荐答案

转换 Angular 项目以使用 Angular CLI，您可以按照以下步骤操作.

To convert an Angular project to use the Angular CLI, you could follow these steps.

npm install -g @angular/cli

2.创建一个新的 CLI 项目

ng new my-first-project
cd my-first-project
ng serve

3.将您现有的代码文件复制到新的 CLI 项目中

4.配置您的 Angular 工作区

Angular CLI 与其他构建系统的区别

来自 将项目迁移到 Angular CLI 构建系统的说明

• Angular CLI 可能会使用多个 tsconfig.json 文件(确保正确设置文件之间的依赖关系)
• ng serve 和 ng test 将您的打字稿编译到内存而不是物理文件中.
• 如果 ng test 不起作用并给出神秘错误，请查看 pollyfills.ts 文件并开始取消注释行.
• 考虑使用确切的版本号、shrinkwrap、lockfile 或 yarn 锁定 package.json 版本.调试 @types、tsc 版本和不兼容的模块没有乐趣.
• 使用 ng build --prod(使用 AOT 编译)构建比使用 ng serve 的默认打字稿规则严格得多.
• 在 css 中使用 sass:

• Angular CLI may use multiple tsconfig.json files (be sure to setup dependencies between files correctly)
• ng serve and ng test compile your typescript into memory rather than physical files.
• If ng test doesn't work and gives cryptic errors look into the pollyfills.ts file and start uncommenting lines.
• Consider locking package.json versions 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 with ng serve.
• Using sass for css:

1. 新建项目时:ng new my-first-app --style=scss
2. 或者修改angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}

这篇关于如何将不是使用 Angular CLI 创建的 Angular 应用程序迁移到 Angular CLI 项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！