Uncaught TypeError: System.config is not a function al migrar AngularJs a Angular8


#1

Hola
Estoy migrando una aplicacion de AngularJs a Angular8, siguiendo angular io guide upgrade y google, pero paso de un error a otro… (sin entender exactamente que esta faltando)
Un tsc --build C:\medanitofnd\tsconfig.json compila correctamente
El archivo systemjs.config.js me indica error, aunque creo que lo tengo como indica la documentacion.

  La aplicacion esta en C:\aplicafnd
	C:\aplicafnd\package.json
	C:\aplicafnd\tsconfig.json
	C:\aplicafnd\app\index.html
	C:\aplicafnd\app\app.component.ts
	C:\aplicafnd\app\app.component.spec.ts
	C:\aplicafnd\app\app.module.ajs.ts   #modulo de anghularJS
	C:\aplicafnd\app\app.module.ts
	C:\aplicafnd\app\main.ts
	C:\aplicafnd\app\XXX\  #donde  XXX son los diferentes modulos/servicios

Les agradece que si me pueden orientar para solucionar el error.
Los archivos los puden ver en

Gracias.

     app.module.ajs.js:5 Uncaught ReferenceError: require is not defined
        at app.module.ajs.js:5
    (anonymous) @ app.module.ajs.js:5
    app.module.js:9 Uncaught ReferenceError: require is not defined
        at app.module.js:9
    (anonymous) @ app.module.js:9
    main.js:6 Uncaught ReferenceError: require is not defined
        at main.js:6
    (anonymous) @ main.js:6
    angular.js:38 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.11/$injector/nomod?p0=medanito
        at angular.js:38
        at angular.js:2133
        at b (angular.js:2057)
        at Object.module (angular.js:2131)
        at config.js:207
    (anonymous) @ angular.js:38
    (anonymous) @ angular.js:2133
    b @ angular.js:2057
    (anonymous) @ angular.js:2131
    (anonymous) @ config.js:207
    angular.js:38 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.11/$injector/nomod?p0=medanito
        at angular.js:38
        at angular.js:2133
        at b (angular.js:2057)
        at Object.module (angular.js:2131)
        at directives.js:167

Como no me deja subir archivos ni link, coloco el texto de cada archivo.

//main.ts

//import 'zone.js';
//import 'reflect-metadata';

//import angular from 'angular';

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

platformBrowserDynamic().bootstrapModule(AppModule);

------------------------------
//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
//import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent }  from './app.component';

import moduleName from './app.module.ajs'; //traer moduleName desde angularJS

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.documentElement, ['medanito']);
  }
}

------------------------------
//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

-----------------------------
//app.component.spec.ts

import { AppComponent } from './app.component';

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

describe('AppComponent', function () {
  let de: DebugElement;
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('h1'));
  });

  it('should create component', () => expect(comp).toBeDefined() );

  it('should have expected <h1> text', () => {
    fixture.detectChanges();
    const h1 = de.nativeElement;
    expect(h1.innerText).toMatch(/angular/i,
      '<h1> should say something about "Angular"');
  });
});

-----------------------------
//app.module.ajs.ts

// fallaimport angular from 'angular';
import * as angular from 'angular';
//import 'angular-route';


import 'jquery';
import 'lodash';

//import 'bootstrap/dist/css/bootstrap.min.css'
//import "./styles/app.scss";


const MODULE_NAME = 'aplica';



(function () {
    angular.module('aplica', [
 //   angular.module(MODULE_NAME, [
        'ui.router',
        'ui.bootstrap',
        'ngHandsontable',
        'schemaForm',

        'aplica.services',
        'grid',
        'exportacionxls',
        'form',
        'importacionxls',
        'formPer',
        'procesos',
        'usuarios',
        'coremain',
        'menu',
        'grid.filtros',
        'aplica.filters',

        'ngFileSaver',
        'ngStorage',
        'hSweetAlert',
        'angular-toArrayFilter'
        // 'ceibo.components.table.export',
        // 'aplica.controllers'
    ]);
})();

export default MODULE_NAME;

--------------------------------
//app.module.ajs.ts

// fallaimport angular from 'angular';
import * as angular from 'angular';
//import 'angular-route';


import 'jquery';
import 'lodash';

//import 'bootstrap/dist/css/bootstrap.min.css'
//import "./styles/app.scss";


const MODULE_NAME = 'aplica';



(function () {
    angular.module('aplica', [
 //   angular.module(MODULE_NAME, [
        'ui.router',
        'ui.bootstrap',
        'ngHandsontable',
        'schemaForm',

        'aplica.services',
        'grid',
        'exportacionxls',
        'form',
        'importacionxls',
        'formPer',
        'procesos',
        'usuarios',
        'coremain',
        'menu',
        'grid.filtros',
        'aplica.filters',

        'ngFileSaver',
        'ngStorage',
        'hSweetAlert',
        'angular-toArrayFilter'
        // 'ceibo.components.table.export',
        // 'aplica.controllers'
    ]);
})();

