0

I'm following along with the ngUpgrade documentation (https://angular.io/guide/upgrade)

As things usually are the angular documentation appears to be outdated and/or just not that great.

I've followed along to the point of bootstrapping the application, amonst other thing i've had to update package.json and use the most recent versions of angular (10.0.11) as the suggested versions etc in the upgrade documentation don't build at all.

I've managed to get the app building and running but am coming across the following error:

I've spent a few days trying to understand where the error is coming from as i appear to have everything configured correctly(as far as i can tell).

Any help would be appreciated. Config files to follow

package.json

{
  "name": "angular-phonecat",
  "private": true,
  "version": "0.0.0",
  "description": "A tutorial application for AngularJS",
  "repository": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^10.0.11",
    "@angular/compiler": "^10.0.11",
    "@angular/core": "^10.0.11",
    "@angular/platform-browser": "~10.0.9",
    "@angular/platform-browser-dynamic": "~10.0.9",
    "@angular/upgrade": "^10.0.11",
    "angular": "1.8.x",
    "angular-animate": "1.8.x",
    "angular-resource": "1.8.x",
    "angular-route": "1.8.x",
    "bootstrap": "3.3.x",
    "jquery": "3.3.x",
    "rxjs": "~6.5.5",
    "systemjs": "^6.5.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@types/angular": "^1.7.2",
    "@types/angular-animate": "^1.5.10",
    "@types/angular-aria": "^1.7.1",
    "@types/angular-cookies": "^1.8.0",
    "@types/angular-mocks": "^1.7.0",
    "@types/angular-resource": "^1.5.15",
    "@types/angular-route": "^1.7.1",
    "@types/angular-sanitize": "^1.7.0",
    "@types/jasmine": "^3.5.12",
    "angular-mocks": "1.8.x",
    "cpx": "^1.5.0",
    "http-server": "^0.11.1",
    "jasmine-core": "^3.5.0",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-firefox-launcher": "^1.3.0",
    "karma-jasmine": "^1.1.2",
    "protractor": "^5.4.4",
    "tslib": "^2.0.1",
    "typescript": "^4.0.2"
  },
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "postinstall": "npm run copy-libs",
    "update-deps": "npm update",
    "postupdate-deps": "npm run copy-libs",
    "copy-libs": "cpx \"node_modules/{angular,angular-*,bootstrap/dist,jquery/dist}/**/*\" app/lib -C",
    "prestart": "npm install",
    "start-old": "http-server ./app -a localhost -p 8000 -c-1",
    "start": "http-server ./ -a localhost -p 8000 -c-1",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "npm test -- --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js"
  }
}

tsconfig.json

{
    "references": [],
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist",
        "baseUrl": "./",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "system",
        "lib": [
        "es2018",
        "dom"
        ]
    }
}

systemjs-importmap

{
        "imports": {
          "ng-loader": "../src/systemjs-angular-loader.js",
          "@angular/core": "/node_modules/@angular/core/bundles/core.umd.js",
          "@angular/common": "/node_modules/@angular/common/bundles/common.umd.js",
          "@angular/compiler": "/node_modules/@angular/compiler/bundles/compiler.umd.js",
          "@angular/platform-browser": "/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
          "@angular/platform-browser-dynamic": "/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
          "@angular/http": "/node_modules/@angular/http/bundles/http.umd.js",
          "@angular/router": "/node_modules/@angular/router/bundles/router.umd.js",
          "@angular/forms": "/node_modules/@angular/forms/bundles/forms.umd.js",
          "@angular/upgrade/static": "/node_modules/@angular/upgrade/bundles/upgrade-static.umd.js",
          "rxjs":                      "/node_modules/rxjs",
          "angular-in-memory-web-api": "/node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js"
        }
      }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module.js';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
})
export class AppModule {

    constructor(private upgrade : UpgradeModule){

    }

    ngDoBootstrap(){
        this.upgrade.bootstrap(document.documentElement, ['PhonecatApp'])
    }
}

0 Answers0