标签: angular-module

我已经在LoadingComponent我的应用程序的根目录中创建了一个小的component()并且(显然)在我的应用程序中声明了它AppModule.我的应用程序加载时会使用此组件,并应显示一些奇特的加载动画.

现在我想在保存一些东西时在子模块中使用它.但是当我想在另一个模块中使用这个组件时,我总是会遇到错误.

我在AppModule中导出了LoadingComponent:

import { ButtonsModule } from './buttons/buttons.module';
import { FormsModule } from '@angular/forms';
import { StatusLightsDisplayComponent } from './status-lights-display/status-lights-display.component';
import { StatusLightsContainerComponent } from './status-lights-container/status-lights-container.component';
import { HttpModule } from '@angular/http';
import { ReportsService } from './services/reports.service';
import { BrowserModule } from '@angular/platform-browser';
import { forwardRef, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeneralInformationComponent } from './general-information/general-information.component';
import { TextfieldsComponent } from './textfields/textfields.component';
import { LoadingComponent } from './loading/loading.component'; …

我有几个类我想成为一个普通的bean/DTO类,它们不是显示@component类,它们不是@Pipe类,也不是@Directive(至少我不认为它应该是!).

我希望能够将它们捆绑到一个模块中(它们将用于其他模块),但是尽管有几个咒语,我仍然会遇到这样的错误:

当我启动我的Angular应用程序(ng服务)时,它编译正常,但在浏览器(Chrome)控制台中我收到错误....

Uncaught Error: Unexpected value 'Accreditation' declared by the module 'ServiceModule'. Please add a @Pipe/@Directive/@Component annotation.

我应该如何将这些类捆绑到一个模块中供其他模块使用？我不介意他们是在我的服务模块中还是在另一个新的'beans'模块中.

给定此模块定义(service.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MemberService} from "./member/member.service";
import { Accreditation } from "./accreditation";
import {Player} from "./player";
import {Club} from "./club";
import {Coach} from "./coach";

@NgModule({
  imports: [CommonModule],
  declarations: [Accreditation, Club, Player, Coach],
  exports: [Accreditation, Club, Player, Coach],
  providers: [MemberService]
})
export class ServiceModule { }

accreditation.ts:

export class Accreditation { …

现在,使用Angular v5,同时使用延迟加载,我加载app.module.ts我认为不是最佳策略的所有提供者,因为这不会加快我的应用程序启动时间,特别是因为我有50个自定义的东西提供者(不要评判我;)).

因此,我问我自己是否应该为我的所有应用程序加载所有这些应用程序,或者我是否应该只在我只使用它们的地方加载它们？

我猜测只在我真正使用它们的地方加载提供商会更好.

但在这种情况下,对我而言根本不清楚如何解决以下构造:

假设我有三个页面(A,B和C),它们有自己的模块和三个提供程序(1,2和3).

A use 1
B use 1, 2, 3
C use 1, 2

• 我想,因为1是在所有应用程序中使用,我将不得不声明它 app.module.ts

• 由于3只在B​​页中使用,我想我只需要声明它 B.module.ts

• 但是2呢？我怎么能在两者中声明它B.module.ts并且C.module.ts目标是共享相同的提供者"内存"(如果提供者包含一个值,B和C应该看到相同的对象),我将分别如何编码？只需通过"像往常一样"注入提供者并完成剩下的角度吗？

提前获得任何帮助,真的很感激

UPDATE

不确定我是否正确理解了角度文档,但这是目标,应该为所有应用程序加载提供程序吗？

看到

https://angular.io/guide/ngmodule-faq#q-component-scoped-providers

更新2018年

注入策略随着Angular v6的引入而发展.根据文档,可以providedIn指定应该使用服务的模块.请参阅https://angular.io/guide/dependency-injection

我想要实现的目标:

我已经创建了一个Angular模块,我希望在npm install我的GIT仓库(我不想使用npm publish它,因为它是私有代码)在其他项目中.

