Je ne parviens pas à importer le composant défini dans l'un des sous-modules que j'emballe et que je fais référence dans le projet principal. Tout semble bien mais je vois toujours une erreur -
ERREUR dans ./src/app/app.module.ts Module introuvable: Erreur: impossible résoudre '@ first-project / second-project / app / register ration / registration.component 'dans 'C: \ Users \ anujin \ Documents \ workspace-vs-code \ FirstProject \ src \ app' ERREUR dans ./src/app/app-routing.module.ts Module introuvable: Erreur: Impossible de résoudre '@ first-project / second-project / app / register ration / registration.component 'dans 'C: \ Users \ anujin \ Documents \ workspace-vs-code \ FirstProject \ src \ app'
J'ai créé deux projets -
J'ai créé un RegistrationComponent dans SecondProject que je dois utiliser dans FirstProject.
Fichiers FirstProject:
package.json
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from '@first-project/second-project/app/registration/registration.component';
const routes: Routes = [
{path: 'registration', component: RegistrationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ng-package.json -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegistrationComponent } from '@first-project/second-project/app/registration/registration.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
RegistrationComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
public_api.ts
{
"name": "first-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "~7.3.1",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.1",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"@first-project/second-project": "<path>/SecondProject/dist/first-project-second-project-0.0.0.tgz"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.1",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
J'ai exécuté les commandes suivantes dans FirstProject -
Ensuite, j'ai fait référence au pack SecondProject dans FirstProject.
Fichiers FirstProject - p >
package.json
export * from './app/app.module'; export * from './app/registration/registration.component';
app.module.ts
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"lib": {
"entryFile": "./src/public_api.ts"
},
"whitelistedNonPeerDependencies": [
"@angular/animations",
"@angular/cdk",
"@angular/common",
"@angular/compiler",
"@angular/forms",
"@angular/core",
"@angular/http",
"@angular/material",
"@angular/platform-browser",
"@angular/platform-browser-dynamic",
"@angular/router",
"core-js",
"rxjs",
"tsickle",
"zone.js",
"ng-packagr"
]
}
3 Réponses :
Vous pouvez utiliser le dossier partagé, créer le RegistrationComponent dans le module partagé et l'utiliser dans les deux projets. Veuillez consulter le lien suivant, cela résoudra votre problème.
Partager le code (composant) entre plusieurs projets
Partage de code- avec-plusieurs-app-angular-project-using-base-components
Votre lien m'a donné une direction pour trouver une solution. Merci beaucoup. Voter. À votre santé!!
veuillez exporter votre composant dans le fichier public.ts
public_api.ts export * from './app/RegistrationComponent.component'; export * from './app/app.module';
POUR LES COMPOSANTS: L'utilisation de l'exportation rend l'élément visible. L'ajouter à le fichier d'entrée rend la classe visible.
Lisez ceci: The Angular Library Series - Création d'une bibliothèque avec Angular CLI
Même erreur. J'ai également mis à jour le public_api.ts . J'ai essayé cela plus tôt mais j'obtenais toujours la même erreur. Essayé à nouveau en ce moment et voir la même erreur.
@apun - vous devez également exporter votre module d'inscription
Mais c'est un composant et non un module que j'ai déjà exporté. N'est-ce pas? Il n'y a qu'un seul module d'application qui vient par défaut lors de la génération du projet en utilisant ng-cli
@apun - votre code n'est pas clair, même si vous ne parvenez pas à localiser lequel est le premier projet et lequel une seconde, si vous pouvez partager du code quelque part, je peux vous aider davantage
Bien sûr, donnez-moi une minute s'il vous plaît. Le partager.
Vous pouvez y accéder ici . Veuillez me faire savoir si vous rencontrez des problèmes pour y accéder. Apprécier ton aide.
@apun - cette erreur que vous obtenez au moment ou au moment de la compilation?
Compilez le temps lorsque j'essaye de le construire. J'essaie de créer des dépôts de hub git pour votre référence.
J'ai ajouté les dépôts ici - FirstProject , SecondProject .
En fait, le package.json généré dans le dossier dist ne contient pas le champ 'main', qui expose le fichier .js par défaut de la bibliothèque.
Pour vérifier cela, vous pouvez simplement l'ajouter manuellement. Dans les node_modules de votre application consommant la bibliothèque, ouvrez le bundle de la bibliothèque et ajoutez dans le package.json quelque chose comme:
"main": "./esm2015/my-library-name-here.js" . Bien sûr, cela dépend du nom de votre bibliothèque.
Je n'ai pas trouvé de moyen clair de définir cela automatiquement avec la configuration ng-packagr, donc je fais un script maison!