Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 13 issues #43

Closed
atlantageek opened this issue May 9, 2022 · 6 comments · Fixed by #44
Closed

Angular 13 issues #43

atlantageek opened this issue May 9, 2022 · 6 comments · Fixed by #44

Comments

@atlantageek
Copy link

When I try to incorporate with angular 13 project I get the following error.
[error] Error: Cannot find module '/home/atlantageek/dev/gis/ui/node_modules/angular-crud/src/crud-module/index'

However, an index.ts file is in the crud-module directory.

@mraible
Copy link
Collaborator

mraible commented May 9, 2022

The v3.0.0 release supports Angular 13. Can you please provide steps to reproduce the problem?

@atlantageek
Copy link
Author

### Create a new angular app using ng v13. Here is my ng version output

$ ng --version

Angular CLI: 13.2.6
Node: 16.13.2
Package Manager: npm 8.1.2
OS: linux x64

Angular: 13.2.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1302.6
@angular-devkit/build-angular 13.2.6
@angular-devkit/core 13.2.6
@angular-devkit/schematics 13.2.6
@angular/cdk 13.3.6
@angular/cli 13.2.6
@angular/material 13.3.6
@schematics/angular 13.2.6
rxjs 7.5.5
typescript 4.5.5


### Creating the app:
$ ng new ui2
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ui2/README.md (1049 bytes)
CREATE ui2/.editorconfig (274 bytes)
CREATE ui2/.gitignore (548 bytes)
CREATE ui2/angular.json (3021 bytes)
CREATE ui2/package.json (1066 bytes)
CREATE ui2/tsconfig.json (863 bytes)
CREATE ui2/.browserslistrc (600 bytes)
CREATE ui2/karma.conf.js (1420 bytes)
CREATE ui2/tsconfig.app.json (287 bytes)
CREATE ui2/tsconfig.spec.json (333 bytes)
CREATE ui2/.vscode/extensions.json (130 bytes)
CREATE ui2/.vscode/launch.json (474 bytes)
CREATE ui2/.vscode/tasks.json (938 bytes)
CREATE ui2/src/favicon.ico (948 bytes)
CREATE ui2/src/index.html (289 bytes)
CREATE ui2/src/main.ts (372 bytes)
CREATE ui2/src/polyfills.ts (2338 bytes)
CREATE ui2/src/styles.css (80 bytes)
CREATE ui2/src/test.ts (745 bytes)
CREATE ui2/src/assets/.gitkeep (0 bytes)
CREATE ui2/src/environments/environment.prod.ts (51 bytes)
CREATE ui2/src/environments/environment.ts (658 bytes)
CREATE ui2/src/app/app-routing.module.ts (245 bytes)
CREATE ui2/src/app/app.module.ts (393 bytes)
CREATE ui2/src/app/app.component.css (0 bytes)
CREATE ui2/src/app/app.component.html (23364 bytes)
CREATE ui2/src/app/app.component.spec.ts (1064 bytes)
CREATE ui2/src/app/app.component.ts (207 bytes)
✔ Packages installed successfully.

### INSTALL angular Material
ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected].
✔ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1132 bytes)
✔ Packages installed successfully.

### Install the generated angular-crud zip file

$ npm i --no-save ~/dev/angular-crud/angular-crud/angular-crud-3.0.0.tgz

added 1 package, and audited 928 packages in 2s

104 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
$ npm install

removed 1 package, and audited 927 packages in 2s

104 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

Now try to build Crud components
$ cd src/app
$ ls
app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts app-routing.module.ts

$ ng g angular-crud:crud-module hotel
An unhandled exception occurred: Collection "angular-crud" cannot be resolved.
See "/tmp/ng-asDpdD/angular-errors.log" for further details.

$ tail -40 /tmp/ng-asDpdD/angular-errors.log
[error] Error: Collection "angular-crud" cannot be resolved.
at SchematicEngineHost.resolve (/home/atlantageek/dev/gis/ui2/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:75:19)
at SchematicEngineHost._resolveCollectionPath (/home/atlantageek/dev/gis/ui2/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:80:37)
at SchematicEngineHost.createCollectionDescription (/home/atlantageek/dev/gis/ui2/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:118:27)
at SchematicEngine._createCollectionDescription (/home/atlantageek/dev/gis/ui2/node_modules/@angular-devkit/schematics/src/engine/engine.js:162:40)
at SchematicEngine.createCollection (/home/atlantageek/dev/gis/ui2/node_modules/@angular-devkit/schematics/src/engine/engine.js:155:43)
at GenerateCommand.getCollection (/home/atlantageek/dev/gis/ui2/node_modules/@angular/cli/models/schematic-command.js:143:35)
at GenerateCommand.initialize (/home/atlantageek/dev/gis/ui2/node_modules/@angular/cli/models/schematic-command.js:62:37)
at async GenerateCommand.initialize (/home/atlantageek/dev/gis/ui2/node_modules/@angular/cli/commands/generate-impl.js:20:9)
at async GenerateCommand.validateAndRun (/home/atlantageek/dev/gis/ui2/node_modules/@angular/cli/models/command.js:121:22)
at async runCommand (/home/atlantageek/dev/gis/ui2/node_modules/@angular/cli/models/command-runner.js:224:24)

@vector67
Copy link
Contributor

The problem is that there isn't a step in the tutorial to build the project before you pack it, so the index.ts never gets transpiled into index.js and then when it's packed into the tgz and unpacked into the demo/node_modules it doesn't have the js file and node can't find the module. To fix it, just insert npm run build in between the npm install and the npm pack

@mraible
Copy link
Collaborator

mraible commented May 17, 2022

You should be able to just install it since it's published on npmjs.org:

npm install -D angular-crud

@vector67
Copy link
Contributor

That works perfectly, but in the README.md file in the root of the repository, the instructions are written with the assumption that we are building from source since the first step is a clone of the repository. Following those instructions precisely does not result in a successful build because the npm run build step is omitted.

It works in the tests because the tests don't quite follow that process. There is a build that happens in the testing which precedes the npm i --no-save ../angular-crud/*.tgz step which ensures that the .js files are created.

@mraible
Copy link
Collaborator

mraible commented May 17, 2022

Can you please create a PR to fix the README?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants