3

muy buenas a todos. Estoy trabajando con Angular y todo funciona ok en mi proyecto que empecé en mi PC pero el problema viene cuando intento hacerlo funcionar cuando hago el clone desde bitbucket. El clone se hace perfecto y hago el npm install y al parecer no da errores visibles pero al hacer el ng-serve lanza miles de errores como el descrito en el titulo:

ERROR in src/app/inscripcion/historial/productos/productos.component.ts(2,71): error TS2306: File '.../app/profile/profile.component.ts(5,29): error TS2306: File '.../node_modules/@angular/material/index.d.ts' is not a module.

y un error de compilación. Probé instalando de nuevo angular material, borrando la carpeta node_modules y haciendo el npm install otra vez pero nada de eso funciona.

Dejo mas info sobre package.json y Angular:

package.json

"dependencies": {
"@angular/animations": "github:angular/animations-builds",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"@ng-bootstrap/ng-bootstrap": "^5.1.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.0",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}

Angular ng v

Angular CLI: 8.0.6
Node: 10.16.0
OS: win32 x64
Angular: 8.0.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/animations               9.0.0-next.7
@angular/cdk                      8.2.0-f537fbafb-f537fba
@angular/cli                      8.0.6
@angular/material                 8.2.0-f537fbafb-f537fba
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.6
@schematics/update                0.800.6
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Tambien me da error en el import { ... } from '@angular/material';

Agradeceria que alguien me pudiese ayudar. No veo info en internet sobre esto. Gracias de antemano.

3
  • 1
    ¿Qué intentas importar desde'@angular/material'? Es posible que esas clases no estén ahí Commented el 20 sept. 2019 a las 9:51
  • import { MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatMenuModule, MatNativeDateModule, MatDividerModule, MatRadioModule, MatListModule, MatTabsModule, MatDatepickerModule, MatTooltipModule, MatIconModule, MatProgressSpinnerModule, MatBadgeModule, MatSnackBarModule, MatDialogModule } from '@angular/material'; <- por ejemplo Commented el 20 sept. 2019 a las 10:00
  • sin embargo, si importo algo desde '@angular/material/XXX' si que lo coge bien y no da el fallo de subrayado en rojo Commented el 20 sept. 2019 a las 10:02

3 respuestas 3

7

Bien, después de estar investigando y mirando código como un loco me dí cuenta de que al importar cualquier componente de angular material desde @angular/material directamente esto daba un error ".../@angular/material" is not a module pero al importarlos desde sus respectivas carpetas como por ejemplo "@angular/material/button" ya no salta ese error. Tuve que cambiar todos los import de app.module.ts y también de todos mis componentes donde los utilizaba.

No se si habrá una solución mejor pero esto es lo que me ha servido a mi por el momento. si alguien sabe otro método por favor lo publique.

Gracias

1
  • 1
    Es que es como se debe hacer, las clases no están declaradas desde la raíz del módulo, sino en distintas carpetas Commented el 20 sept. 2019 a las 11:16
1

Para poder realizar multiples import como lo deseas tiene que existir un index.ts que contenga los export de todos modulos contenidos en esa carpeta. Para tú caso te da error al realizar el import { ... } from '@angular/material' ya que este no cuenta con un index.ts que contenga los modulos de ese directorio.

-1

tiene que mirar varias cuestiones en si tiene mirar la version de angular global

ng --version

este actualiza y tambien mira la version local node_modules/@angular/core/package. json te va aparecer el Json

version": "13.1.1"

a veces tene la version local mas desatualizada que lo global o visiversa no se tu caso

pero sin salime de la pregunta node_modules fijate que no tenga la carpeta de Material y tambien una cdk y otra que dice animation revisa que no tenga eso

por último podemo forzar la descarga de material

//acá le especificamos la version que deseamos
npm install  @angular/[email protected] --force

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.