miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(web): update AngularJS migration doc (#8620)

Browse Source
This commit is contained in:
Philip Fulcher 2022-01-20 09:59:12 -07:00 committed by GitHub
parent 4e11378954
commit 7b10c82cfe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
docs/shared/migration/migration-angularjs.md
View File

@ -21,10 +21,10 @@ There is also a [repo](https://github.com/nrwl/nx-migrate-angularjs-example) tha
To start migrating the Real World app, create an Nx workspace: To start migrating the Real World app, create an Nx workspace:
```bash ```bash
npx create-nx-workspace@latest nx-migrate-angularjs --cli=angular npx create-nx-workspace@latest nx-migrate-angularjs
``` ```
When prompted choose the `empty` preset. The other presets use certain recommended defaults for the workspace configuration. Because you have existing code with specific requirements for configuration, starting with a blank workspace avoids resetting these defaults. This will give you the ability to customize the workspace for the incoming code. When prompted choose the `apps` preset. The other presets use certain recommended defaults for the workspace configuration. Because you have existing code with specific requirements for configuration, starting with a blank workspace avoids resetting these defaults. This will give you the ability to customize the workspace for the incoming code.
At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or not. By using Nx Cloud, you’ll be able to share the computation cache of operations like build, test or even your own commands with everyone working on the same project. Whether you choose to use it or not, the outcome of the migration won’t be affected and you can always change your choice later. At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or not. By using Nx Cloud, you’ll be able to share the computation cache of operations like build, test or even your own commands with everyone working on the same project. Whether you choose to use it or not, the outcome of the migration won’t be affected and you can always change your choice later.
@ -35,10 +35,10 @@ At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or
## Creating your app ## Creating your app
Your new workspace won’t have much in it because of the `empty` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace: Your new workspace won’t have much in it because of the `apps` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace:
```bash ```bash
ng add @nrwl/angular --unitTestRunner=karma --e2eTestRunner=protractor npm install -D @nrwl/angular
``` ```
For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS. For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS.
@ -48,7 +48,7 @@ For this example, we will use Karma and Protractor, the most common unit test ru
With the Angular capability added, generate your application: With the Angular capability added, generate your application:
```bash ```bash
ng generate @nrwl/angular:application --name=realworld nx generate @nrwl/angular:application --name=realworld --unitTestRunner=karma --e2eTestRunner=protractor
``` ```
Accept the default options for each prompt: Accept the default options for each prompt:
@ -72,74 +72,49 @@ Your `package.json` should now look like this:
"version": "0.0.0", "version": "0.0.0",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"ng": "nx", "postinstall": "ngcc --properties es2015 browser module main",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main", "start": "nx serve",
"nx": "nx", "build": "nx build",
"start": "ng serve", "test": "nx test",
"build": "ng build", "e2e": "nx e2e"
"test": "ng test",
"lint": "nx workspace-lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-generator": "nx workspace-generator",
"dep-graph": "nx dep-graph",
"help": "nx help"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^11.2.0", "@angular/animations": "~13.1.0",
"@angular/common": "^11.2.0", "@angular/common": "~13.1.0",
"@angular/compiler": "^11.2.0", "@angular/compiler": "~13.1.0",
"@angular/core": "^11.2.0", "@angular/core": "~13.1.0",
"@angular/forms": "^11.2.0", "@angular/forms": "~13.1.0",
"@angular/platform-browser": "^11.2.0", "@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "^11.2.0", "@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "^11.2.0", "@angular/router": "~13.1.0",
"@nrwl/angular": "^11.5.1",
"angular": "^1.5.0-rc.2", "angular": "^1.5.0-rc.2",
"angular-ui-router": "^0.4.2", "angular-ui-router": "^0.4.2",
"marked": "^0.3.5", "marked": "^0.3.5",
"rxjs": "~6.6.3", "rxjs": "~7.4.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "^0.10.2" "zone.js": "~0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.1102.0", "@angular-devkit/build-angular": "~13.1.0",
"@angular-eslint/eslint-plugin": "~1.0.0", "@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~1.0.0", "@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~1.0.0", "@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "~11.0.0", "@angular/cli": "~13.1.0",
"@angular/compiler-cli": "^11.2.0", "@angular/compiler-cli": "~13.1.0",
"@angular/language-service": "^11.2.0", "@angular/language-service": "~13.1.0",
"@nrwl/cli": "11.5.1", "@nrwl/angular": "^13.4.6",
"@nrwl/eslint-plugin-nx": "11.5.1", "@nrwl/cli": "13.4.6",
"@nrwl/linter": "11.5.1", "@nrwl/eslint-plugin-nx": "13.4.6",
"@nrwl/nx-cloud": "latest", "@nrwl/linter": "13.4.6",
"@nrwl/tao": "11.5.1", "@nrwl/tao": "13.4.6",
"@nrwl/workspace": "11.5.1", "@nrwl/workspace": "13.4.6",
"@types/jasmine": "~3.5.0", "@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "12.12.38", "@types/node": "14.14.33",
"@typescript-eslint/eslint-plugin": "4.3.0", "@typescript-eslint/eslint-plugin": "~5.3.0",
"@typescript-eslint/parser": "4.3.0", "@typescript-eslint/parser": "~5.3.0",
"babel-preset-es2015": "^6.3.13", "eslint": "8.2.0",
"babelify": "^7.2.0",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"browserify-ngannotate": "^2.0.0",
"dotenv": "6.2.0",
"eslint": "7.32.0",
"eslint-config-prettier": "8.1.0", "eslint-config-prettier": "8.1.0",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-angular-templatecache": "^1.8.0", "gulp-angular-templatecache": "^1.8.0",
@ -154,11 +129,13 @@ Your `package.json` should now look like this:
"karma-coverage-istanbul-reporter": "~3.0.2", "karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0", "karma-jasmine-html-reporter": "^1.5.0",
"karma-webpack": "^5.0.0",
"marked": "^0.3.5",
"merge-stream": "^1.0.0", "merge-stream": "^1.0.0",
"prettier": "2.2.1", "prettier": "^2.3.1",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"ts-node": "~9.1.1", "ts-node": "~9.1.1",
"typescript": "~4.0.3", "typescript": "~4.4.3",
"vinyl-source-stream": "^1.1.0" "vinyl-source-stream": "^1.1.0"
} }
} }
@ -324,7 +301,7 @@ gulp.task('default', ['html', 'browserify'], function () {
}); });
``` ```
You need to point your `build` and `serve` tasks at this gulp build process. Typically, an Angular app is built using the Angular CLI, but the Angular CLI doesn’t know how to build AngularJS projects. All of your tasks are configured in the `angular.json` file. Find the `build` and `serve` tasks and replace them with this code block: You need to point your `build` and `serve` tasks at this gulp build process. Typically, an Angular app is built using the Angular CLI, but the Angular CLI doesn’t know how to build AngularJS projects. All of your tasks are configured in the project configuration file `apps/realworld/project.json`. Find the `build` and `serve` tasks and replace them with this code block:
```json ```json
... ...
@ -354,7 +331,7 @@ You need to point your `build` and `serve` tasks at this gulp build process. Typ
This sets up the `build` and `serve` commands to use the locally installed version of gulp to run `build` and `serve`. To see the RealWorld app working, run: This sets up the `build` and `serve` commands to use the locally installed version of gulp to run `build` and `serve`. To see the RealWorld app working, run:
```bash ```bash
ng serve realworld nx serve realworld
``` ```
Navigate around the application and see that things work. Navigate around the application and see that things work.
@ -406,7 +383,7 @@ module.exports = (config, context) => {
> This webpack configuration is deliberately simplified for this tutorial. A real production-ready webpack config for your project will be much more involved. See [this project](https://github.com/preboot/angularjs-webpack) for an example. > This webpack configuration is deliberately simplified for this tutorial. A real production-ready webpack config for your project will be much more involved. See [this project](https://github.com/preboot/angularjs-webpack) for an example.
To use webpack instead of gulp, go back to your `angular.json` file and modify the `build` and `serve` commands again: To use webpack instead of gulp, go back to your `apps/realworld/project.json` file and modify the `build` and `serve` commands again:
```json ```json
... ...
@ -561,7 +538,7 @@ angular.bootstrap(document, ['app'], {
Run the application the same way as before: Run the application the same way as before:
```bash ```bash
ng serve realworld nx serve realworld
``` ```
## Unit testing ## Unit testing
@ -679,7 +656,7 @@ This unit test does a check to make sure the component compiles and that it sets
To run the unit tests: To run the unit tests:
```bash ```bash
ng test nx test
``` ```
You should see green text as your test passes. You should see green text as your test passes.
@ -739,10 +716,30 @@ export class AppPage {
} }
``` ```
You also need to modify the project configuration of the `realworld-e2e` app at `apps/realworld-e2e/project.json`. This will point your e2e process at the `development` configuration of the `realworld` app by default.
```json
{
...
"e2e": {
"executor": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "apps/realworld-e2e/protractor.conf.js",
"devServerTarget": "realworld:serve"
},
"configurations": {
"production": {
"devServerTarget": "realworld:serve:production"
}
}
},
}
```
To run e2e tests, use the `e2e` command: To run e2e tests, use the `e2e` command:
```bash ```bash
ng e2e nx e2e realworld-e2e
``` ```
You should see a browser pop up to run the Protractor tests and then green success text in your console. You should see a browser pop up to run the Protractor tests and then green success text in your console.

117
nx-dev/nx-dev/public/documentation/shared/migration/migration-angularjs.md
View File

@ -21,10 +21,10 @@ There is also a [repo](https://github.com/nrwl/nx-migrate-angularjs-example) tha
To start migrating the Real World app, create an Nx workspace: To start migrating the Real World app, create an Nx workspace:
```bash ```bash
npx create-nx-workspace@latest nx-migrate-angularjs --cli=angular npx create-nx-workspace@latest nx-migrate-angularjs
``` ```
When prompted choose the `empty` preset. The other presets use certain recommended defaults for the workspace configuration. Because you have existing code with specific requirements for configuration, starting with a blank workspace avoids resetting these defaults. This will give you the ability to customize the workspace for the incoming code. When prompted choose the `apps` preset. The other presets use certain recommended defaults for the workspace configuration. Because you have existing code with specific requirements for configuration, starting with a blank workspace avoids resetting these defaults. This will give you the ability to customize the workspace for the incoming code.
At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or not. By using Nx Cloud, you’ll be able to share the computation cache of operations like build, test or even your own commands with everyone working on the same project. Whether you choose to use it or not, the outcome of the migration won’t be affected and you can always change your choice later. At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or not. By using Nx Cloud, you’ll be able to share the computation cache of operations like build, test or even your own commands with everyone working on the same project. Whether you choose to use it or not, the outcome of the migration won’t be affected and you can always change your choice later.
@ -35,10 +35,10 @@ At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or
## Creating your app ## Creating your app
Your new workspace won’t have much in it because of the `empty` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace: Your new workspace won’t have much in it because of the `apps` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace:
```bash ```bash
ng add @nrwl/angular --unitTestRunner=karma --e2eTestRunner=protractor npm install -D @nrwl/angular
``` ```
For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS. For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS.
@ -48,7 +48,7 @@ For this example, we will use Karma and Protractor, the most common unit test ru
With the Angular capability added, generate your application: With the Angular capability added, generate your application:
```bash ```bash
ng generate @nrwl/angular:application --name=realworld nx generate @nrwl/angular:application --name=realworld --unitTestRunner=karma --e2eTestRunner=protractor
``` ```
Accept the default options for each prompt: Accept the default options for each prompt:
@ -72,74 +72,49 @@ Your `package.json` should now look like this:
"version": "0.0.0", "version": "0.0.0",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"ng": "nx", "postinstall": "ngcc --properties es2015 browser module main",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main", "start": "nx serve",
"nx": "nx", "build": "nx build",
"start": "ng serve", "test": "nx test",
"build": "ng build", "e2e": "nx e2e"
"test": "ng test",
"lint": "nx workspace-lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-generator": "nx workspace-generator",
"dep-graph": "nx dep-graph",
"help": "nx help"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^11.2.0", "@angular/animations": "~13.1.0",
"@angular/common": "^11.2.0", "@angular/common": "~13.1.0",
"@angular/compiler": "^11.2.0", "@angular/compiler": "~13.1.0",
"@angular/core": "^11.2.0", "@angular/core": "~13.1.0",
"@angular/forms": "^11.2.0", "@angular/forms": "~13.1.0",
"@angular/platform-browser": "^11.2.0", "@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "^11.2.0", "@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "^11.2.0", "@angular/router": "~13.1.0",
"@nrwl/angular": "^11.5.1",
"angular": "^1.5.0-rc.2", "angular": "^1.5.0-rc.2",
"angular-ui-router": "^0.4.2", "angular-ui-router": "^0.4.2",
"marked": "^0.3.5", "marked": "^0.3.5",
"rxjs": "~6.6.3", "rxjs": "~7.4.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "^0.10.2" "zone.js": "~0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.1102.0", "@angular-devkit/build-angular": "~13.1.0",
"@angular-eslint/eslint-plugin": "~1.0.0", "@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~1.0.0", "@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~1.0.0", "@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "~11.0.0", "@angular/cli": "~13.1.0",
"@angular/compiler-cli": "^11.2.0", "@angular/compiler-cli": "~13.1.0",
"@angular/language-service": "^11.2.0", "@angular/language-service": "~13.1.0",
"@nrwl/cli": "11.5.1", "@nrwl/angular": "^13.4.6",
"@nrwl/eslint-plugin-nx": "11.5.1", "@nrwl/cli": "13.4.6",
"@nrwl/linter": "11.5.1", "@nrwl/eslint-plugin-nx": "13.4.6",
"@nrwl/nx-cloud": "latest", "@nrwl/linter": "13.4.6",
"@nrwl/tao": "11.5.1", "@nrwl/tao": "13.4.6",
"@nrwl/workspace": "11.5.1", "@nrwl/workspace": "13.4.6",
"@types/jasmine": "~3.5.0", "@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "12.12.38", "@types/node": "14.14.33",
"@typescript-eslint/eslint-plugin": "4.3.0", "@typescript-eslint/eslint-plugin": "~5.3.0",
"@typescript-eslint/parser": "4.3.0", "@typescript-eslint/parser": "~5.3.0",
"babel-preset-es2015": "^6.3.13", "eslint": "8.2.0",
"babelify": "^7.2.0",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"browserify-ngannotate": "^2.0.0",
"dotenv": "6.2.0",
"eslint": "7.32.0",
"eslint-config-prettier": "8.1.0", "eslint-config-prettier": "8.1.0",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-angular-templatecache": "^1.8.0", "gulp-angular-templatecache": "^1.8.0",
@ -154,11 +129,13 @@ Your `package.json` should now look like this:
"karma-coverage-istanbul-reporter": "~3.0.2", "karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0", "karma-jasmine-html-reporter": "^1.5.0",
"karma-webpack": "^5.0.0",
"marked": "^0.3.5",
"merge-stream": "^1.0.0", "merge-stream": "^1.0.0",
"prettier": "2.2.1", "prettier": "^2.3.1",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"ts-node": "~9.1.1", "ts-node": "~9.1.1",
"typescript": "~4.0.3", "typescript": "~4.4.3",
"vinyl-source-stream": "^1.1.0" "vinyl-source-stream": "^1.1.0"
} }
} }
@ -324,7 +301,7 @@ gulp.task('default', ['html', 'browserify'], function () {
}); });
``` ```
You need to point your `build` and `serve` tasks at this gulp build process. Typically, an Angular app is built using the Angular CLI, but the Angular CLI doesn’t know how to build AngularJS projects. All of your tasks are configured in the `angular.json` file. Find the `build` and `serve` tasks and replace them with this code block: You need to point your `build` and `serve` tasks at this gulp build process. Typically, an Angular app is built using the Angular CLI, but the Angular CLI doesn’t know how to build AngularJS projects. All of your tasks are configured in the project configuration file `apps/realworld/project.json`. Find the `build` and `serve` tasks and replace them with this code block:
```json ```json
... ...
@ -354,7 +331,7 @@ You need to point your `build` and `serve` tasks at this gulp build process. Typ
This sets up the `build` and `serve` commands to use the locally installed version of gulp to run `build` and `serve`. To see the RealWorld app working, run: This sets up the `build` and `serve` commands to use the locally installed version of gulp to run `build` and `serve`. To see the RealWorld app working, run:
```bash ```bash
ng serve realworld nx serve realworld
``` ```
Navigate around the application and see that things work. Navigate around the application and see that things work.
@ -406,7 +383,7 @@ module.exports = (config, context) => {
> This webpack configuration is deliberately simplified for this tutorial. A real production-ready webpack config for your project will be much more involved. See [this project](https://github.com/preboot/angularjs-webpack) for an example. > This webpack configuration is deliberately simplified for this tutorial. A real production-ready webpack config for your project will be much more involved. See [this project](https://github.com/preboot/angularjs-webpack) for an example.
To use webpack instead of gulp, go back to your `angular.json` file and modify the `build` and `serve` commands again: To use webpack instead of gulp, go back to your `apps/realworld/project.json` file and modify the `build` and `serve` commands again:
```json ```json
... ...
@ -561,7 +538,7 @@ angular.bootstrap(document, ['app'], {
Run the application the same way as before: Run the application the same way as before:
```bash ```bash
ng serve realworld nx serve realworld
``` ```
## Unit testing ## Unit testing
@ -679,7 +656,7 @@ This unit test does a check to make sure the component compiles and that it sets
To run the unit tests: To run the unit tests:
```bash ```bash
ng test nx test
``` ```
You should see green text as your test passes. You should see green text as your test passes.
@ -742,7 +719,7 @@ export class AppPage {
To run e2e tests, use the `e2e` command: To run e2e tests, use the `e2e` command:
```bash ```bash
ng e2e nx e2e realworld-e2e
``` ```
You should see a browser pop up to run the Protractor tests and then green success text in your console. You should see a browser pop up to run the Protractor tests and then green success text in your console.