export default MODULE_NAME;


---------------------------------
//package.json
{
  "name": "aplica",
  "version": "2.5.0",
  "description": "",
  "dependencies": {
    "@angular/common": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "^8.1.1",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/router": "^8.1.1",
    "@angular/upgrade": "^8.1.1",
    "@types/jquery": "^3.3.30",
    "angular": "^1.5.0",
    "angular-route": "^1.5.0",
    "angular-schema-form-bootstrap": "^0.2.0",
    "bootstrap": "^3.3.6",
    "core-js": "^3.1.4",
    "core-js-bundle": "^3.1.4",
    "es6-shim": "^0.35.5",
    "grunt": "^0.4.5",
    "jquery": "^3.4.1",
    "lodash": "^4.17.14",
    "moment": "^2.24.0",
    "natives": "^1.1.6",
    "nvm": "0.0.4",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.5.2",
    "systemjs": "^4.1.0",
    "zone": "^0.3.4",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@types/angular": "^1.6.55",
    "@types/angular-animate": "^1.5.10",
    "@types/angular-cookies": "^1.4.5",
    "@types/angular-mocks": "^1.7.0",
    "@types/angular-resource": "^1.5.15",
    "@types/angular-route": "^1.7.0",
    "@types/angular-sanitize": "^1.7.0",
    "@types/jasmine": "^3.3.13",
    "@types/node": "^12.0.10",
    "grunt": "^0.4.5",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-contrib-copy": "^0.6.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-less": "^0.11.4",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.0.0",
    "grunt-ssh": "^0.12.9",
    "grunt-usemin": "^2.4.0",
    "jshint-stylish": "^1.0.0",
    "load-grunt-tasks": "^0.6.0",
    "time-grunt": "^1.0.0",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.2"
  }
}
----------------------------------

//tsconfig.json
{
  "compilerOptions": {
      "module": "commonjs", //* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
      "target": "es5",  //en manual dice usar es5
      "sourceMap": false   //:true emite archovo .map que no se para q es
    ,"experimentalDecorators": true
    ,"allowJs": true

    //,  "outDir": "build"  //sin: los .ts-> .js los pone en el directorio de cada .js sino los pone todos en un solo directorio build
	//,  "outDir": "app/"  //copia los directorios a al patth. 
  }
  ,"scripts": {
			"tsc": "tsc",
			"tsc:w": "tsc -w"
  }
  
  , "exclude": [
                "node_modules"
                ,"app/scripts/plugins"
				,"quickstart/*.*"
  ]
  , "types": [
    "node"
  ],

 "include": [
    "app/**/*.ts"

  ]
  
   
}

/// Otras cosas
//  "extends": "./tsconfig.json",
//  "include": ["src/root/index.ts" ]

----------------------------------
//index.html
<!DOCTYPE html>
<!--  <html ng-app="aplica"> -->
<html  >
<head>

<base href="/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Page title set in pageTitle directive -->
    <title page-title></title>

    <!-- Google Open Sans -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- Font awesome -->
    <link href="bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/smartmenus/dist/addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="bower_components/handsontable/plugins/bootstrap/handsontable.bootstrap.css">
    <link href="bower_components/please-wait/build/please-wait.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="bower_components/sweetalert/dist/sweetalert.css">
    <link rel="stylesheet" type="text/css" href="bower_components/pickadate/lib/themes/classic.css">
    <link rel="stylesheet" type="text/css" href="bower_components/pickadate/lib/themes/classic.date.css">
    <!-- Main Inspinia CSS files -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp,app}) styles/style.css -->
    <link rel="stylesheet" href="plugins/handsontable-pro/dist/handsontable.full.css">
    <link href="styles/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="styles/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="styles/animate.css" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet">
    <link href="styles/aplica.css" rel="stylesheet">
    <link href="styles/default.css" rel="stylesheet">
    <!-- endbuild -->


    <scriptX src="/node_modules/es5-shim/es5-shim.js"></scriptX>   <!-- remplaza  /node_modules/core-js/client/shim.min.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>  <!-- remplaza  /node_modules/systemjs/dist/system.src.js-->

    <script src="https://raw.githack.com/systemjs/systemjs/master/src/extras/named-register.js"></script>

    <script src="systemjs.config.js"></script>
    <script>

        System.import('main.js'); //.catch(function(err){ console.error(err); });
    </script>
</head>

<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used in Inspinia theme on diferent view -->
<!-- <body class="top-navigation fixed-nav gray-bg" ng-controller="MainCtrl as main">  -->
 <body>
<!-- Main view  -->
<div ui-view></div>


<!-- build:js(.) scripts/vendor.js -->

<!-- jQuery and Bootstrap -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!--<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>-->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/smartmenus/dist/jquery.smartmenus.min.js"></script>
<!-- MetsiMenu -->
<!--<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>-->

