When I run ng build project1 --prod the build fails with the error message
ERROR in : Cannot determine the module for class MyComponent in .../project2/app/my.component.ts! Add MyComponent to the NgModule to fix it..
This seems pretty straight forward, BUT the mentioned Component is not part of the current Angular project. I defined two projects inside my angular.json and they are not dependent of each other (project1 & project2). I've got a separate shared module which both projects import and use.
The error appeared when I moved a component from project2 to my shared module. My project2 builds fine and the moved components also work fine. ng serve project1 works without problems. But for some reason, my first project now depends on most components from my second project for no reason. I already searched all my imports for the file without success. Maybe it's related to the fact that the components from project2 extend a component from the shared module?
So is there any way to see where angular thinks it needs this? For example, I see the main chuck was build before - what is angular building when it fails?
Can I exclude this somehow (tsconfig.app.json exclude didn't work)?
I found an unused import which itself imported most of the other projects components.
But if anyone still knows a way to see which file caused this kind of error I would still appreciate it and accept it as the final answer. I had to look into every single file to find the wrong import.
Related
I was building a library of ui components in Angular13.
The folder structure is
--- project
--- uiWorkspace(this is lib)
--- uiComponents(this is another library inside the uiWorkspace Lib)
-header
-header.component.ts
-header.components.html
-header.component.scss
So if you closely observe the above structure, it has a library called uiWorkspace, within which there is another library called uiComponents, and all the components will be created under this uiCompoents library.
I am importing uiComponentModule from uiComponent library module and placing it inside the uiWorkspace Module
Problem Statement : With the above structure when i try to build my uiWorkspace library(ng build uiWorkspace) it is throwing an error after creating the dist folder like below.
.../projects/ui-workspace/src/lib/ui-components/src/projects/ui-workspace/src/lib.ngtypecheck.ts' not found.
The file is in the program because:
Root file specified for compilation
Ive tried to resolve this error looking into other similar posts, but dont see much things related when comes to building a library.
If somebody could guide me on this, it would be really great!
Thanks in advance!!
I'm currently developing two applications in two different projects: a React component library to be used as a design system, and a React webapp to render pages using components from design system.
Inside my webapp, I import the components as following:
import { Button } from 'designsystem'
Inside the package.json of designsystem, my main entry points to /src/index.js where all my components are exported as a ES6 module. When I'm developing that's ok, because when I update a component in designsystem it reflects on the webapp and that's the desired behaviour.
Although when I try to build my webapp, it only works if I point the main entry of designsystem to the dist folder, which contains a bundled file with all the components as UMD. This way, I can't see the changes of the components inside my webapp unless if I build everything again.
I already tried to conditionally return the components module or dist content in /src/index.js in order to point to the correct content. But nothing worked.
My question is: Is there a way to conditionally change the main entry in package.json? If not, is there another solution for this?
EDIT: When the main is pointing to the source, I can work fine with it using npm link. My problem comes when I try to build the parent, unless I switch the main to the build folder.
The "main" entry in your package.json deserves to point to the build folder:
The main field is a module ID that is the primary entry point to your
program. That is, if your package is named foo, and a user installs
it, and then does require("foo"), then your main module's exports
object will be returned.
This should be a module ID relative to the root of your package
folder.
For most modules, it makes the most sense to have a main script and
often not much else.
Ref:https://docs.npmjs.com/files/package.json#main
The root of your package has nothing to do with your dev app. You should use npm link while developing and leave unchanged your main pointing to build folder.
I've got an Angular 6 project that's made of up a main application, and a separate sub-project that is a library. I'm trying to consume this library from the main application, and I can't seem to get it working.
In the tsconfig.json, I have the following paths configuration:
"paths": {
"#my-company/my-package/*": "dist/my-package/*"
}
And then in the main app, I import the library like so:
import { ButtonModule } from '#my-company/my-package/button';
However, when I build the main application, I get tons of errors about not being able to find modules. For the above import statement, I'll get this error:
Module not found: Error: Can't resolve '/Users/jattardi/code/myproject/dist/my-package/button'
However, if I check the dist/my-package directory, there certainly is a button directory containing the type definitions.
The reason my imports have subpaths, e.g. #my-company/my-package/button instead of just #my-company/my-package is to make it tree-shakeable. Not sure this is possible. Since this is an Angular 6/ng-packagr generated build, do I lose this ability?
I was hit with the same error when trying to consume in the main application. My answer will not solve that case as I am trying to get my lazy loaded module, I moved into the new Angular6 library, to work.
I was able to publish my library project to npm and consume it in the main application as an npm dependency. For eg: #santony/ngx-material. May be as a workaround you could do that until this is resolved.
For those who are still facing this problem, there's a "how to" at ng-packagr's documentation:
https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
Basically,
All you have to do is create a package.json file and put it where you want a secondary entry point to be created.
The contents of my_package/testing/package.json can be as simple as:
{
"ngPackage": {}
}
And also, in dev application, I've added the path reference to the secondary endpoint, so it worked:
"#my-company/my-library/another": [
"dist/my-library/another"
]
I am trying to build my new portfolio with Angular 4 but came across few issues.
I first built it with normal html,css and js and worked fine.
I am using typed.js to create an animation at the beginning.
This are the steps that I followed:
1 - in node_modules created folder typed within typed.min.js
2 - angular-cli.json under scripts section "../node_modules/typed/typed.min.js"
3 - in typed component i imported as: import * as typed from
'../../../../node_modules/typed/typed.min.js'; (apparently not working today and the terminal is saying this ERROR in src/app/components/loading-section/loading-section.component.ts(2,24): error TS6143: Module '../../../../node_modules/typed/typed.min.js' was resolved to '/Users/matteosoresini/Development/Portfolio2017/node_modules/typed/typed.min.js', but '--allowJs' is not set. so if i change the path as the terminal says is working but doesn't really make sense but this is not the main issue.
4 - in ngInit i tried to implement the JS function and when run the project the terminal says typed is not a constructor, even if i move the function inside a script within the typed.component.html
can you please help me with this and clarify where to import external plugin?
Thanks
I was able to install typed.js via npm install typed.js --save.
I then tried to use import { Typed } from 'typed.js'; as shown in the typed.js documentation. That threw the not a constructor error.
I changed the import to import * as Typed from 'typed.js'; and it worked for me.
Types.js has no defined typescript types in DefinitelyTyped repo.
I not sure how it would behave with Angular since it does DOM changes outside angular. You can see and try https://github.com/kuflink/angular-typed but it is not production ready.
I have a testing angular project (lets call it project1) where I'm writing my components. I have to use routing in this project in order to navigate from component to component (organizational and esthetic's purpose).
I have another angular project (lets call it project2) which HAS in its node_ modules the component project-project1 (made available by referencing it through package.json) in project2.
Problem
When I have to fetch the components from project1 to project2 (simple angular forRoot routing in project2), a problem appears with forRoot conflict which is now in my project1 and project2.
The problem disappears once I remove the routing from project1 in the node_modules from project2 but thats time consuming.
Is there a way to solve this problem, other than mannualy deleting the routes in my dependency (project1) or commenting code just to make project2 work?
Solution 1
Add a conditional statement for the forRoot() method inside the project1.
So everytime you're building it as a standalone app it will do forRoot() and when built as a npm dependency- forChild().
// this is how you're getting the environment
import { environment } from './environment';
Solution 2
Add lazy-loading inside project1 so the cli won't bundle all of the modules as one, but as separate. After that import OR lazy-load project1 modules(not the root, it still has the forRoot()) inside project2, referencing it from the node_modules.
Beware of this issue if doing lazy-loading from node_modules.
If you need more help, please add some code.