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>