<!-- SlimScroll -->
<!--<script src="bower_components/slimScroll/jquery.slimscroll.min.js"></script>-->

<!-- Peace JS -->
<!--<script src="bower_components/pace/pace.min.js"></script>-->

<!-- Angular scripts-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-toArrayFilter/toArrayFilter.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="bower_components/angular-sweetalert/dist/ngSweetAlert.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form-bootstrap/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/pickadate/lib/picker.js"></script>
<script type="text/javascript" src="bower_components/pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="bower_components/please-wait/build/please-wait.min.js"></script>
<script type="text/javascript" src="bower_components/ngstorage/ngStorage.js"></script>
<script lang="javascript" src="bower_components/js-xlsx/shim.js"></script>
<script lang="javascript" src="bower_components/js-xlsx/dist/xlsx.full.min.js"></script>
<script lang="javascript" src="bower_components/angular-file-saver/dist/angular-file-saver.bundle.js"></script>

<!-- Angular Dependiences -->
<!--                      -->
<!--                      -->
<!--                      -->

<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- Custom and plugin javascript -->
<script src="plugins/handsontable-pro/dist/handsontable.full.js"></script>
<script src="plugins/ngHandsontable/dist/ngHandsontable.js"></script>
<script src="plugins/handsontable-pro/dist/numbro/languages.js"></script>
<script src="scripts/inspinia.js"></script>
<script src="scripts/jquery.smartmenus.bootstrap.js"></script>
<script src="scripts/plugins/jasny/jasny-bootstrap.min.js"></script>

<!-- Anglar App Script -->
<!--  <script src="scripts/app.js"></script>  -->

<script>var exports = {};</script>

<script src="app.module.ajs.js"></script>
<script src="app.module.js"></script>
<script src="main.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/directives.js"></script>




<!-- componente  servicios/componentes del principales para iniciar  -->
<!-- <script  <script src="scripts/controllers/index.js"></script> -->
<!--  <script src="scripts/controllers/main.js"></script>  -->
<!--   <script src="scripts/controllers/topnavigation.js"></script>  -->
<script src="core-main/core-main.service.spec.js"></script>
<script src="core-main/core-main.module.js"></script>
<script src="core-main/core-main.service.js"></script>
<script src="core-main/services.js"></script>



<!-- componente grillas -->
<!-- <script src="scripts/controllers/grid.js"></script> -->
<script src="grillas/grid.service.spec.js"></script>
<script src="grillas/grid.module.js"></script>
<script src="grillas/grid.service.js"></script>
<!--  <script src="scripts/controllers/modalfiltro.js"></script> -->
<script src="grillas/grid.filtros.service.spec.js"></script>
<script src="grillas/grid.filtros.module.js"></script>
<script src="grillas/grid.filtros.service.js"></script>


<!-- componente formularios -->
<!-- <script src="scripts/controllers/modal.js"></script> -->
<script src="formularios/form.service.spec.js"></script>
<script src="formularios/form.module.js"></script>
<script src="formularios/form.service.js"></script>





<!-- componente exportacion -->
<!--  <script src="scripts/controllers/modalexport.js"></script> -->
<script src="exportacion/exportacionxls.service.spec.js"></script>
<script src="exportacion/exportacionxls.module.js"></script>
<script src="exportacion/exportacionxls.service.js"></script>

<!-- componente importacion  -->
<!--  <script src="scripts/controllers/modalimport.js"></script> -->
<script src="importacion/importacionxls.service.spec.js"></script>
<script src="importacion/importacionxls.module.js"></script>
<script src="importacion/importacionxls.service.js"></script>


<!-- componente formularios Per (sin grillas)  -->
<!--  <script src="scripts/controllers/per.js"></script> -->
<script src="formularios/formPer.service.spec.js"></script>
<script src="formularios/formPer.module.js"></script>
<script src="formularios/formPer.service.js"></script>

<!-- componente procesos  -->
<script src="procesos/procesos.service.spec.js"></script>
<script src="procesos/procesos.module.js"></script>
<script src="procesos/procesos.service.js"></script>



<!-- componente autenticacion y ABM de usuarios  -->
<!-- <script src="scripts/controllers/auth.js"></script>   -->
<script src="usuarios/usuarios.service.spec.js"></script>
<script src="usuarios/usuarios.module.js"></script>
<script src="usuarios/usuarios.service.js"></script>

<!-- componente menu  -->
<script src="menu/menu.service.spec.js"></script>
<script src="menu/menu.module.js"></script>
<script src="menu/menu.service.js"></script>


<script src="scripts/filters.js"></script>

<script src="scripts/seteos.js"></script>
<!-- endbuild -->
<script>
  //  $(document).ready(function(){
  //      $('[data-toggle="tooltip"]').tooltip();
 //   });
</script>

<my-app>Loading AppComponent content here ...</my-app>
</body>

</html>

#2

Este tema se cerró automáticamente 10 días después del último post. No se permiten nuevas respuestas.