[英]is It possible to import an Angular library without use npm?
I have this request from management, we have an Angular application and we are trying to build a new application in a separate project but we would like to have it integrated into the main app. 我收到管理部门的要求,我们有一个Angular应用程序,我们正在尝试在一个单独的项目中构建一个新应用程序,但我们希望将其集成到主应用程序中。 The goal is to have a separate new application that can be developed and deployed independently from the main application.
目标是要有一个独立的新应用程序,可以与主应用程序独立开发和部署。
I thought about the option of creating a library project so we can imported into the main app, and that works if wanted to use npm packages to distribute the app library, but that doesn't allow us to independently deploy the new app without having to deploy the main application. 我考虑过创建库项目的选项,以便我们可以导入到主应用程序中,并且如果要使用npm软件包分发应用程序库也可以使用,但是这不允许我们独立部署新应用程序而不必部署主应用程序。
Is there any way to have a separate app (angular) imported into the main app (angular too) in any way that I could do this. 有没有办法以我可以执行的任何方式将单独的应用程序(角度)导入到主应用程序(角度)中。
I tried to make a deployment to Github of the dist
folder of the library and import it into the script in the angular-cli.json but it didn't work. 我试图将库的
dist
文件夹部署到Github,并将其导入angular-cli.json中的脚本中,但是没有用。
Any help will be appreciated. 任何帮助将不胜感激。
There are a couple options, nothing 'perfect' though as you would have to figure out exactly what routes, etc you want to use and see if that is possible. 有两种选择,但是没有“完美”的选择,因为您必须确切地确定要使用的路线等,看看是否可行。 For instance if you want an SPA, then both apps will be trying to handle '/'.
例如,如果您想要SPA,则两个应用程序都将尝试处理“ /”。
I'm going to assume an example though where you have a main app like the Tour of Heroes app in the docs, but you want to add a Wiki app. 我将以一个示例为例,尽管您在文档中有一个主应用程序,例如Tour of Heroes应用程序,但是您想添加一个Wiki应用程序。 For your specifications I'll assume you want the wiki app to live under
/wiki
when running inside the main app and under /
on it's own. 根据您的规范,我假设您希望wiki应用程序在主应用程序中运行时位于
/wiki
下,并且位于/
自身下。 For example the main app /wiki/pages/tutorial
in the main app will run the same as /pages/tutorial
when the wiki is running on its own. 例如,当Wiki独立运行时,主应用程序中的主应用程序
/wiki/pages/tutorial
将与/pages/tutorial
相同。
I think this is what you were trying to do. 我认为这就是您想要做的。 The apps will not share any services or components and be compiled separately.
这些应用程序将不会共享任何服务或组件,并且会分别进行编译。 The only way I can think of to do this is compile them into separate apps and host one in a sub-folder of the other.
我能想到的唯一方法是将它们编译成单独的应用程序,并将其中一个托管在另一个应用程序的子文件夹中。 Your server cannot re-write all urls, but depending on what type you should be able to route
/wiki
to your second app. 您的服务器无法重写所有网址,但是取决于您应该能够将
/wiki
路由到第二个应用程序的类型。 You will have to trap any links to '/wiki' in your SPA and force a full page reload so the browser picks up the wiki's index.html. 您将必须在SPA中捕获指向“ / wiki”的所有链接,并强制重新加载整个页面,以便浏览器选择Wiki的index.html。 There might be some issues to conquer with the base href also, but it should work.
基本href也可能有一些问题需要克服,但应该可以解决。
This page has a good overview of doing this. 此页面对此进行了很好的概述。 The last few version of Angular let you create separate modules and apps in the same folder.
Angular的最后几个版本使您可以在同一文件夹中创建单独的模块和应用程序。 Shamelessly copying:
无耻地复制:
App1 module App1模块
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule({})
App1SharedModule App1SharedModule
export class App1SharedModule{
static forRoot(): ModuleWithProviders {
return {
ngModule: AppModule,
providers: []
}
}
}
Combined App 组合应用
imports: [
BrowserModule,
AppRoutingModule,
App1SharedModule.forRoot(),
App2SharedModule.forRoot()
],
Each one will run separately on their own, but they would also run together. 每个人都可以单独运行,但也可以一起运行。 Your routing might be hamstrung though so that you have to create a sub-route for both apps that they would run in on their own and when together with the same urls.
不过,您的路由可能会受阻,因此您必须为两个应用程序创建一个子路由,这些应用程序可以单独运行,也可以与相同的URL一起运行。 Ie everything in the first app would be under
app1/
even when running solo. 即,即使单独运行,第一个应用程序中的所有内容都将位于
app1/
下。
You can create a library with your wiki services and components. 您可以使用Wiki服务和组件创建一个库 。 You could then npm install it into both your main app and a skeleton app for the wiki to run on it's own.
然后,您可以将npm将其安装到您的主应用程序和骨架应用程序中,以使Wiki自行运行。 You could expose the
Routes
object and use forChild
in your main app and forRoot
in your wiki app. 你可以暴露
Routes
对象,并使用forChild
在主应用程序,并forRoot
在您的wiki应用程序。
If anyone else have wonder how to do this, in this case I solved the issue using Github Tag. 如果其他人不知道如何执行此操作,在这种情况下,我可以使用Github Tag解决此问题。
I runned: npm install github:org/lib
我跑了:
npm install github:org/lib
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.