我正在使用ng-packagr(https://github.com/dherges/ng-packagr)获取Angular包格式.这将为dist新创建的包创建一个文件夹.

这是我用GIT安装mypackage的方法,例如:

npm install https://SOMETHING/SOMETHING.git#v0.1.0

我的问题是:

我的问题是我尝试了这两件事,但我认为它们都是丑陋或糟糕的:

1. 我把一切都对我GIT回购(我删除dist从.gitignore),但经过npm install和npm start我得到一个模块没有发现错误.我认为这甚至不起作用,因为包在子文件夹中dist(我从中导入我的模块node_modules/mypackage/dist).另一个问题是,当我安装软件包时,我的源文件也存在,这不是最好的.

2. 我只将dist文件夹推送到GIT仓库.然后我可以在另一个项目中轻松安装它,它可以工作,没有错误.但我的问题是我应该把我的代码推到其他地方.有了这个,我必须有2个GIT回购.一个用于我的实际代码,一个用于包(dist文件夹).

我知道必须有某种更好的解决方案.我读了很多文章,但我一无所获.

谁能为此提出一个好的解决方案？或者我应该选择第二个？

对 Angular 服务的生命周期有一些疑问。我目前的理解是，如果你将服务注入到一个组件中，并且该服务是在该组件的providers数组中提供的，那么当该组件被销毁时，该服务也会被销毁。

这是一个不太抽象的例子：

@Component({
  selector: 'app-offline-header',
  templateUrl: './offline-header.component.html',
  styleUrls: ['./offline-header.component.css'],
  providers: [WebsocketService]
})

export class OfflineHeaderComponent{ 
  constructor(private socket: WebsocketService) {}
}

在上面的示例中，是WebsocketService在此组件的级别上注入的，而不是在 app.module（或其他模块）上注入的。那么如果这个组件被销毁，服务实例也会被销毁吗？

问题：

1. 当这个组件被销毁时，WebsocketService实例是否也被销毁？

2. 如果我们在根模块（）中提供此服务app.module，那么服务是单例吗？如果是这种情况并且服务是单例，那么这个单例是何时创建的？

我正在尝试使用存储经过身份验证的用户详细信息的应用程序范围的服务(UserService).我已经设置了一些路由,但发现UserService是按路由实例化的.我希望他们共享相同的UserService.

我创建了一个包含TestService作为提供程序的CoreModule,并将其导入AppModule.

core.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestService } from '../test.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    TestService
  ]
})
export class CoreModule { }

test.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor() { console.log('testService constructor called');}
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { …

我有一个 Angular Web 应用程序（客户端 - Angular 9，服务器 - Java），现在我想添加要Express-engine使用Angular universal.

我的目标是继续在浏览器中正常运行所有应用程序，并且只有新组件的特定模块才会在服务器上呈现。网站应照常加载，并且当路由到应用程序的特定部分时，它将从服务器加载预渲染模块。

是否可以在服务器上仅渲染部分网页？

谢谢！

编辑： 正如@izmaylovdev建议的那样，我尝试server.ts使用以下内容进行编辑get：

// All regular routes use the Universal engine
server.get('*', (req, res) => {     
  res.sendFile(distFolder + '\\' + indexHtml);   
}); 
// Specific route
server.get(matcherForSpecificRoutes, (req, res) => {     
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });   
});

但我怎样才能看到不同的行为呢？我只能在不同的 URL 上看到不同的日志。

我试图弄清楚如何在 Angular 11 中使用useFactory作为异步函数。现在我有这个：

import { ApolloClientOptions } from 'apollo-client';
import { FirebaseService } from './firebase.service';
// other imports here...

export async function createApollo(httpLink: HttpLink, fs: FirebaseService): Promise<ApolloClientOptions<any>> {

  const token = await fs.getToken();

  const getHeaders = async () => {
    return {
      "X-Auth-Token": token,
    };
  };

  // functions has more content here...

  return Promise.resolve({
    link: errorLink.concat(link),
    cache: new InMemoryCache(),
  });
}

@NgModule({
  imports: [HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, FirebaseService],
    },
  ],
}) …

我有一个 angular 6 项目，结构如下...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...示例模块的路由结构看起来像...

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: SampleComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
}) …

我有一个用三个项目创建的 Angular 工作区。以及我刚刚创建了一个库，我希望在其中包含可重用的模块。

通常对于项目（应用程序和库），我运行以下命令来生成模块或组件：

ng g c component componentName --project=UserPortal

ng g c component componentName --project=myLibrary

但是现在我需要向其中的模块添加组件：

例如库： projects myLibrary src lib navigation-module Add Component here

对于应用项目模块： projects UserPortal src app userModule Add Component Here

我能够通过运行在工作区的库项目中创建一个模块：

ng generate module navigation-module --project=myLibrary

目前我必须通过命令行进入该目录才能创建一个组件。但我有一种感觉，我可以像所有其他命令一样从工作区执行此操作。这将是最有益的，而不必在目录之间进行命令行排列或来回切换。

快速概览：

1. 在 Angular 工作区中创建一个库
2. 在 Angular 工作区的库中创建了一个模块
3. 想要从工作区的库中的模块内创建一个组件