gulp with angular-devkit/build-angular

README-angular-upgrade-basic.md

@@ -0,0 +1,200 @@
+## Guideline:
+
+**Environment:** <br>
+    Node Verison: 16.15.0 <br>
+    npm Version: 8.5.5 <br>
+    Angular Version: 14.3.0 <br>
+    Angular JS Project: https://github.com/angular/angular-phonecat/tree/master ,
+	Last commit: [Click here](https://github.com/angular/angular-phonecat/commit/ef6f6eb672ded472b4e442d598f5df40d0e0642c) <br>
+
+**Base Guideline:** <br>
+      Link: https://angular.io/guide/upgrade#phonecat-upgrade-tutorial 
+
+**Instructions:**
+<ol>
+  <li>Use the package.json, tsconfig.json, systemjs.config.js from the bottom of this doc and put them in the root folder of the project.</li>
+  <li>At first, only work on the app module, main.ts, and hybrid bootstrapping (they reside between the beginning and the “Bootstrapping a hybrid PhoneCat” section). This is to test if the skeleton is working.</li>
+  <li>For the dependency injection, use @Inject(type) before declaring them in the constructor. For example, 
+"constructor(@Inject(HttpClient) private http: HttpClient) { }" </li>
+  <li>Wherever a parameter is extracted from the URL, perform it like this: "routeParams[“phoneId”]instead of routeParams.phoneId" </li>
+  <li>In the “Upgrading the Phone service” section, after upgrading the service, don’t modify the components like the angular docs. It will produce errors. Only modify the subscribe part to process observables.</li>
+  <li>For others, follow the base guideline accurately.</li>
+</ol>
+
+
+**Example Project:** <br>
+    Link: https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/angular14-upgrade <br>
+    Webpack+Angular CLI integration (working npm start & npm build commands): <br>
+    https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/gulp-to-webpack <br>
+
+**Files:**<br>
+```
+package.json:
+
+{
+  "name": "angular-phonecat",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "A tutorial application for AngularJS",
+  "repository": "https://github.com/angular/angular-phonecat",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/angular": "^1.8.9",
+    "@types/angular-animate": "^1.5.14",
+    "@types/angular-aria": "^1.7.5",
+    "@types/angular-cookies": "^1.8.4",
+    "@types/angular-mocks": "^1.7.4",
+    "@types/angular-resource": "^1.5.20",
+    "@types/angular-route": "^1.7.6",
+    "@types/angular-sanitize": "^1.8.4",
+    "@types/jasmine": "^5.1.4",
+    "bower": "^1.7.7",
+    "http-server": "^0.9.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-jasmine": "^0.3.8",
+    "protractor": "^4.0.9",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "prestart": "npm install",
+    "pretest": "npm install",
+    "preprotractor": "npm run update-webdriver",
+    "preupdate-webdriver": "npm install",
+    "protractor": "protractor e2e-tests/protractor.conf.js",
+    "start": "http-server ./ -a localhost -p 8000 -c-1",
+    "test": "karma start karma.conf.js",
+    "test-single-run": "karma start karma.conf.js --single-run",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "update-webdriver": "webdriver-manager update",
+    "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
+  },
+  "dependencies": {
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
+    "@angular/upgrade": "^14.3.0",
+    "rxjs": "^7.8.1",
+    "systemjs": "0.21.6",
+    "systemjs-plugin-babel": "^0.0.25",
+    "zone.js": "^0.12.0"
+  }
+}
+
+tsconfig.json:
+
+/* To learn more about this file see: https://angular.io/guide/typescript-configuration. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "baseUrl": "./",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2015",
+    "module": "ES2015",
+    "useDefineForClassFields": false,
+    "lib": ["ES2015", "dom"],
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "angularCompilerOptions": {
+    "disableTypeScriptVersionCheck": true,
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
+
+systemjs.config.js:
+
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      'npm:': '/node_modules/',
+    },
+    map: {
+      'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+      'ng-loader': './systemjs-angular-loader.js',
+      app: '/app',
+      '@angular/core': 'npm:@angular/core/fesm2015/core.mjs',
+      '@angular/common': 'npm:@angular/common/fesm2015/common.mjs',
+      '@angular/common/http': 'npm:@angular/common/fesm2015/http.mjs',
+      '@angular/compiler': 'npm:@angular/compiler/fesm2015/compiler.mjs',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2015/platform-browser.mjs',
+      '@angular/platform-browser-dynamic':
+        'npm:@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs',
+      '@angular/router': 'npm:@angular/router/fesm2015/router.mjs',
+      '@angular/router/upgrade': 'npm:@angular/router/fesm2015/upgrade.mjs',
+      '@angular/forms': 'npm:@angular/forms/fesm2015/forms.mjs',
+      '@angular/upgrade': 'npm:@angular/upgrade/fesm2015/upgrade.mjs',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/fesm2015/static.mjs',
+
+      rxjs: 'npm:rxjs/dist/cjs',
+      'rxjs/operators': 'npm:rxjs/dist/cjs/operators',
+      tslib: 'npm:tslib/tslib.js',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
+
+      'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
+    },
+
+    transpiler: 'plugin-babel',
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        // defaultExtension: 'js',
+        // meta: {
+        //   './*.js': {
+        //     loader: 'ng-loader',
+        //   },
+        // },
+      },
+      'angular-in-memory-web-api': {
+        main: './index.js',
+        defaultExtension: 'js',
+      },
+      rxjs: {
+        defaultExtension: 'js',
+        format: 'cjs',
+        main: 'index.js',
+      },
+      'rxjs/operators': {
+        defaultExtension: 'js',
+        format: 'cjs',
+        main: 'index.js',
+      },
+      meta: {
+        '*.mjs': {
+          babelOptions: {
+            es2015: false,
+          },
+        },
+      },
+    },
+  });
+})(this);
+```

README.md

@@ -1,7 +1,70 @@
-# Phone Catalog Tutorial Application
-- This application is an experimental version of the main app that incorporates the co-existence of Angular JS and Angular. <br>
-- In the [angular14-upgrade](https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/angular14-upgrade) branch, we integrated angular service, components, etc. into the project following [this](https://angular.io/guide/upgrade#phonecat-upgrade-tutorial) as the base guideline. <br>
-- In the [gulp-to-webpack](https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/gulp-to-webpack) project, we integrated gulp into the project at first. After that, we performed the necessary transformations to incorporate raw Webpack and Angular CLI to build the whole project. In the meantime, we upgraded to Angular 17 as well. This branch is now merged into the master branch.
+# Instruction Guideline
 
-Check the pull requests and the commits to understand the workflow better.<br>
-Check the package.json for the build-related commands.
+**Environment:** <br>
+    Node Verison: 20.9.0 <br>
+    npm Version: 10.2.3 <br>
+    Angular Version: 17.0.1 <br>
+    Angular JS Version: 1.8.3 <br>
+
+**Example Repository:** <br>
+      Webpack+Angular Devkit Build:
+	https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/master <br>
+      Gulp to Webpack Journey:
+	https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/gulp-to-webpack <br>
+      Gulp+Angular Devkit Build: 
+https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/gulp-with-angular-devkit <br>
+      Hybrid Unit Testing:
+https://github.com/risal-shefin/angularJS-phonecat-to-angular/tree/hybrid-unit-testing-attempt <br>
+
+**Note: You can watch the PRs (both open & closed) as well for better understanding**
+
+**Instructions:**
+<ol>
+  <li> First, follow "README-angular-upgrade-basic.md" to learn how to transform an angular js app into an angular js + angular hybrid app. </li>
+  <li> To incorporate build tools, move the index.html to the app directory and remove all the scrips and styles references. The build tools will take care of scripts, style bundling & referencing. </li>
+  <li>For a hybrid app, the primary mechanism is the following:
+      <ul> 
+        <li>We will bundle the angular JS files using Webpack or Gulp and store the bundled files in a directory.</li>
+        <li>After that, we will include the bundled files in angular.json’s “scripts”, “assets”, or “styles” section where applicable.</li>
+        <li>As a result, “ng build”, “ng serve”, etc. commands will include the angular js build files as well.</li>
+        <li>For the “ng test” command to work for both angular js and angular tests, we need to use a custom karma config file and include the bundled angular js file in the karma config.</li>
+      </ul>
+  </li>
+  <li>Try to put the angular js section and angular section in separate directories. It will be easier to maintain them.</li>
+  <li>To unit test hybrid (angular + angular js) sections, we need to mock the necessary parts. For example: if there is an angular js component using angular service, while testing the angular js component, we need to mock the service in our angular js unit test.
+  <ul>
+    <li>In js, for injecting mock providers, inject it inside beforeEach() like this: <br>
+
+      angular.mock.module(function($provide) {
+        $provide.value("phone", mockPhoneService);
+      })
+
+  </li>
+    <li>If you get “Error: Injector already created, can not register a module!", create an empty object to mock the service at first and inject it into the provider. Implement the mock service later because we shouldn't inject anything before injecting this mock service in the mock module.
+    </li>
+  </ul>
+  </li>
+  <li> 
+    For testing the directives that extend UpgradeComponent, we can only test component creation using it. 
+    <ul>
+      <li>
+        To bootstrap the angular js, use `TestBed.inject(UpgradeModule).bootstrap(document.documentElement, ['phonecatApp'])`
+      </li>
+      <li>
+        If you get this error: “NullInjectorError: No provider for $scope!”, use “{provide: '$scope', useExisting: '$rootScope'}” under “providers” in TestBed.configureTestingModule({})
+      </li>
+    </ul> 
+  </li>
+  <li>If you get errors like this: “Expected to be running in 'ProxyZone'...”, kindly upgrade to Angular v17 and zone.js v0.14.</li>
+  <li>If you get any unexpected errors using templateUrl or $templateRequest, use “<ng-include src=”your_url”></ng-include>”. See this error for example: https://github.com/risal-shefin/angularJS-phonecat-to-angular/pull/8 </li>
+<li>If you are injecting HTML into $templateCache using gulp, don’t forget to check if your template URL matches with one in the generated script. Leading “/” matters.</li>
+<li>If you get “ReferenceError: primordials is not defined”, pin your version of the graceful-fs package to 4.2.11 by adding this in package.json:
+
+	"overrides": {
+      "graceful-fs": "^4.2.11"
+ 	}
+  </li>
+
+</ol>
+
+**Note: If you use webpack instead of gulp, update karma.conf.js, package.json, and angular.json accordingly if needed.**

angular.json

@@ -22,13 +22,7 @@
               "tsConfig": "tsconfig.app.json",
               "assets": [
                 "app/img",
-                "app/phones",
-                {
-                  "input": "app",
-                  "glob": "**/*.html",
-                  "ignore": ["angular-area/**/*.html"],
-                  "output": "./"
-                }
+                "app/phones"
               ],
               "styles": [
                 "node_modules/bootstrap/dist/css/bootstrap.min.css",
@@ -37,7 +31,7 @@
               ],
               "scripts": [
                 "node_modules/jquery/dist/jquery.js",
-                "build-webpack-ngJs/ngJsScripts.bundle.min.js"
+                "build-ngJs/ngJsScripts.bundle.min.js"
               ]
             },
             "configurations": {
@@ -93,16 +87,10 @@
                 "zone.js/testing"
               ],
               "tsConfig": "tsconfig.spec.json",
-              "karmaConfig": "karma.conf.cjs",
+              "karmaConfig": "karma.conf.js",
               "assets": [
                 "app/img",
-                "app/phones",
-                {
-                  "input": "app",
-                  "glob": "**/*.html",
-                  "ignore": ["angular-area/**/*.html"],
-                  "output": "./"
-                }
+                "app/phones"
               ],
               "styles": [
                 "node_modules/bootstrap/dist/css/bootstrap.min.css",

app/app.module.ajs.js

@@ -5,4 +5,5 @@ angular.module('phonecatApp', [
     'core',
     'phoneDetail',
     'phoneList',
+    'templates',
 ]);

dist/angularjs-phonecat-to-angular/index.html

@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8">
     <title>Google Phone Gallery</title>
-  <style>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}}*{box-sizing:border-box}:after,:before{box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}.view-container{position:relative}.view-frame{margin-top:20px}body{padding:20px}</style><link rel="stylesheet" href="styles.606d652f9330036d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.606d652f9330036d.css"></noscript></head>
+  <style>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}}*{box-sizing:border-box}:after,:before{box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}.view-container{position:relative}.view-frame{margin-top:20px}body{padding:20px}</style><link rel="stylesheet" href="styles.bf6506898be30de3.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.bf6506898be30de3.css"></noscript></head>
   <body>
 
     <div class="view-container">
       <div ng-view class="view-frame"></div>
     </div>
 
-  <script src="runtime.9c04bd24e47ac341.js" type="module"></script><script src="polyfills.f5e663f919440dc5.js" type="module"></script><script src="scripts.2db18f04beaedee2.js" defer></script><script src="main.71a8ff9d0f7a71d5.js" type="module"></script></body>
+  <script src="runtime.9c04bd24e47ac341.js" type="module"></script><script src="polyfills.f5e663f919440dc5.js" type="module"></script><script src="scripts.635db71bca332506.js" defer></script><script src="main.febdc806a5fecb82.js" type="module"></script></body>
 </html>