instalar - Creando múltiples paquetes usando un webpack angular-cli

install angular 5

Question

Cuando compilo el proyecto usando angular-cli, agrupa todos los archivos del proyecto en un gran paquete principal.

He utilizado el enrutamiento lento en la aplicación y puedo navegar bien una vez que la aplicación se carga.

¿Hay alguna forma en que el paquete principal se divida en varios archivos en función de los módulos de rutas cargadas de forma lenta?

A continuación se muestra la configuración en angular-cli.json

    {
  "project": {
    "version": "1.0.0-beta.15",
    "name": "maddy-test-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "styles/content",
      "index": "default.htm",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "mobile": false,
      "styles": [
        "styles.less"
      ],
      "scripts": [
        "styles/wfa-myriad-pro-typekit.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "less",
    "prefixInterfaces": false
  }
}

a continuación es package.json

{
  "name": "maddy-test-project",
  "version": "0.0.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint /"src/**/*.ts/"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "d3": "^4.2.3",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.15.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "toastr": "^2.1.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23",  
    "bootstrap-daterangepicker": "^2.1.24"
  },
  "devDependencies": {
    "@types/d3": "^3.5.35",
    "@types/google-maps": "^3.1.27",
    "@types/jasmine": "^2.2.30",
    "@types/jquery": "^1.10.31",
    "@types/lodash": "^4.14.34",
    "@types/toastr": "^2.1.29",
    "angular-cli": "1.0.0-beta.15",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

¡¡Gracias por adelantado!!

Answer 1

Es el rol de NgModule y RouterModule.forChild () . Aquí hay un muy buen artículo para comenzar el desarrollo de grandes aplicaciones modulares de Angular 2: http://blog.angular-university.io/angular2-ngmodule/

Lo primero que debemos hacer es eliminar cada mención del componente Home o HomeModule del componente App y la configuración de enrutamiento principal:

Podemos ver aquí que el componente de la aplicación ya no importa HomeModule, en su lugar, la configuración de enrutamiento usa loadChildren para decir que si / home o cualquier otra url que comienza con ella se golpea, el archivo home.module debe cargarse mediante una llamada Ajax.

En breve, para mover algo de lógica y componentes en un módulo perezoso, puede ejecutar este comando:

ng g module child --routing

Luego, angular-cli generará un NgModule ( app/child/child.module.ts ) y una configuración de enrutador secundario ( app/child/child-routing.module.ts ).

La ruta para la carga perezosa de este enrutador infantil será:

 { path: ''child'', loadChildren: ''app/child/child.module#ChildModule'' }

Y finalmente mueva lo que quiere en su ChildModule con una restricción: otro módulo (como AppModule) no podrá usar ninguna dependencia de ChildModule (como un servicio, por ejemplo). Si lo necesita, una buena práctica es crear un módulo compartido.

Answer 2

Si divide las áreas en las que desea que se carguen de forma perezosa en módulos separados, debería poder producir múltiples paquetes. Eche un vistazo a este plnkr sobre enrutamiento y navegación tomado directamente del sitio web angular.io. Si configura sus rutas de esta manera, debería poder generar una compilación al ejecutar ng service similar a:
Observe los archivos de trozos. En mi proyecto, estos archivos de fragmentos se cargan de forma asíncrona al navegar por las rutas "crisis" y "héroes".

export const routes: Routes = [
  { path: '''', redirectTo: ''contact'', pathMatch: ''full''},
  { path: ''crisis'', loadChildren: ''app/crisis/crisis.module#CrisisModule'' },
  { path: ''heroes'', loadChildren: ''app/hero/hero.module#HeroModule'' }
];