🐛 Starting fresh with Angular-Cli angular 6 (28/05/2018)

[tatsujb]

Hey. I'm finally back on my project and have some time ahead of me. I want to give angular-parcel another go.

This time I'm starting from scratch to be sure things go your way.

So far things are looking a bit better but again not error free.

Here are my repro steps :

1. ng new web-ui --style=scss -sg -si -st
2. npm r typescript
3. npm i -g npm-check-updates
4. ncu -u
5. npm i
6. npm i -g parcel-bundler
7. npm i parcel-bundler parcel-plugin-angular@0.5.1-next.13 typescript@2.7.2
8. edit the package.json
9. edit tsconfig.json
10. edit index.html

edit the package.json at root to run with parcel instead :

{
  "name": "web-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "parcel ./src/index.html --no-cache",
    "build": "parcel build ./src/index.html -d /distribution --no-cache --no-minify",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.3",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "parcel-bundler": "^1.8.1",
    "parcel-plugin-angular": "0.5.1-next.13",
    "rxjs": "^6.0.0",
    "typescript": "^2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.5",
    "@angular/cli": "~6.0.5",
    "@angular/compiler-cli": "6.0.3",
    "@angular/language-service": "6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.1.3",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^1.1.0",
    "protractor": "~5.3.0",
    "ts-node": "~6.0.5",
    "tslint": "~5.10.0"
  }
}

edit tsconfig.json at root to contain needed globs :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "parcelAngularOptions": {
    "watch": "aot",
    "build": "aot"
  },
  "include": [
    "src/**/*.ts"
  ]
}

don't edit angular.json at root (no longer called angular-cli.json, as it used to be in release 5 of angular and it's cli) :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "web-ui": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/web-ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "web-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "web-ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "web-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "web-ui-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "web-ui:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "web-ui"
}

edit index.html at src/ :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WebUi</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="../node_modules/zone.js/dist/zone.js"></script>
  <script src="main.ts"></script>
</body>
</html>

and not edit tsconfig.app.json and tsconfig.spec.json at src/

I get the "Tour of Heroes" demo screen with no error in browser console. but a small error on compile in the compilation console :

‼  Cannot find module 'parcel-plugin-typescript/exports'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\parcel-plugin-angular\build\backend\worker\index.js:4:19)
    at Module._compile (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

So I'm going to progressively implement things from here and I'm hoping I can be provided aid on this issue as it might turn out fatal especially upon prob build.

But it's interesting that so far I've got something running and without polyfill.

I noted that using the current latest typescript (2.8.3) would crash the compile completely even though it's supposed to be warning level. this is why I went through extra trouble to get version 2.7.2 the highest available version before a crash.

so any ideas on the ‼ Cannot find module 'parcel-plugin-typescript/exports' ?

[tatsujb]

when i start to add back modules from my old project i get :

npm WARN parcel-plugin-angular@0.5.1-next.13 requires a peer of @angular/compiler@^5.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN parcel-plugin-angular@0.5.1-next.13 requires a peer of @angular/compiler-cli@^5.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN parcel-plugin-angular@0.5.1-next.13 requires a peer of parcel-plugin-typescript@^0.5.3 but none is installed. You must install peer dependencies yourself.
npm WARN parcel-plugin-angular@0.5.1-next.13 requires a peer of typescript@>=2.4.2 <2.6 but none is installed. You must install peer dependencies yourself.

[tatsujb]

https://github.com/tatsujb/parcel-angular6-scss/tree/templatedHTML

hey i've made a new repo and made you collab once again.